HTML Table Basics
The first thing you should learn when studying HTML tables are the basic tags for building tables:
TH. These four elements can build almost any type of table you can imagine.
There are also three tags that define the rows of the table semantically:
THEAD defines rows in the head of the table,
TBODY defines rows in the main part of the table, and
TFOOT defines rows that are part of the table footer. These elements are not required for building HTML tables, but they give you more ways to style the tables, and some browsers will use them for printing to put headers and footers on every page of a multi-page table.
There are also three other table tags to add more information about your table for browsers to display them better. The
CAPTION element lets you give your tables a title. And the
COLGROUP elements let you group columns similarly to how you group rows with the
TBODY elements. They are somewhat trickier to use as you don't surround your columns with them the way you do the row grouping elements.
Build Your First Table
Building a table is mostly just a matter of putting the above elements together to create it. The following articles take you step-by-step through building an HTML table.
- Learn How to Build an HTML Table
- How to Build a 2x2 Table in HTML
- HTML Tables Tutorial
- HTML Tables FAQ
Table Attributes are Important Too
There is only one HTML5 attribute of the
border. This attribute was kept in HTML5 as it is a way to differentiate tables used for layout and tables used for tabular data. If you use the attribute as written in the HTML specification (either
border="1"), then you are indicating that the table is for tabular data. If you use the attribute with the non-conforming value of
border="0", then you are telling the browser that the table is for layout.
But there are other attributes you should be aware of. On the
TD elements, there are two useful attributes:
rowspan. These attributes help you change the appearance of your HTML tables by creating cells that can span several columns or rows (or both).
Styling HTML Tables
HTML tables can be pretty boring all by themselves, but you can use CSS to dress them up and make them really fancy.
- Simple Table Styles
- How do you change the background color of a table?
- How do I set an image as a background for a table?
- Simple Way to Center a Table Using CSS
- Don’t Rely on Web Browsers to Style Your TH Tags
- How to Center Text in a Table Cell
- How to Add Internal Lines in a Table
How to Use HTML Tables
The best way to use HTML tables is to format tabular data so that it looks nice on your web page.
- Using Tables - Layout Tables, Jigsaw Images, Decorating Web Pages
- Tables for Tabular Data - What is Tabular Data?
But some uses are not recommended. For example, while HTML5 now allows tables for layout, the specification doesn't recommend using tables in that way. In fact, the specification reads:
Tables should not be used as layout aids.
Tables for layout are not as accessible for screen readers as CSS layouts.
You can also nest tables one inside another, but this isn't a good idea because the more nested tables your page has, the slower it will load. You can also use them to arrange images like a jigsaw puzzle, but like nested tables and layout tables, this isn't a good idea because it slows down your page and is less accessible.
- How do you use a table to line up images like a "jigsaw" puzzle?
- How can I include one table inside another?
- Don’t Use Nested Tables
- Using Tables to Do Page Layout
- Why You Should Avoid Tables for Web Page Layout
Testing Your HTML Tables
Like everything else in web design, you should always test your tables in as many browsers as possible, so you know that they look as you intended them to look. Some older browsers were very picky about how tables were rendered, and would blank out entire pages if a table was missing an end tag. Luckily modern browsers are not nearly that strict, but it's still a good idea to test your tables.
- Testing HTML Tables Makes for Better HTML Tables
- Turn on the Borders When Testing Tables
- Why do my empty cells disappear in Netscape?
A Sample HTML Table
|Heading Column 1||Heading Column 2||Heading Column 3|
|Column 1 Row 2||Column 2 Row 2||Column 3 Row 2|
|And this cell spans all three columns|