How to: Table Project
Original by: Dave Markey '06
Edited by: Tom Imbalzano & Nisarg Chhaya '06
The table project introduces web design classes to basic html table structures.
Tables are an important layout tool, used by many web designers. This tutorial
will explain the many tags and parameters (properties) used in html tables
that will create the structure and design you want for your web page project.
You should begin in a new text document with the following page layout.
(We will not explain these basic tags as they have been reviewed in previous
lessons.) Notice how we have organized our html code by indenting tags that
are contaied within other tags. New tags within a tag should be indented
two spaces as compared to the tag before it. This is shown below.
*Please note* html tags should NOT be capitalized!!! --according to the
W3C(World Wide Web Commission).
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Place a Title for your project within the start and end title tags.
The majority of your work on this project will be within the body tags.
The tables "start" and "end" tags mark the start and end of the table. Within your tables start tag, you have many options. These are shown below:
table model from: Arnspub.com
| start |
tag name |
properties |
value indicator |
end |
| < |
table |
bgcolor
background
border
cellpadding
cellspacing
width
height
|
="value" |
> |
Each one of these parameters changes a specific property of the table.
The benefit of placing parameters in the table tag is that properties are set for the
entire table.
If you want to change a property for just a table row, change it in the row tag, and
cell properties are changed in the cell tag. (This will be explained later.)
bgcolor="color" gives the entire table a background color.
background="url" gives your entire table a background image.
border="value in px" gives your entire table a border size.
cellpadding="value in px" pushes the information in your table away from the border
cellspacing="value" places a space between the cells on the entire table.
Here is an example of a table using all the these properties except background="url":
htmlmarkupfor this table
<table bgcolor="#ffffff" border="1px" cellpadding="10px" cellspacing="1" height="20%" width="100%" bordercolor="#0066FF">
<tr>
<th>
</th>
<td>
</td>
</tr>
</table>
|
Notice that the table background color is white. The text is padded off the blue border 10 pixels and the cellspacing is small. In the <td> tag nothing is bold or centered. Notice, all text in the <th> tag is bold and centered. The table is set to 20% of the height of the content area and 100% of its width.
|
Within the table tags we use <tr> tags. Theses tags create the rows
that you see. Here's and example of a table with 3 rows:
Markup for this table:
<table border="1">
<tr>
<td>row 1</td>
</tr>
<tr>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
</tr>
</table>
Inside each <tr> tag goes either <td> tags or <th> tags.
The <td> tag denotes a table data cell. These cells are the containers
for the information you see. For instance pictures or text..
Often, you'll see tables with cells that stretch over rows or columns. This
is done by column spanning: (colspan="value") or rowspanning (rowspan="value")
Your <td> or <th> tag will look something like this in your table:
<td rowspan="2">
or
<td colspan="5">
Here is an example of a table with rowspan="2" and colspan="4" put
to use:
| table header, row 1 |
| data cell, row 2 |
data cell, row 2 |
table header, row 2 |
| data cell, row 3 |
data cell, row 3 |
data cell, row 3 |
Here's the markup for the table above:
<table border="1" width="60%" height="20%">
<tr>
<th colspan="4">table header, row 1</th>
</tr>
<tr>
<td rowspan="2">data cell, row 2</td>
<td>data cell, row 2</td>
<th colspan="2">table header, row 2</th>
</tr>
<tr>
<td>data cell, row 3</td>
<td>data cell, row 3</td>
<td>data cell, row 3</td>
</tr>
</table>
-Back to Webdesign-