How To Add Tables In HTML

Another way to keep your website looking neat and orderly is through the use of a table.

Do not use a table to layout your website. Search engines hate it and it is generally a bad idea. Just… don’t. See our CSS tutorial, instead.

This is definitely the most complicated part of this tutorial, however, learning it will certainly pay off in the long-run.

With this in mind, tables can still be a useful way to present content on your page.

What Does a Table Consist Of?

When drawing a table we must open an element with the <table> opening tag. Inside this tag, we structure the table using the table rows, <tr>, and cells, <td>.

An example of an HTML table is as follows:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Colunm 2 </td>
<td>Row 1 - Column 3 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
<td>Row 2 - Column 3</td>
</tr>
</table>

This will produce a 2-row table with 3 cells in each row.

Tables can get quite complicated, so be sure to check out our special HTML tables tutorial.

Table Tags

However, watch out for these tags so that you can recognize them and use them as your skills develop.

Here are the tables tags presented in a table – pun totally intended.

Table Tag	Meaning	Location
<thead>	Table Head	Top of the table
<tbody>	Table Body	Content of the table
<tfoot>	Table Foot	Bottom of the table
<colgroup>	Column Group	Within the table
<th>	Table Header	Data cell for the table header

Tables, borders, spacing are usually styled using CSS but we will cover this in a later tutorial.

Let’s Make a Table

Go to a new line on the index.html page within your text editor. Enter the following HTML code:

<table>
<tr>
<td>Row 1 - Column 1</td>
<td>Row 1 - Column 2 </td>
</tr>
<tr>
<td>Row 2 - Column 1</td>
<td>Row 2 - Column 2</td>
</tr>
</table>

Hit save and preview it in your browser.

Congratulations: You did it!