HTML Tables

HTML Tables


HTML tables allow web developers to arrange data into rows and columns.


Example

Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Try it Yourself »


Define an HTML Table

A table in HTML consists of table cells inside rows and columns

Example

A simple HTML table:

Try it Yourself »


Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example

Try it Yourself »

Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables, etc.


Table Rows

Each table row starts with a <tr> and end with a </tr> tag.

tr stands for table row.

Example

Try it Yourself »

You can have as many rows as you like in a table, just make sure that the number of cells are the same in each row.

Note: There are times where a row can have less or more cells than another. You will learn about that in a later chapter.


Table Headers

Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag:

Example

Let the first row be table headers:

Try it Yourself »

By default, the text in <th> elements are bold and centered, but you can change that with CSS.


HTML Exercises

Test Yourself With Exercises

Exercise:

Add a table row with two table headers.

The two table headers should have the value “Name” and “Age”.

Start the Exercise


HTML Table Tags

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Table Borders


HTML tables can have borders of different styles and shapes.


How To Add a Border

When you add a border to a table, you also add borders around each table cell:

To add a border, use the CSS border property on tableth, and td elements:

Example

Try it Yourself »


Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.

This will make the borders collapse into a single border:

Example

Try it Yourself »


If you set a background color of each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border:

Example

Try it Yourself »


Round Table Borders

With the border-radius property, the borders get rounded corners:

Example

Try it Yourself »


Skip the border around the table by leaving out table from the css selector:

Example

Try it Yourself »


Dotted Table Borders

With the border-style property, you can set the appereance of the border.

The following values are allowed:

  • dotted
  • dashed
  • solid
  • double
  • groove
  • ridge
  • inset
  • outset
  • none
  • hidden

Example

Try it Yourself »


Border Color

With the border-color property, you can set the color of the border.

Example

Try it Yourself »

HTML Table Sizes


HTML tables can have different sizes for each column, row or the entire table.



Use the style attribute with the width or height properties to specify the size of a table, row or column.


HTML Table Width

To set the width of a table, add the style attribute to the <table> element:

Example

Set the width of the table to 100%:

Try it Yourself »

Note: Using a percentage as the size unit for a width means how wide will this element be compared to its parent element, which in this case is the <body> element.


HTML Table Column Width

To set the size of a specific column, add the style attribute on a <th> or <td> element:

Example

Set the width of the first column to 70%:

Try it Yourself »


HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row element:

Example

Set the height of the second row to 200 pixels:

Try it Yourself »


HTML Exercises

Test Yourself With Exercises

Exercise:

Use CSS styles to make the table 300 pixels wide.

Start the Exercise

HTML Table Headers


HTML tables can have headers for each column or row, or for many columns/rows.


EMIL TOBIAS LINUS
8:00
9:00
10:00
11:00
12:00
13:00
MON TUE WED THU FRI
8:00
9:00
10:00
11:00
12:00
DECEMBER

HTML Table Headers

Table headers are defined with th elements, each th element represents a table cell.

Example

Try it Yourself »


Vertical Table Headers

To use the first column as table headers, define the first cell in each row as a th element:

Example

Try it Yourself »


Align Table Headers

By default, table headers are bold and centered:

Firstname Lastname Age
Jill Smith 50
Eve Jackson 94

To left-align the table headers, use the CSS text-align property:

Example

Try it Yourself »


Header for Multiple Columns

You can have a header that spans over two or more columns.

Name Age
Jill Smith 50
Eve Jackson 94

To do this, use the colspan attribute on the <th> element:

Example

Try it Yourself »

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.


Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings
Month Savings
January $100
February $50

To add a caption to a table, use the <caption> tag:

Example

Try it Yourself »

Note: The <caption> tag should be inserted immediately after the <table> tag.


HTML Exercises

Test Yourself With Exercises

Exercise:

Add a table caption that says “Names”.

Start the Exercise

HTML Table Padding & Spacing


HTML tables can adjust the padding inside the cells, and also the space between the cells.


With Padding
hello hello hello
hello hello hello
hello hello hello
With Spacing
hello hello hello
hello hello hello
hello hello hello

HTML Table – Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

Try it Yourself »

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottompadding-left, and padding-right properties:

Example

Try it Yourself »


HTML Table – Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

Try it Yourself »

HTML Table Padding & Spacing


HTML tables can adjust the padding inside the cells, and also the space between the cells.


With Padding
hello hello hello
hello hello hello
hello hello hello
With Spacing
hello hello hello
hello hello hello
hello hello hello

HTML Table – Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example

Try it Yourself »

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottompadding-left, and padding-right properties:

Example

Try it Yourself »


HTML Table – Cell Spacing

Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the CSS border-spacing property on the table element:

Example

Try it Yourself »

HTML Table Styling


Use CSS to make your tables look better.


HTML Table – Zebra Stripes

If you add a background color on every other table row, you will get a nice zebra stripes effect.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

To style every other table row element, use the :nth-child(even) selector like this:

Example

Try it Yourself »

Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc. instead of 2,4,6 etc.


HTML Table – Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every other row.

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20

Set the :nth-child(even) for table data elements like this:

Example

Try it Yourself »

Note: Put the :nth-child() selector on both th and td elements if you want to have the styling on both headers and regular table cells.


You can combine the styling from the two examples above and you will have stripes on every other row and every other column.

If you use a transparent color you will get an overlapping effect.

Use an rgba() color to specify the transparency of the color:

Example

Try it Yourself »


Horizontal Dividers

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

If you specify borders only at the bottom of each table row, you will have a table with horizontal dividers.

Add the border-bottom property to all tr elements to get horizontal dividers:

Example

Try it Yourself »


Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300

Example

Try it Yourself »

HTML Table Colgroup


The <colgroup> element is used to style specific columns of a table.


HTML Table Colgroup

If you want to style the two first columns of a table, use the <colgroup> and <col> elements.

MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

The <colgroup> element should be used as a container for the column specifications.

Each group are specified with a <col> element.

The span attribute specifies how many columns that gets the style.

The style attribute specifies the style to give the columns.

Note: There is a very limited selection of legal CSS properties for colgroups.

Example

Try it Yourself »

Note: The <colgroup> tag must be a child of<table> element and should be placed before any other table elements, like <thead><tr><td> etc., but after the <caption> element, if present.


Legal CSS Properties

There are only a very limited selection of CSS properties that are allowed to be used in the colgroup:

width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.


Multiple Col Elements

If you want to style more columns with different styles, use more <col> elements inside the <colgroup>:

Example

Try it Yourself »


Empty Colgroups

If you want to style columns in the middle of a table, insert a “empty” <col> element (with no styles) for the columns before:

Example

Try it Yourself »


Hide Columns

You can hide columns with the visibility: collapse property:

Example

Try it Yourself »


ArmenianEnglish