Below are some sample HTML <TABLE> fragments together with their accompanying renderings.

NOTE : Some of the tables are browser specific, where this is the case, the 'browser dependancy graphic' is displayed (i.e. the browser logo will be visible).

NOTE : Tables no 5 and 6 use <TH> elements nested inside <TD> elements. While the examples render correctly, it is not good practice to nest headers inside data cells and using those tables as the basis of other tables may cause the new tables to render incorrectly. It would be better to emphasis data cells to make them appear as headers, by using the <STRONG> element.

The tables are:
1) A Simple table
2) A table using ROWSPAN
3) A table using COLSPAN
4) A table using headers
5) A table using all of the above
6) A table using ALIGN/VALIGN
7) Nested tables
8) Floating tables
9) A coloured table
10) A HTML 3.2 table

1) A simple table

<TABLE BORDER>
<TR>
<TD>Data cell 1</TD><TD>Data cell 2</TD>
</TR>
<TR>
<TD>Data cell 3</TD><TD>Data cell 4</TD>
</TR>
</TABLE>

top

2) A table using ROWSPAN

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>This cell spans two rows</TD>
<TD>These cells</TD><TD>would</TD>
</TR>
<TR>
<TD>contain</TD><TD>other data</TD>
</TR>
</TABLE>

top

3) A table using COLSPAN

<TABLE BORDER>
<TR>
<TD>Data cell 1</TD>
<TD COLSPAN=2>This cell spans 2 columns</TD>
</TR>
<TR>
<TD>Data cell 2</TD><TD>Data cell 3</TD><TD>Data cell 4</TD>
</TR>
</TABLE>

top

4) A table using headers

<TABLE BORDER>
<TR>
<TH>Netscape</TH><TH>Internet Explorer</TH><TH>Mosaic</TH>
</TR>
<TR>
<TD>X</TD><TD>X</TD><TD>-</TD>
</TR>
<TR>
<TD>X</TD><TD>-</TD><TD>X</TD>
</TR>
</TABLE>

top

5) A table using all of the above

<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=3>Browser</TH></TD>
</TR>
<TR>
<TD><TH>Netscape</TH><TH>Internet Explorer</TH>
<TH>Mosaic</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2>Element</TH>
<TH><DFN></TH><TD>-</TD><TD>X</TD>
<TD>-</TD>
</TR>
<TR>
<TH><DIR></TH><TD>X</TD><TD>X</TD>
<TD>X</TD>
</TR>
</TABLE>

top

6) A table using ALIGN/VALIGN
This table adds ALIGN and VALIGN attributes to the above example to improve the layout of the table.

<TABLE BORDER>
<TR>
<TD><TH ROWSPAN=2></TH>
<TH COLSPAN=3>Browser</TH></TD>
</TR>
<TR>
<TD><TH>Netscape</TH><TH>Internet Explorer</TH>
<TH>Mosaic</TH></TD>
</TR>
<TR>
<TH ROWSPAN=2 VALIGN=top>Element</TH>
<TH><DFN></TH>
<TD ALIGN=center>-</TD>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>-</TD>
</TR>
<TR>
<TH><DIR></TH>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>X</TD>
<TD ALIGN=center>X</TD>
</TR>
</TABLE>

top

7) Nested tables
To show that tables can be nested within each other. This table uses the ROWSPAN table, including the 'simple' table inside one of the data cells.

<TABLE BORDER>
<TR>
<TD ROWSPAN=2>This cell spans two rows
<TABLE BORDER>
<TR>
<TD>Data cell 1</TD><TD>Data cell 2</TD>
</TR>
<TR>
<TD>Data cell 3</TD><TD>Data cell 4</TD>
</TR>
</TABLE>
</TD>
<TD>These cells</TD><TD>would</TD>
</TR>
<TR>
<TD>contain</TD><TD>other data</TD>
</TR>
</TABLE>

top

8) Floating tables

<TABLE ALIGN=left BORDER WIDTH=50%>
<TR> <TD>This is a two row table</TD>
</TR>
<TR>
<TD>It is aligned to the left of the page</TD>
</TR>
</TABLE>
This text will be to the right of the table, and will fall neatly beside the table
<BR CLEAR=all>
<HR>
<TABLE ALIGN=right BORDER WIDTH=50%>
<TR>
<TD>This is a two row table</TD>
</TR>
<TR>
<TD>It is aligned to the right of the page</TD>
</TR>
</TABLE>
This text will be to the left of the table, and will tall neatly beside the table
<BR CLEAR=all>
<HR>

top

9) A coloured table
NOTE :Netscape does not display the border colourings of this table.

<TABLE BORDER BGCOLOR=Silver BORDERCOLOR=Black WIDTH=50%>
<TR>
<TD>This is the first cell</TD>
<TD>This is the second cell</TD>
</TR>
<TR BORDERCOLOR=Red BGCOLOR=Green>
<TD>This is the third cell</TD>
<TD>This is the fourth cell</TD>
</TR>
<TR BORDERCOLOR=Red BGCOLOR=Green>
<TD BORDERCOLOR=Yellow>This is the fifth cell</TD>
<TD BGCOLOR=White>This is the sixth cell</TD>
</TR>
</TABLE>

top

10) A HTML 3.2 table

<TABLE BORDER FRAME=hsides RULES=cols>
<COL ALIGN=left>
<COLGROUP SPAN=3 ALIGN=center VALIGN=middle>
<THEAD>
<CAPTION ALIGN=center><FONT SIZE=+1><B>
A section of the Comparison Table</B></FONT>
</CAPTION>
<TR>
<TD>Element</TD><TD><B>Internet Explorer</B></TD>
<TD><B>Netscape</B></TD><TD><B>Mosaic</B></TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD><B></TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD>&lt;BASE ...&gt;</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...HREF</TD><TD>X</TD><TD>X</TD><TD>X</TD>
</TR>
<TR>
<TD> ...TARGET</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD>&lt;BASEFONT ...&gt;</TD><TD>X</TD><TD>X</TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top> ...SIZE</TD><TD>X<BR><FONT SIZE=-1>
(only visible<BR>when FONT<BR>SIZE= used<BR>
as well)</FONT></TD><TD VALIGN=top>X</TD>
<TD></TD>
</TR>
<TR>
<TD> ...FACE</TD><TD>X</TD><TD></TD><TD></TD>
</TR>
<TR>
<TD VALIGN=top>&lt;BGSOUND ...&gt;</TD><TD VALIGN=top>X</TD>
<TD></TD><TD>X<BR><FONT SIZE=-1>(will spawn<BR>player for<BR>
.mid files)</FONT></TD>
</TR>
</TBODY>
<TFOOT></TFOOT>
</TABLE>

top

© 1995-1998, Stephen Le Hunte