HTML Tables and the TABLE tags

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.
(NOTE: Our entire Home and Learn website uses tables for layout. This is because it was started in 2002. We could, of course, change to CSS layouts, but as it is such a big site it would take many months of work and costs a fortune. And very few people would notice the difference!)
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.

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

Table Attributes

The TABLE tag comes with optional attributes you can use:

Align
Border
Bgcolor
Cellpadding
Cellspacing
Height
Width

(There's also Frame, Rules, and Summary, but we won't be discussing these.)
The table from our image had a border of 1 pixel. The cellpadding was 10 and the cellspacing was 2. We also centre-aligned our table. The TABLE tag code was, therefore, this:

We didn't specify a width, as the default is the length of your text plus any borders, padding and spacing. The default colour is none. Like all colours, though, it can take a value like "Red", or a HEX/RGB colour.
Cellpadding, incidentally, is the space between the text and the cell borders; cellspacing is how far apart each cell is from its neighbour.

Row Height and Row Width

You can make changes to the Height and Width of not only the entire table, but to each individual cell, or row of cells. Just add Width and Height attributes to the TR or TD cell. Like this:
<TABLE>
<TR Height = 50 Width = 100>
<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 add the Height and Width attributes to individual TD cells, too, but the results are often erratic. If you want one big cell next to smaller cells, the ROWSPAN and COLSPAN tags are used.

The ROWSPAN and COLSPAN Attributes

Suppose you wanted a table like this one:

An HTML table showing example of COLSPAN

Here, the two cells at the top stretch across the two cells below it. For a complex table of different cell size like this, you can use ROWSPAN and COLSPAN. This can get quite complex. But remember that Columns go down, and Rows go across. To have one big cell stretch horizontally across two smaller cells, the code would be this:
<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
</TR>
The attribute COLSPAN has the value of two because one TD cell is going to stretch across two columns. We have 4 columns in our table above, so the first TD tag will span two columns, and so will the second one.
If we add some of the other table tags, you might get a better idea of what's going on.

<CAPTION><B>Football Scores</B></CAPTION>

<TR>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
</TR>
<TR >
<TD>Arsenal</TD>
<TD>2</TD>
<TD>Leeds</TD>
<TD>1</TD>
</TR>
If we wanted one big cell to stretch over all our rows, running down the left side, we would use ROWSPAN. The code would be this (the <BR> tag gets you a blank cell):
<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>
And this would be the effect:

An HTML table showing example of ROWSPAN

You might have noticed that although the code was this:
<TR>
<TD ROWSPAN = 6><BR></TD>
</TR>
The number of rows in the table was actually only five. So why set the ROWSPAN to 6? Well, it's because we had 5 sets of TR tags in our table, plus the one TR tag we added for the ROWSPAN making 6 in total. The code for the whole table above looks like this:

An HTML table showing example of ROWSPAN and COLSPAN

There's no doubt about it, though - setting up a complex table with cells spanning across other cells can be a tricky business when you're coding by hand!

HTML tables: cell alignment, colours, images

Aligning contents in a cell

You can align the contents in a cell, so they look more presentable. To align a cells contents, the ALIGN attribute is used in the TD part of the tag. To centre-align our headings, the code would be this:
<TR>
<TD align="center">CSS Property</TD>
<TD align="center">Internet Explorer</TD>
<TD align="center">FireFox</TD>
<TD align="center"> Chrome</TD>
<TD align="center">Safari</TD>
<TD align="center">Opera</TD>
</TR>
The other two Horizontal alignment options are "Left" and "Right".
Alignment can also be vertical. You use the VALIGN tag for vertical alignment. The positions for vertical alignment are: TOP, MIDDLE and BOTTOM.

You can combine horizontal and vertical alignment to give nine positions in all:

In a browser, here's what a table of all nine positions would do to text:

Changing the Background Colour of Tables and Cells

Individual cells can have their background colour changed. The background colour of the entire table can be changed, too. To change the colour of the entire table, just add the BGCOLOR tag to the TABLE tag. Like this:

You can add a splash of colour to individual cells. The BGCOLOR attribute is just added to the TD tag whose colour you want to change. Like this:

<TD Bgcolor= "Yellow">Safari</TD>

Using Images in Tables

Images can be used in tables, either as the background image of the table, or in individual cells.

Note that the attribute is BACKGROUND. After an equal sign you type the name of the image you want to use.

HTML5 Tables

With HTML5, tables got a bit of a makeover in terms of structure. Take a look at the following code:

If you want to play around with the code, open up the file called table_html5.html which is in theextra_files/tables folder that came with this course. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)
The table data itself is the same as the previous one. But notice the new table tags we've used:

THEAD
TFOOT
TBODY

THEAD is where you put the data for the first row of your table. You then add the TR and TD tags. Bizarrely, the TFOOT tags come after THEAD and before TBODY. If you put the TFOOT tags after TBODY your table may not work in some browsers.
The TFOOT has no TR tags, just a TD. We've added a COLSPAN attribute here, as CSS doesn't do column or row spanning very well, or at all.
The TBODY tags contain most of the TR and TD tags.
If you have a look at the TABLE tag at the top you'll see that it no longer has any attributes. It's just this:

<TABLE>

Previously, we had this:

These were all formatting attributes we added to the TABLE tag. Now, we can do this with CSS.
Open up the file called html5_tables.css which is in the extra_files/css folder. Take a look at the CSS code:

With the new structure of our table, we can use the HTML selectors (TABLE, THEAD, TFOOT, etc). The TABLE selector is used to set up the border, the border spacing, background colour, text alignment, and font family. This allows us to get rid of all those attributes from the previous table.
Notice, too, that we have separate THEAD and TD selectors, and a joint one: THEAD, TD. We could have put the padding in the TABLE selector, but we've done it like this just to show you that you can set up rules for more than one HTML tag on the same line. Separate each one with a comma.
The only class selector is at the bottom, LeftCol. This is applied to only those cells that need to be left aligned and made bold.

Exercise
Play around with the CSS and see what happens to the table when you reload it.

HTML and HTML5 Tables

HTML and HTML5 Table tags	Explanation
TABLE	Create a table
TR	Create a row in a table
TD	Create a cell in a table
THEAD	HTML5 Table header
TFOOT	HTML5 Table footer
TBODY	HTML5 Table body

HTML Table Attributes

TABLE Attributes	Options
Align	Left, Right, Center
Valign	Top, Middle, Bottom
Background	The location of an image
Border	A number for the border width
Bgcolor	A background colour for the table
Cellpadding	A number that sets the space inside a table cell
Cellspacing	A number that sets the space between table cells
Height	The height of a table or cell
Colspan	The number of columns you want to span
Rowspan	The number of rows you want to span
Width	The width of a table or cell

Developers Study Center

Search This Blog

HTML Section 7: HTML 4 and HTML 5 tables