HTML Tables Tutorial

This page will give you an overview of tables and show example table layouts. Tables can be as large or small as you want them. This web page, for example, is laid out using tables.

What Are HTML Tables?

You might consider a table as an advanced layout technique, at least compared to basic HTML. A table allows you to arrange your page into a grid of columns and rows for more precise placement control over your content. Some important things to know about tables:

A table is layout mechanism to arrange content into vertical columns and horizontal rows. These rows and columns do not have to be visible, nor do they have to be equal in size.
Each block of space within a table is called a table data cell. (See diagrams below.)
You can put anything into a table data cell that you can put on a web page.
The size of a table and the size of the table's cells expand automatically to fit the data you put into it if you don't set the size in your code. You can code the exact height and width in pixels, or height and width expressed in a percentage of available space. The width will remain fixed unless you place content, such as an image, into a cell that is set smaller than the image width. The height will always be forced larger if the content doesn't fit into the table data cell.
Tables can have background colors or background images, border colors and more.
An empty table cell, that is, a cell with no content, will collapse. You can keep an empty table cell open by placing a   (No Break SPace) tag inside the cell, or placing a transparent gif image in it.
For multiple row and column tables, make your numbers add up or you'll run into trouble. If you have one table data cell that's 400 pixels wide, another in the same row that's 300 pixels, and your table is set to 600 (instead of 700) something will give and you will lose the layout control would normally have.
If you forget to close a table some browsers will show a blank page from the start of the table to the end of the page. Older versions of Netscape were relentlessly unforgiving of coding errors, but so can all modern browsers be depending on the DOCTYPE you use, if you use one.

Table Tags and Definitions

For the simplest, single cell table, you'd only need these basic tags:

<table>
<tr>
<td>

Your content goes here.

</td>
</tr>
</table>

Of course, using a table that way wouldn't give you any more layout control than you have with basic HTML because it only utilized one row and one column, which is what a basic web page is anyway. There are sample table layouts farther down the page that will give you a better idea of how some web pages are laid out using tables, and other tags and tag attributes that help you control the table.

Immediatly below you'll find a chart of the most commonly used table tags and attributes. For a more complete list of all the tags available refer to my Table Attributes Chart.

Note: If you need help in understanding how this chart works, see the Chart Explanation that follows.

Tag	Tag attribute	Function
<table>		Starts a table.
	border="..."	The size of the table border. Values can be from 0 (zero, for no border) and up.
	cellspacing="..."	The amount of space between the cells of a table.
	cellpadding="..."	The amount of space between the inner edges of a cell and its content.
	width="..."	Sets the width of the table.
<tr>		Establishes a table row. Each table must have at least one row. Always cancel one row before starting the next.
	align="..."	Horizontal alignment of a cell's content for all cells in the row. Values are left, right, and center.
	valign="..."	Vertical alignment of a cell's content for all cells in the row. Values are top, middle, bottom, and baseline.
<td>		Establishes a table data cell. Your content goes in the TD cells. Each table row must have at least one TD cell. Always close one TD cell before starting the next.
	width="..."	Sets the width of this column of cells, in pixels or as a percentage of table width.
	align="..."	Horizontal alignment of the cell's content. Values are left, right, and center.
	valign="..."	Vertical alignment of the cell's content. Values are top, middle, bottom, and baseline.
</td>		Closes a table data cell.
</tr>		Closes a table row.
</table>		Closes a table.

Chart Explanation

The column labeled Tag lists the most basic table tags. The column labeled Tag Attribute lists the attributes that may be used with the corresponding tag from the Tag column. The column labeled Function lists what the attribute modifies for the corresponding tag or attribute, depending which it is horizontally aligned with, and it also lists the possible values for the attribute.

To use an attribute and value to modify a tag, just put them together. Here's an example from the top of the chart:

<table border="1">

I used the table tag, added the border attribute to it, and gave it a value of one pixel. The table tag was in the first column, the border attribute was in the second column, and the value was in the third column. Easy as one, two, three!

Sample Table Layouts

In the members area I have a couple dozen table samples with copy and paste code. The tables below, while visually smaller than a real page layout, will give you an idea of how some web pages are laid out using tables. There are hundreds of ways to design your table grid, this barely touches the surface.

For many design styles, there are also tables within tables. When laying out complicated tables it's smart to use borders until you have the design you want, even if you're not planning on using borders in the final design. Complicated tables can get messed up very easily, even for an expert. Using the border will help you visualize it and troubleshoot layout problems. Once your table design is perfected, you can go back and remove the borders.

Notice Table 1 below. The first table cell spans two rows. Cells can span multiple rows by using the rowspan="..." attribute and value. Table 2 below shows the first cell spanning two columns. Cells span multiple columns by using the colspan="..." attribute and value. The table tutorials in the members area goes into much more depth and there are many sample tables with the code provided. The members area also has a free software program you can download that will generate basic table code for you, along with better reference charts (over 30 reference charts in all).

Table 1

Cell 1 Row 1 & 2 Column 1	Cell 2 Row 1 Col. 2
	Cell 3 Row 2 Col. 2

Table 2

Cell 1, Row 1 Column 2 & 3
Cell 2 Row 2 Col. 1	Cell 3 Row 2 Column 2

Table 3

Cell 1
Row 1
Col. 1

Cell 2
Row 1
Column 2

Used for left
border style
backgrounds.

Here's the link again for the Table Attributes Chart.

Back | Web Design Tutorials Index

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]