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.
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.
|<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!