Basic Tables
- Well, as I know you know by now, basic HTML does not actually give
you much control over where things go on your page.
- For the most part, the browser gets to determine placement and you
are left simply communicating general layout instructions.
- However with the introduction of HTML 3.2 in 1996 came the first
really powerful tools for HTML layout: Tables.
- Tables give you the ability to position elements in your page with
much greater accuracy.
- Of course, the original intent of HTML Tables was to provide a way
to present tabular data in rows and columns.
- Thus the first tables looked something like the following:
| Column One Header |
Column Two Header |
| Row One/Column One |
Row One/Column Two |
| Row Two/Column One |
Row Two/Column Two |
- A table is composed of several tags that are outlined in the table
below:
| OPENING/CLOSING TAG |
DESCRIPTION |
| <TABLE>...</TABLE> |
Specifies an HTML table. (By default the table will have no
borders) |
| <TR>...</TR> |
Specifies a Table Row |
| <TH>...</TH> |
Specifies a Table Header Cell |
| <TD>...</TD> |
Specifies a Table Data Cell |
- Thus, the following code would create the very basic table that
was shown previously:
<HTML>
<HEAD>
<TITLE>Table Example</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TH>Column One Header</TH>
<TH>Column Two Header</TH>
</TR>
<TR>
<TD>Row One/Column One</TD>
<TD>Row One/Column Two</TD>
</TR>
<TR>
<TD>Row Two/Column One</TD>
<TD>Row Two/Column Two</TD>
</TR>
</TABLE>
</BODY>
</HTML>
- One thing to keep in mind about tables is that you may include any
Body HTML (i.e. markup that can go in the Body tag) in a table cell,
including tables. Thus you could make the contents of a cell bold with
the following table cell definition:
<TD><B>This text is bold</B></TD>
Additional Resources:
Exercise Eight
Introduction to Web Design | Table of Contents
Table Attributes
|
