TEC home
Web home
Page/site design
- basic principles
- examples and resources
Basic html
- tutorial
- resources
Netscape Composer
- tutorial
- resources
Dreamweaver
- tutorial
- resources
Uploading and downloading
- setting up your mason account
- basic procedure
Web assignments
- general
- design and navigation
HTML Tutorial - Tables
In this tutorial you will learn how to write some additional html code in order to create tables that allow you
to control the page layout in a basic web page. Note that the actual html tags are in <arrow> brackets and
the explanations of the tags are in [square] brackets.
Skim the codes and explanations to get a sense of what you can do, then copy the code you need and paste it into
the text file you are working with and adjust/revise accordingly. The tags are generally ordered from simple to
complex.
1. Basic Table
<table align="center" width="70%"> 2. Two TDs with Background Color
<table align="left" width="600"> 3. Magazine-like Layout
<table align="left" width="600"> 4. Table within Table
<table width="600" cellpadding="5" cellspacing="5"> 5. Displaying Data
<table border="1" cellpadding="4" cellspacing="1">
<tr>
<td>
insert text to be seen on the page here
</td>
</tr>
</table>
[One of the most basic uses of a table is to simply create a margin around your primary body of text. Using
the above structure allows you to do this. The table tag allows you to set a number of table attributes. Here,
I've aligned the table to the center to create the margins and I've designated the width at 70%. This means that
you will have a margin of 15% on each side. Using percents allows the text to be adjusted for varying browser
sizes. Percents work fine on their own but once you start working with multiple tables and/or cells it is generally best to use
fixed pixel widths. Note the basic logic: the <tr> tag stands for table row and the <td> tag stands for table data
or table cell. Always place your data (text or images) in a <td> tag. Above we have simply designated one row and
one data cell. Note especially the open/close logic. Everything must be closed for the table to work.]
<tr>
<td width="200" bgcolor="#ff3333">
insert text to be seen on the page here
</td>
<td width="400">
insert text to be seen on the page here
</td>
</tr>
</table>
[In this table, I've used a fixed width where 600 is the number of pixels. This means, no matter what size the user's
browser is, this table will remain 600 pixels wide. This allows you to have more control over your layout and to designate
fixed widths for your table cells. Note that I've put two cells next to each other within one row. This allows you to arrange
images and text on a page. The <td> tag also lets you designate a background color for a table cell. This allows you to
use the left table for setting up navigational links while the right table can contain your data (as in this tutorial).
Note that you can also align a table to the right or to the left.]
<tr>
<td colspan=2 width="600">
insert headline to be seen on the page here
</td>
</tr>
<tr>
<td colspan=2 width="600">
insert image to be seen on the page here
</td>
</tr>
<tr>
<td colspan=2 width="600">
insert caption to be seen on the page here
</td>
</tr>
<tr>
<td>
insert text to be seen on the page here
</td>
<td>
insert text to be seen on the page here
</td>
</tr>
</table>
[Tables can also allow you to create magazine-like layouts. In this table, a headline, an image, and a caption
will span the entire width of the two columns of copy below them. Note that the headline, image, and caption are in
separate <tr> tags while the two columns are in one <tr> tag. This keeps the two columns on the same row. The colspan
tag just allows the data to cover the full width. Note that there is a rowspan tag that also lets you span a data cell vertically as well.]
<tr>
<td width="600">
insert image banner to be seen across the top of the page here
</td> br>
</tr>
<tr>
<td width="120">
insert navigational links to be seen down the left of the page here
</td>
<td width="480">
insert the above table here, adjusting the width to 480
</td>
</tr>
</table>
[You can also place a table within a table. The above code creates a table row across the top and a column down
the left. Placing the previous table within a data cell puts all of that data inside the new table. Note that you
may need to adjust some widths on the original table to set the layout properly. Also note the cellpadding and cellspacing tags. With all of
the data on the page things may be getting crowded. The cellspacing tag creates space between cells, while the cellpadding
tag creates space between the cell and its data. Experiment with the pixel values on each to get the layout you are
looking for.]
<caption>Schedule for Fall 2003</caption>
<th>Days</th>
<th>Office Hours</th>
<th>Course Hours</th>
<tr>
<td>Monday</td>
<td align="center">2:30-5:00, 211 CH</td>
<td align="center">1:00-2:20, 102 PH</td>
<tr>
<td>Tuesday</td>
<td align="center"> . . . </td>
<td align="center"> . . . </td>
<tr>
<td>Wednesday</td>
<td align="center">2:30-5:00, 211 CH</td>
<td align="center">1:00-2:20, 102 PH</td>
<tr>
<td>Thursday</td>
<td align="center"> . . . </td>
<td align="center"> . . . </td>
<tr>
<td>Friday</td>
<td align="center"> . . . </td>
<td align="center"> . . . </td>
</table>
[Tables were origianlly designed to display tabular or statistical data before they were employed in the
service of page design/layout. Above is an example of a simple three column, six row table based around a weekly schedule.
The <caption> tag centers a caption above the table. The <th> tag bolds the headers for each column. The basic structure
can be used to display any data. Simply add or subtract column headers or rows.]
HTML Home | Text | Links |
Images | Tables
