Defining an HTML Table

An HTML table is defined with the <table>tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the<td> tag.

Example:

<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>

Output:

HTML Table - Adding a Border

If you do not specify a border for the table, it will be displayed without borders.

HTML Example

<table border="1">

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$80</td>

  </tr>

</table>

CSS Example:

table, th, td {

    border: 1px solid black;

}

Output:

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

HTML Table - Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapseproperty:

Example

table, th, td {

  border: 1px solid black;

  border-collapse:collapse;

}

HTML Table - Adding 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 paddingproperty:

Example:

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

th {

  text-align: left;

}

HTML Table - Adding 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

table {

  border-spacing: 5px;

}

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

HTML Table - Cells that Span Many Columns

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

Example

<table style="width:100%">

  <tr>

    <th>Name</th>

    <thcolspan="2">Telephone</th>

  </tr>

  <tr>

    <td>Bill Gates</td>

    <td>55577854</td>

    <td>55577855</td>

  </tr>

</table>

Output:

HTML Table - Cells that Span Many Rows

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

Example:

<table style="width:100%">

  <tr>

    <th>Name:</th>

    <td>Bill Gates</td>

  </tr>

  <tr>

    <throwspan="2">Telephone:</th>

    <td>55577854</td>

  </tr>

  <tr>

    <td>55577855</td>

  </tr>

</table>

Output:

HTML Table - Adding a Caption

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

Example

<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>

Output:

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

A Special Style for One Table

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

Example

<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:

table#t01 {

  width: 100%; 

  background-color:#f1f1c1;

}

Output:

And add more styles:

table#t01 tr:nth-child(even) {

  background-color: #eee;

}

table#t01 tr:nth-child(odd) {

  background-color: #fff;

}

table#t01 th {

  color: white;

  background-color: black;

}