This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

3.3 HTML Tables

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

Example 1: HTML table

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

Define an HTML Table

The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table header is defined with a <th> tag. Each table data/cell is defined with a <td> tag. By default, the text in <th> elements are bold and centered. By default, the text in <td> elements are regular and left-aligned.

Example 2: Basic HTML Table

A simple HTML table:

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

HTML Table - Add a Border

To add a border to a table, use the CSS border property:

Example 3: HTML table border

table, th, td {
  border: 1px solid black;
}

Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders

To let the borders collapse into one border, add the CSS border-collapse property:

Example 4: HTML border collapse

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

HTML Table - Add Cell Padding

Cell padding specifies the space between the cell content and its borders. If you do not specify a padding, the table cells will be displayed without padding. To set the padding, use the CSS padding property:

Example 5: HTML table - cellpadding

th, td {
  padding: 15px;
}

HTML Table - Left-align Headings

By default, table headings are bold and centered. To left-align the table headings, use the CSS text-align property:

Example 6: HTML Table - Left-align Headings

th {
  text-align: left;
}

HTML Table - Add Border Spacing

Border spacing specifies the space between the cells. To set the border spacing for a table, use the CSS border-spacing property:

Example 7: HTML Table - Border Spacing

table {
  border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

HTML Table - Cell that Spans Many Columns

To make a cell span more than one column, use the colspan attribute:

Example 8: HTML Table - Cell that Spans Many Columns

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Cell that Spans Many Rows

To make a cell span more than one row, use the rowspan attribute:

Example 9: HTML Table - Cell that Spans Many Rows

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

HTML Table - Add a Caption

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

Example 10: HTML table caption

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

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

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the table:

Example 11: A Special Style for One Table

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

#t01 {
  width: 100%;
  background-color: #f1f1c1;
}

And add more styles:

#t01 tr:nth-child(even) {
  background-color: #eee;
}
#t01 tr:nth-child(odd) {
  background-color: #fff;
}
#t01 th {
  color: white;
  background-color: black;
}

Chapter Summary

• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table

HTML Table Tags

The following tags may be used to define a table

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
The first four tags are compulsory for defining a table. The rest are optional.

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