HTML Section 7: HTML 4 and HTML 5 tables

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.
A basic HTML 4 table
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:
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:
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:
<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>
You can also add an optional CAPTION tag, after the pair of TABLE tags:
<CAPTION>CSS3 Browser Support (latest browser versions)</CAPTION>

Table Attributes

The TABLE tag comes with optional attributes you can use:
(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:
<TABLE Border = "1" CellPadding = "10" CellSpacing = "2" Align="center">
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:
<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>
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:
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></TD>
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>
<TD COLSPAN = 2>Home Team</TD>
<TD COLSPAN = 2>Away Team<BR></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):
And this would be the effect:
An HTML table showing example of ROWSPAN
You might have noticed that although the code was this:
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:
<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>
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.
<TD VALIGN = Middle>
<TD VALIGN = Bottom>
You can combine horizontal and vertical alignment to give nine positions in all:
<TD VALIGN = Top Align = Left>
<TD VALIGN = Top Align = Center>
<TD VALIGN = Top Align = Right>
<TD VALIGN = Middle Align = Left>
<TD VALIGN = Middle Align = Center>
<TD VALIGN = Middle Align = Right>
<TD VALIGN = Bottom Align = Left>
<TD VALIGN = Bottom Align = Center>
<TD VALIGN = Bottom Align = Right>
In a browser, here's what a table of all nine positions would do to text:
HTML table cell alignment positions

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:
<TABLE Bgcolor = "Blue">
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.
<TABLE Background = "image_name.jpg">
<TD Background = "image_name.jpg">
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:
Code for a table in HTML 5
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 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:
Previously, we had this:
<TABLE Border = "1" CellPadding = "10" CellSpacing = "2" align="center">
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:
CSS for a table in HTML 5
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.

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

HTML and HTML5 Tables

HTML and HTML5 Table tagsExplanation
TABLECreate a table
TRCreate a row in a table
TDCreate a cell in a table
THEADHTML5 Table header
TFOOTHTML5 Table footer
TBODYHTML5 Table body

HTML Table Attributes

   TABLE Attributes   Options
AlignLeft, Right, Center
ValignTop, Middle, Bottom
BackgroundThe location of an image
BorderA number for the border width
BgcolorA background colour for the table
CellpaddingA number that sets the space inside a table cell
CellspacingA number that sets the space between table cells
HeightThe height of a table or cell
ColspanThe number of columns you want to span
RowspanThe number of rows you want to span
WidthThe width of a table or cell