HTML - The Basics

Tables

Tables are useful in segregating areas of space in the browser to display things in column, rows, or cells. The basic tags are the table tag, <TABLE></TABLE>, the table row tag<TR></TR>, the table data tag <TD></TD>, and table header tag<TH></TH>. The latter two are always nested within the table row tag, and the table row and other tags are enclosed by the table tags. Note that all these comes in pairs. Placing the closing tag is always important, and can cause odd results if you fail to be alert.

The basic table is shown as follows:

<TABLE>
<TR>
<TH>Table Header 1</TH><TH>Table Header 2</TH>
</TR>
<TR>
<TD>Table Data 1</TD><TD>Table Data 2</TD>
</TR>
</TABLE>
Table Header 1Table Header 2
Table Data 1Table Data 2

This may not be very intuitive, so most web designer make the frame of the table appear by placing BORDER=1 within the TABLE tag.

<TABLE BORDER=1>
<TR>
<TH>Table Header 1</TH><TH>Table Header 2</TH>
</TR>
<TR>
<TD>Table Data 1</TD><TD>Table Data 2</TD>
</TR>
</TABLE>
Table Header 1Table Header 2
Table Data 1Table Data 2

The table can also be changed, by adding colour into the cells or by padding and spacing the cells.

<TABLE BORDER=1 CELLPADDING=10 CELLSPACING=20 BGCOLOR="#FFFFFF">
<TR>
<TH>Table Header 1</TH><TH>Table Header 2</TH>
</TR>
<TR>
<TD>Table Data 1</TD><TD>Table Data 2</TD>
</TR>
</TABLE>
Table Header 1Table Header 2
Table Data 1Table Data 2

More complex tables can be obtained by making some cells run over many columns, or several rows. We'll have a look at a simple table of a size 4 rows by 3 columns.

<TABLE BORDER=1>
<TR>
<TD>Row 1 Col 1</TD>
<TD>Row 1 Col 2</TD>
<TD>Row 1 Col 3</TD>
</TR>
<TR>
<TD>Row 2 Col 1</TD>
<TD>Row 2 Col 2</TD>
<TD>Row 2 Col 3</TD>
</TR>
<TR>
<TD>Row 3 Col 1</TD>
<TD>Row 3 Col 2</TD>
<TD>Row 3 Col 3</TD>
</TR>
<TR>
<TD>Row 4 Col 1</TD>
<TD>Row 4 Col 2</TD>
<TD>Row 4 Col 3</TD>
</TR>
</TABLE>
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3
Row 3 Col 1 Row 3 Col 2 Row 3 Col 3
Row 4 Col 1 Row 4 Col 2 Row 4 Col 3

Now we make the cells merge with one another.

<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>Row 1 Col 1+2</TD>
<TD>Row 1 Col 3</TD>
</TR>
<TR>
<TD ROWSPAN=2>Row 2+3 Col 1</TD>
<TD>Row 2 Col 2</TD>
<TD>Row 2 Col 3</TD>
</TR>
<TR>
<TD COLSPAN=2>Row 3 Col 2+3</TD>
</TR>
<TR>
<TD>Row 4 Col 1</TD>
<TD>Row 4 Col 2</TD>
<TD>Row 4 Col 3</TD>
</TR>
</TABLE>
Row 1 Col 1+2 Row 1 Col 3
Row 2+3 Col 1 Row 2 Col 2 Row 2 Col 3
Row 3 Col 2+3
Row 4 Col 1 Row 4 Col 2 Row 4 Col 3

By COLSPANning and ROWSPANning the cells, we must make sure to remove the corresponding overlapped cells. Keeping track of how these spanned cells are set out is important, otherwise it is very easy for it to go all awry.

The cell colours can also be changed individually. For instance:

<TABLE BORDER=1>
<TR>
<TH BGCOLOR="#FF0000">Table Header 1</TH>
<TH BGCOLOR="#FF00FF">Table Header 2</TH>
</TR>
<TR>
<TD BGCOLOR="#FFFF00">Table Data 1</TD>
<TD BGCOLOR="#00FF00">Table Data 2</TD>
</TR>
</TABLE>
Table Header 1Table Header 2
Table Data 1Table Data 2

Previous : Index : Next