In this lesson, we'll be covering HTML tables. We'll outline the basics of what tables are and how they are used. We'll also cover the HTML elements that make up the smaller pieces of tables. Then, you'll read through a walkthrough that takes you through a bit of the history of tables and how they are used to display tabular data.
Finally, the HTML tables have turned!
Or... they have their turn, you know what I mean.
Tables are made up of a few different HTML elements. The first of these is the
table tag. Much like a form, the
table tag is the container element for the table. It is the parent of all the elements that create the full composite table.
<table> < !-- Rows go here --> </table>
In it's simplest form, an HTML table contains rows. These rows are created with nested
tr tags. This gets you a row. However, to actually display data inside these rows with columns you'll have to put data cells inside the row. This is accomplished with
td tags. Here is an example:
<table> <tr> <td>First Name</td> <td>Last Name</td> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table>
This renders to...
|First Name||Last Name|
As you can see, the rows separate the different sets of data cells and create a columned layout of data. This is as barebones as tables get. HTML does offer a few more tags that can be used out of the box to give the structure of our table more meaning.
Much like the layout structure of a website, tables can have a header, body, and footer. To create these we use a few new tags inside our table called
tfoot. These semantic tags help us divide the purpose of the various sections of our table so for example the column names can be structurally labeled as headings.
Here is an example of our above table using table headers for the column names:
<table> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
Notice that the data cells in the
thead tag are switched from
td tags to
th tags. These
th tags are meant to be used only in the
thead tag to differentiate those cells from the rest of the data cells in the table.
The above table renders to:
|First Name||Last Name|
The above markup and explanation will certainly get you started working with and creating tables. Your task now is to read Shay Howe's tutorial on HTML tables and play around with some of his code examples to get a firmer grasp on the history of HTML tables and what they have to offer.
The important bits of code from this lesson
< !-- Simple table --> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </table> < !-- Table with header --> <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Jane</td> <td>Doe</td> </tr> </tbody> </table>
You should now have a much better understanding of the purpose of HTML tables and how to construct them. We took a look at how simple tables can be as well as the details of creating table headings and bodies to separate column names and data. Furthermore, you went through a walkthrough of the nuts and bolts of tables that showed you just how detailed you can get with how you set up tables to make your data display pretty.