HTML Table

Example

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>

HTML Table – Adding a Border

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

A border is set using the CSS border property:

Example

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

HTML Table – Collapsed Borders

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

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

Example

th, td {
padding: 15px;
}

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

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

HTML Table – Cells that Span Many Columns

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

Example

HTML Table – Cells that Span Many Rows

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

Example

HTML Table – Adding a Caption

To add a caption to a table, use the

tag:

Example

A Special Style for One Table

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

Example

Now you can define a special style for this table:

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

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

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

Chapter Summary

1. Use the HTML <table> element to define a table
2. Use the HTML <tr> element to define a table row
3. Use the HTML <td> element to define a table data
4. Use the HTML <th> element to define a table heading
5. Use the HTML <caption> element to define a table caption
6. Use the CSS border property to define a border
7. Use the CSS border-collapse property to collapse cell
8. Use the CSS padding property to add padding to cells
9. Use the CSS text-align property to align cell text
10. Use the CSS border-spacing property to set the spacing between cells
11. Use the colspan attribute to make a cell span many columns
12. Use the rowspan attribute to make a cell span many rows
13. Use the id attribute to uniquely define one table

HTML Table Tags