HTML Tables

HTML tables allow web developers to arrange data into rows and columns.

Example

Date	Day	Subject
08.05.21	Friday	Mathematics
11.05.21	Monday	Englis
12.05.21	Tuseday	Science
13.05.21	Wednesday	History
14.05.21	Thursday	Computer Science

Table Cells

Each table cell is defined by a <td> and a </td> tag.

note

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example

<table>
  <tr>
    <td>08.05.21</td>
    <td>Friday</td>
    <td>Mathematics</td>
  </tr>
</table>

note

Table data elements are the data containers of the table. They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

Table Rows

Each table row starts with a <tr> and end with a </tr> tag.

note

tr stands for table row.

Example

<table>
  <tr>
    <td>08.05.21</td>
    <td>Friday</td>
    <td>Mathematics</td>
  </tr>
  <tr>
    <td>11.05.21</td>
    <td>Monday</td>
    <td>Englis</td>
  </tr>
</table>

You can have as many rows as you like in a table, just make sure that the number of cells are the same in each row.

note

There are times where a row can have less or more cells than another. You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be headers, in those cases use the <th> tag instead of the <td> tag:

Example

<table>
  <tr>
    <th>Date</th>
    <th>Day</th>
    <th>Subject</th>
  </tr>
</table>

Try it Yourself

Loading...