HTML tables can be very tricky to build in a text editor, but once you learn how to build them you'll be glad you did. Knowing how to build HTML tables from scratch is a good indication that you're an intermediate or advanced HTML author.
HTML tables require only three tags to build:
This is the outermost tag in a table. All table tags are contained inside the
<table>start tag and
HTML tables are made up of rows and columns. The
TRelement defines a table row. Every time a
<tr>tag appears, a new table row is defined.
Finally there are the table cells (or table data). The
<td>tag defines the beginning of a new column in the table. This is where you write the contents of the table cells.
The best way to start is to think about tables as being a group of cells in a row, and a group of rows in a table. If you visualize your content displayed in a spreadsheet, each cell of the spreadsheet is a
TD element, each row is a
TR with multiple
TD elements, and the entire table is the
TABLE element with multiple
TR elements inside.
First create the table:
Be sure to include both the start tag
<table> and end tag
</table> so that your HTML is valid and it works in all browsers.
TABLE element, create your first table row using the
HTML5 and HTML 4.01 do not require a closing
</tr> tag in most situations, but you can include it if you like. If you are going to write XHTML, then you must include the closing tag.
Then create the cells in that table row using the
TD element. In my example, I'll add three table cells:
Just like the
TR element, HTML5 and HTML 4.01 do not require a closing
</td> tag, but you should include it if you are writing XHTML.
The last thing you do is include your content within the cells.
To expand your table, add more rows. Be sure to include the same number of columns in each row that you add.
Here is an example of a simple one row table.
More Advanced Tables
There are also a few other elements (and two attributes) that can be useful in building HTML tables:
This element creates table header cells. Use it the same way you use
TDelements, only for header cells.
This element defines the rows of the table that are part of the head of the table.
This element defines the rows of the table that are part of the foot of the table.
This element defines the rows of the table that are part of the body of the table.
The first type of row you should add is a row of header cells with the
TH element. You add headers the same way you add table cells.
Just like the
TD element, the closing
</th> tag is not required unless you are writing XHTML.
You can see an example of the same simple table with a header row.
If you want to make the first column your headers, you need to make the first cell in every row a
TH element. There is no easier way to do this. Here is an example of first column headers.
TBODY define areas of the table as the head, foot, and body. They are mostly used with CSS to style specific areas. But most browsers will automatically put the rows in the
THEAD at the top of the table, and the rows in the
TFOOT at the bottom.
<th>Col 1 Header</th>
<th>Col 2 Header</th>
<th>Col 3 Header</th>
<td>Col 1 Footer</td>
<td>Col 2 Footer</td>
<td>Col 3 Footer</td>
Here is an example of a table with
TBODY. Note that the
TFOOT is the second written row, but is displayed at the bottom of the table.
The last two things you should know about when building a table are the
rowspan attributes. These allow you to create cells that are larger than one column or row. The value of these attributes is the number of columns or rows you want the current cell to span.
If you want a cell to span two columns, you write
colspan="2". You then remove one of the original columns in that row. For example, to change a three column row to have one cell spanning two columns you change this row:
To look like this row:
<td colspan="2">Column 1</td>
Here is an example of a table with a
colspan on a cell.
You use the
rowspan attribute in the same way. Only instead of replacing cells in the same row, you need to remove cells below the row with the rowspan element. For example:
<td rowspan="2">Column 1</td>
And here is an example of a table with the