How to create HTML Tables

Tables were introduced to HTML as a way to make textual data look more presentable on the screen. Things like statistics could be presented in neat rows and columns, making them easier to read.

Tables can also be used for web pages layouts, but the practice is now frowned upon. Some people even have a pathological hatred for layouts using tables. Don't let this put you off, however. Using tables for layouts can actually be easier than using CSS! We won't be using tables for web page layouts, though, but simply to present tabular data.

First, we'll create a basic HTML table. This will work in all versions of HTML, and not just version 5. Here's the basic table we'll design.



The table presents information about each browser's support for CSS version 3. From the table, it's easy to see that CSS animations only work in Chrome and Safari (the latest browser versions here are Firefox 10 and greater, Internet Explorer 9, Chrome 10, Safari 5, and Opera 11.1).

We'll create another table later that uses HTML5 and CSS3.

 

The Table Tags

To create a table you need to use the following basic table tags: TABLE, TR, TD. They are laid out like this:

<TABLE>
<TR>
<TD></TD>
</TR>
</TABLE>

The table tags come in pairs. To set up the table, the TABLE tag is used. There is a start tag and end tag. In between these two tags are the table Row tags <TR> </TR>. For every Row in your table, you need at least one Table Data tag <TD> </TD>. The Table Data tags represent the cells in each row. In the example picture above, we have a table with four rows. In each row we have a CSS property followed by 5 cells for browser information. So each Row in our table has six Cells in it. For one individual Row, the code would look like this:

<TABLE>
<TR>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
<TD></TD>
</TR>
</TABLE>

That code means set up a table with one Row, and put six cells into the Row.

The information you want people to see goes between the two TD tags:

<TABLE>
<TR>
<TD>Cell 1 Data</TD>
<TD>Cell 2 Data</TD>
<TD>Cell 3 Data</TD>
<TD>Cell 4 Data</TD>
<TD>Cell 5 Data</TD>
<TD>Cell 6 Data</TD>
</TR>
</TABLE>

You can also add an optional CAPTION tag, after the pair of TABLE tags:

<CAPTION>CSS3 Browser Support (latest browser versions)</CAPTION>