Using Tables

Check your textbook for more details.

There are many types of tables that can be created. One of the most useful features of tables is that they allow you to align text or objects neatly. You can choose to set the border size to 0 to create an invisible table or you can add colored borders. Here is just a few samples to get you started.

The general HTML code looks like this:

<TABLE> Start of a table
<TR> Start a table row
<TD> Contents of a table cell
</TD> End tag for table cell
</TR> End tag for a table row
</TABLE> End tag for a table

Some examples follow. The browser view is shown with the HTML text directly below.

Meet new friends 102
Get a diploma 5
Keep teachers employed 2
<TABLE>
<TR>
<TD>Meet new friends</TD> <TD>102</TD>
</TR>
<TR>
<TD>Get a diploma</TD> <TD>5</TD>
</TR>
<TR>
<TD>Keep teachers employed</TD> <TD>2</TD>
</TR>
</TABLE>

Meet new friends102
Get a diploma5
Keep teachers employed2
<TABLE>
<TR>
<TH>Meet new friends</TH> <TD>102</TD>
</TR>
<TR>
<TH>Get a diploma</TH> <TD>5</TD>
</TR>
<TR>
<TH>Keep teachers employed</TH> <TD>2</TD>
</TR>
</TABLE>
Note: the TH tag is like TD except it bolds the text and aligns it center.

Meet new friends102
Get a diploma5
Keep teachers employed2
<TABLE align=center border=1>
<TR bgcolor=#ffffcc>
<TD>Meet new friends</TD> <TD ALIGN=right>102</TD>
</TR>
<TR>
<TD bgcolor=yellow>Get a diploma</TD> <TD ALIGN=right>5</TD>
</TR>
<TR>
<TD>Keep teachers employed</TD>
<TD ALIGN=right>2</TD>
</TR>
</TABLE>
Note: Any attribute applied to the TABLE tag affects the whole table; attributes in the TR tag affects the row and attributes applied to the TD tag affects only that cell.


Students Parents Teachers
Meet new friends 102 8 4
Get a diploma 5 182 58
Keep teachers employed 2 9 88
<TABLE>

<TR>
<TD><BR></TD>
<TH ALIGN=left>Students</TH>
<TH ALIGN=left>Parents</TH>
<TH ALIGN=left>Teachers</TH>
</TR>


<TR>
<TH ALIGN=left>>Meet new friends</TH>
<TD ALIGN=center>102</TD>
<TD ALIGN=center>8</TD>
<TD ALIGN=center>4</TD>
</TR>


<TR>
<TH ALIGN=left>Get a diploma</TH>
<TD ALIGN=center>5</TD>
<TD ALIGN=center>182</TD>
<TD ALIGN=center>58</TD>
</TR>


<TR>
<TH ALIGN=left>Keep teachers employed</TH>
<TD ALIGN=center>2</TD>
<TD ALIGN=center>9</TD>
<TD ALIGN=center>88</TD>
</TR>

</TABLE>

Students Parents Teachers
Meet new friends 102 8 4
Get a diploma 5 182 58
Keep teachers employed 2 9 88
<TABLE BORDER=5 BORDERCOLOR="red" bgcolor=yellow>

<TR>
<TD><img src=tableimg.jpg width=116 height=17></TD>
<TH ALIGN=left>Students</TH>
<TH ALIGN=left>Parents</TH>
<TH ALIGN=left>Teachers</TH>
</TR>


<TR>
<TH ALIGN=left>>Meet new friends</TH>
<TD ALIGN=center>102</TD>
<TD ALIGN=center>8</TD>
<TD ALIGN=center>4</TD>
</TR>


<TR>
<TH ALIGN=left>Get a diploma</TH>
<TD ALIGN=center>5</TD>
<TD ALIGN=center>182</TD>
<TD ALIGN=center>58</TD>
</TR>


<TR>
<TH ALIGN=left>Keep teachers employed</TH>
<TD ALIGN=center>2</TD>
<TD ALIGN=center>9</TD>
<TD ALIGN=center>88</TD>
</TR>

</TABLE>

Index Basic Tags Links Design Layout Tables Image File Types Using Images Image Editing Lists Frames