| Course/Class Number: 58111/46065 |
| Class Title: 58111 (X)HTML: Beginning |
Resources
http://www.elizabethcastro.com/html6ed/examples/
Tables
Tables are used for two main purposes
• data presentation: laying out tabular data, as in a spreadsheet (this is a good use)
• page layout: dividing your page up with tables for the purpose of layout (this is no longer a good use)
While the role of tables in page layout will decrease with the increasing use of CSS, they are a critical component of many web sites.
Tables require three tags:
<table>
Establishes the fundamental structure of the table. Among others, <table> takes the following attributes:
width: values expressed in pixels or percentages
<table width=”500″>
<table width=”75%”>
cellpadding: defines distance from the inside border of a cell to the content. Values expressed in pixels
<table cellpadding=”3″ width=”500″>
cellspacing: defines distance between cells in a table. Values expressed in pixels.
<table cellspacing=”4″ cellpadding=”3″ width=”500″>
border: determines the thickness of the table’s outside border only. Expressed in pixels.
<table border=”3″ cellspacing=”4″ cellpadding=”3″ width=”500″>
<tr>
Establishes individual rows in a table. Typically, not used for much formatting but required for sound table structure. <tr> is nested inside table:
<table>
<tr>
. . .
</tr>
</table>
<th> and <td>
Establish individual cells in a row. <th> denotes a header cell; <td> denotes a content cell.
The tags take the same attributes, including the following:
width: Defines the width of an individual column. Cumulative cell widths must equal the width of the table.
<td width=”125″>
<td width=”25%”>
height: Defines the height of an individual row.
<td width=”125″ height=”35″>
align: Defines the alignment of content within the cell. Values are left/center/right.
<td width=”25%” height=”35″ align=”center”>
valign: Defines vertical alignment of individual cells. Important because table cells default to middle vertical alignment. Values are top/middle/bottom.
<td width=”25%” height=”35″ align=”center” valign=”top”>
Example Table:
<table border=”1″ width=”75%” align=”center” cellspacing=”3″ cellpadding=”2″>
<tr height=”40″>
<th width=”25%”>Date</th>
<th width=”25%”>Input</th>
<th width=”25%”>Outtake</th>
<th width=”25%”>Cost</th>
</tr>
<tr>
<td>Saturday, August 5</td>
<td>Rio Embudo Input, Pilar, NM</td>
<td>Horseshoe Outtake</td>
<td>$140</td>
</tr>
</table>
| Date | Input | Outtake | Cost |
|---|---|---|---|
| Saturday, August 5 | Rio Embudo Input, Pilar, NM | Horseshoe Outtake | $140 |