1. Technology

Learn HTML Tables

Facts and Information About HTML Tables


HTML Table Basics

The first thing you should learn when studying HTML tables are the basic tags for building tables: TABLE, TR, TD, and 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 COL and COLGROUP elements let you group columns similarly to how you group rows with the THEAD, TFOOT, and 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.

Table Attributes are Important Too

There is only one HTML5 attribute of the TABLE attribute: 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="" or border="1"), then you are indicating that the table is for tabular data. If you use the attribute with the non-conforming value of 0 i.e. 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 TH and TD elements, there are two useful attributes: colspan and 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.

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.

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.

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.

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

©2014 About.com. All rights reserved.