HTML: Tables

HTML separates fields with things called Tables. Made up of rows and columns, tables can be pretty confusing if you don't understand their basic structure.

Table Rows are the horizontal areas of a table, that look like this:

This is one table row.

Columns separate rows into separate vertical areas, like this:

This is one row

with three

separate columns

Got it? Now let's move on to how to create a table.

Tables are built in the same way that you format text, add a link, etc. With those funny brackets and slashes. Let's look at the source code for the three-columned table above.

<TABLE  border="2" cellpadding="2" width="100">
<TR>
<TD>This is one row</TD>
<TD>with three</TD>
<TD>separate columns</TD>
</TR>
</TABLE>

To begin the table, you must first enter the <TABLE> tag. Within that tag, you enter specific information about the size of the table, whether it has borders or not, etc. Let's say we want a table without those big chunky borders, like the table that's holding this very content. Then the table tag would look like this:

<TABLE border="0" cellspacing="2" width="100%">

Cellspacing determines how much space is left between the walls of the table and the content within it. Notice what happens when I take that tag out of the table source:

This is one row

with three

separate columns

As you can see, the text is as close to the walls of the table as possible. Therefore, when making text tables, add at least a cellspacing="2" allowance. Anything beyond 4, however, is a little silly.

Tables, and Rows, and Columns, Oh my!

To create rows and columns within a table, you'll need <TR> and <TD> tags. Let's start with rows.

<TR> stands for rows. The rows contain columns, therefore a code will always look like this:
<TR>
<TD>Columns</TD>
</TR>

and not this:

<TD>
<TR></TR>
</TD>

Always remember, rows go first, then columns.
You can assign certain perameters to rows, for example how high they are. More details on that later.

Columns

Columns are represented by the <TD> tag. Again, this will always be inside a row, the rows and columns will always be inside the table tag.

Columns can have width, height, and background information entered within the <TD> tag. For instance, to align everything to the center of the column, you would type <TD ALIGN=CENTER>, all inside that first opening column tag.

To enter content into columns, simply type any other tags or plain text in between the opening and closing tags (<TD>Content goes in here</TD>). Nest tags appropriately in between those tags for added effect, for example, the font formatting tags you've already learned. (<TD><FONT COLOR="#7324A1">Content goes in here</FONT></TD> )

Nesting Tables

Just like Russian nesting dolls, you can nest tables inside of other tables. You can put tables within table rows or columns, to add more cellspace, to better organize information, etc. For example, the menu on the left of this site. You're actually looking at two tables at once, one inside the other. The first table was used for the purple shadow, the second, for the menu itself. To do that, simply repeat table tags within the the table column tags. For instance the following tags:

<TABLE width="100%" border="2" bordercolor="#000000">
<TR>
<TD><TABLE width="90" border="2" bordercolor="#000000" ALIGN="center">
<TR>
<TD>This is the inside table</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

Those will turn out looking like this:

This is the inside table

For additional information about nifty tricks you can add to change tables, rows, and columns, check out NCDesign.org's HTML guide to table tags.