HTML Tables

Tables in HTML are used for displaying structured data made up of rows and columns. It makes it easy to visualize the data and various relationships, such as a college schedule or a school’s time table. Building tables in HTML are very simple and that’s what we’ll cover in this chapter.

Building HTML Tables

HTML tables are enclosed by <table>...</table> tags. To create rows, we use the <tr>...</tr> tags. A cell (which shows individual data) in a table is enclosed by <td>...</td> tags. Let’s use these tags to build a simple table:

<table>
<tr>
  <td>First cell of the first row!</td>
  <td>Second cell.</td>
  <td>Third cell.</td>
  <td>Fourth cell.</td>
</tr>

<tr>
  <td>First cell of the second row!</td>
  <td>Second cell.</td>
  <td>Third cell.</td>
  <td>Fourth cell.</td>
</tr>
</table>

This looks like this:

Table Headers

We can add headers to our tables using the <th>...</th> tags. The are used to define the value the column holds to make it easier for headers. Let’s look at an example:

<table>
  <tr>
    <th>Name</th>
    <th>Designed By</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>C language</td>
    <td>Dennis Ritchie</td>
    <td>1972</td>
  </tr>
  <tr>
    <td>JavaScript</td>
    <td>Brendan Eich</td>
    <td>1995</td>
  </tr>
</table>