HTML/WWW Wkshop: Adv HTML-Tables2

Advanced HTML: Table Attributes

the Table Tag & Friends
table

defines a multi-column table with rows delineated by the <tr> tag and data elements by the <td> tag. Headers may be defined with the <th> tag. This is most easily seen with an example:

<table>
<tr>
<th> head 1 </th>
<th> head 2 </th>
</tr>
<tr>
<td> data 1 </td>
<td> data 2 </td>
</tr>
<tr>
<td> data 3 </td>
<td> data 4 </td>
</table>

head 1 head 2

data 1 data 2

data 3 data 4

Table tag Attributes:
align="alignment"
may be left or right
background="url"
specifies the URL of an image to use as a background to the table.
bgcolor="#hexvalue" or
bgcolor=color
specifies the RGB hex value of a background color for the table.
border or border=n
adds borders to the table. May take a value indicating the width n (in pixels) of the border.
bordercolor="#hexvalue" or
bordercolor=color
specify the RGB hex value of a color for the borders
cellpadding=n
specifies the space n (in pixels) between cell contents and the cell borders.
cellspacing=n
sets the spacing n between cells (the width of the interior borders), in pixels.
hspace=n
specify the amount of horizontal space in pixels added to the left and right of the table
vspace=n
specify the amount of vertical space in pixels added to the top and bottom of the table
width
specifies the width of the table, as a percent or a number of pixels.
Example:

<table bgcolor="#dd0000" border=5 cellspacing=5 cellpadding=5 width="40%">
<tr>
<td> item 1 </td> <td> item 2 </td>
<tr>
<td> item 3 </td> <td> item 4 </td>
</tr>
</table>

item 1 item 2
item 3 item 4

Table row tag Attributes:
the table attributes align, background, bgcolor, border, and bordercolor are also available in the <tr> tag.
valign="alignment"
specifies that cell contents in the row should be aligned to the top, middle, bottom, or baseline of the cells.

Table header and data tag Attributes:
the table attributes align, background, bgcolor, border, and bordercolor are also available in the <th> and <td> tags. the table row attribute valign is also allowed.
colspan=n
indicates the number n of columns the data/header should span. Note that the <td> tag in subsequent (spanned) columns should be omitted.
nowrap
indicates that the browser shouldn't automatically wrap lines. line breaks are specified using <br>.
rowspan=n
indicates the number n of rows the data/header should span. Note that the <td> tag in subsequent (spanned) rows should be omitted.
Example:
<table border>
<tr bgcolor="#dd0000" align="center">
<th width="50%">header 1</th>
<th width="25%">header 2</th>
<th width="25%">header 3</th>
</tr>
<tr align="center">
<td colspan=2>data 1</td>
<td bgcolor="#0000dd">data 2</td>
</tr> <tr valign="top">
<td bgcolor="#00aa00" rowspan=2>data 3</td>
<td>data 4</td>
<td>data 5</td>
</tr> <tr>
<td>data 6</td>
<td>data 7</td>
</tr> </table>

header 1 header 2 header 3

data 1 data 2

data 3 data 4 data 5

data 6 data 7

[advhtml] [colors] [reuse] [valid] [images] [objects] [imaps] [tables] [frames] [forms]

[title] [objectives] [www uses] [the works] [basic html]
[adv html] [editors] [resources] [feedback]

last modified (( Jun 17 07:47:05 1997 ))
HTML/WWW Wkshop: Adv HTML-Tables2
©1997 Gavin LaRose
Comments to: glarose@NebrWesleyan.edu

`[title]`	`[objectives]`	`[www uses]`	`[the works]`	`[basic html]`
`[adv html]`	`[editors]`	`[resources]`		`[feedback]`