How To Add Tables In HTML

How To Add Tables In HTML

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 TagMeaningLocation
<thead> Table HeadTop of the table
<tbody>Table BodyContent of the table
<tfoot>Table FootBottom of the table
<colgroup>Column GroupWithin the table
<th>Table HeaderData 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!

Share this post

Comment (1)

Leave a Reply

Your email address will not be published. Required fields are marked *