Building tables by hand? Pretty difficult. Creating tables with HTML? Easy peasy.
First, create a new HTML file called tables.html and save it in your webdev folder. Within the <body> of that file, start your table with the—you guessed it—<table> tag. Chances are, Visual Studio Code will finish writing the table tag (</table) for you.
Between your table tags, it’s time to add rows, denoted by <tr> (table rows). Each cell in the table is written using a <td> (table data) tag.
Type the following into your file:
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C3</td>
<td>D4</td>
</tr>
</table> Preview your file by saving it and opening it in Chrome.
Table heading
Wouldn’t this table look better with a table heading? The <th> element stands for table heading. The <th> element is incredibly important, for a variety of reasons. It can be used to represent an empty cell (notice the first cell in the example). It also helps make your tables more accessible—both a legal and ethical requirement of websites.
Often, you see the table heading (<th>) tag used with the scope. Scope specifies whether the heading is for a column or row. See the following example of scope in use:
<table>
<tr>
<th></th>
<th scope="col">FCC Lessons Completed</th>
</tr>
<tr>
<th scope="col">Week 1:</th>
<td>14</td>
</tr>
<th scope="col">Week 2:</th>
<td>14</td>
</table> Try it out!
Your turn!
A) Try to add Week 3, Week 4, and Week 5 to the table, keeping the same formatting.
B) Practice creating your HTML table. Your table can display any information you’d like—fictional or real. Get creative and gain some familiarity with making an HTML table on your own.
When you’re done, save your file and open it in Chrome to check it out. No need to upload it to the server unless you want the practice!