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:

First cell of the first row! Second cell. Third cell. Fourth cell.
First cell of the second row! Second cell. Third cell. Fourth cell.

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>
Name Designed By Year
C language Dennis Ritchie 1972
JavaScript Brendan Eich 1995

Licenses and Attributions


Speak Your Mind