Tables show data in rows and columns. Here are some examples:

Figure 1. Sample tables

Basic tags

Let’s make this table:

Figure 2. Simple table

Here’s the code:

<table>
  <thead>
    <tr>
      <th>Course code</th>
      <th>Title</th>
      <th>When offered</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>DOG 101</td>
      <td>Introduction to the modern dog</td>
      <td>MW 9:00am - 11:00am</td>
    </tr>
    <tr>
      <td>DOG 110</td>
      <td>Dogs in the ancient world</td>
      <td>M 6:30pm - 9:30pm</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">Times subject to change.</td>
    </tr>
  </tfoot>
</table>

Figure 3. Code for a simple table

The code is divided into three sections: header (<thead>), body (<tbody>), and footer (<tfooter>).

In each section, <tr> starts a new row. Inside a row, there are cells. Each cell uses either <th> or <td>. <th> is for a heading cell. <td> is for a regular cell. The d in td stands for “data.”

Here’s the table again:

Figure 2 (again). Simple table

In the footer, the text “Times subject to change” extends across three columns. That’s done in line 23 in the code:

<td colspan="3">Times subject to change.</td>

colspan makes the <td> span across more than one column.

Styling

You can style tables. Say we want to make this:

Figure 4. Styled table

Here’s some code:

...
<style type="text/css">
#table1 {
  color: #585858;
  background-color: #FFFFEE;
  border: 2px solid #683900;
  margin: 10px;
  border-spacing: 2px;
}
#table1 td {
  border: 1px dotted #AB5500;
  padding: 2px;
}
</style>

Figure 5. Code for styled table

You can read more about table styling. You can also make a table sortable.