Tables in HTML

A Very Simple HTML Table

<table border="1" id="simple">
  <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
  <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
</table>

Looks like:

A Very Simple HTML Table with a Header (<thead>)

The first element is a <thead> row containing ordinary cells:

<table border="1" id="simple_with_header">
  <thead> <tr> <th>col 1</th> <th>col 2</th> </tr> </thead>
          <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
          <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
</table>

which will look like:

A Very Simple HTML Table with a Header (<thead>) and, additionally, Header Cells (<th>)

The first element is a <thead> row containing header cells:

<table border="1" id="simple_with_header_and_th">
  <thead> <tr> <th>col 1</th> <th>col 2</th> </tr> </thead>
          <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
          <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
</table>

which will look like this:

A More Complex HTML Table with <thead> and <tbody> Components

<table border="1" id="with_thead_and_tbody">
  <thead> <tr> <th>col 1</th> <th>col 2</th> </tr> </thead>
  <tbody> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr>
          <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr>
  </tbody>
</table>

and produces:

A Quite Rich HTML Table with <caption>, <thead>, <tbody>, and <tfoot>

<table id="fuller">
  <caption>Table: My favorite records.</caption>
  <colgroup> <col id='album' /> <col id='artist' /> <col id='released' /> </colgroup>
  <thead>
  <tr> <th> album </th> <th> artist </th> <th> released </th> </tr>
  </thead>
  <tbody>
    <tr> <td> Rubber Soul </td> <td> The Beatles </td> <td> 1965 </td> </tr>
    <tr> <td> Brown Eyed Girl </td> <td> Van Morrison </td> <td> 1967 </td> </tr>
    <tr> <td> Queen II </td> <td> Queen </td> <td> 1974 </td> </tr>
    <tr> <td> Mellon Collie and the Infinite Sadness</td>
         <td> The Smashing Pumpkins </td> <td> 1995 </td>
    </tr>
  </tbody>
  <tfoot>
    <tr> <td> album</td> <td> artist</td> <td> released</td> </tr>
  </tfoot>
</table>

which produces:

Table Borders with border

To add a border, use the CSS border property on table, th, and td elements.

Example:

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

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

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

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:

table, th, td {
  border: 1px solid white;
  border-collapse: collapse;
}
th, td {
  background-color: #96D4D4;
}

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

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

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

th, td {
  border: 1px solid black;
  border-radius: 10px;
}

colgroup

If you want to style the first n columns of a table, use the <colgroup> and <col> elements. You can style multiple columns with different styles, use more than one <col> element inside the <colgroup> And if you want to style columns in the middle of a table, insert an empty <col> element (with no styles) for the columns before.

The <colgroup> element should be used as a container for the column specifications. Each group is specified with a <col> element. The span attribute specifies how many columns get 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.

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

An Example:

<table>
  <colgroup>
    <col span="1" style="background-color: lightyellow"></col>
    <col span="4" ></col>
    <col span="2" style="background-color:   lightblue"></col>
  </colgroup>
  <tr>
    <th>MON</th>
    <th>TUE</th>
    <th>WED</th>
    <th>THU</th>
    <th>FRI</th>
    <th>SAT</th>
    <th>SUN</th>
  </tr>
</table>

which should show as: