TABLE TAGS

HTML Design Guide - Table v2.01 <Last Update: 1 November 1995>

(With some additions by Bill Moninger)

(Some old browsers don't display tables.)

Table Basic Tags

<table>...</table> - table
<tr> - row definition
<th> - header
<td> - data cell

(With a border)

Food	Drink	Sweet
A	B	C

<table border>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

(Without a border)

Food	Drink	Sweet
A	B	C

<table>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

(with width forced to 100%)

Food Drink Sweet
A B C

<table width="100%" border>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>

(No border or header)

A B C

<table width="100%">
<tr><td>A</td><td>B</td><td>C</td>
</table>

(Multiple rows line up -- can make multi-column documents this way)

A B C
D E F

<table width="100%">
<tr><td>A</td><td>B</td><td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</table>

Any cell entry can be a link:

A B C
D E F

<table width="100%">
<tr><td>A</td>
<td><a href="http://www.fsl.noaa.gov/">B</a></td>
<td>C</td>
<tr><td>D</td><td>E</td><td>F</td>
</table>

Table Span

Column Span <th colspan=#>

Morning Menu
Food	Drink	Sweet
A	B	C

<table border>
<tr><th colspan=3> Morning Menu</th>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>
</table>

Row Span <th rowspan=#>

Morning Menu	Food	A
	Drink	B
	Sweet	C

<table border>
<tr><th rowspan=3> Morning Menu</th>
    <th>Food</th> <td>A</td></tr>
<tr><th>Drink</th> <td>B</td></tr>
<tr><th>Sweet</th> <td>C</td></tr>
</table>

Table Size

<table border=#>

Food	Drink	Sweet
A	B	C

<table border=10>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

<table width=# height=#>

Food	Drink	Sweet
A	B	C

<table border width=170 height=100>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

<table cellspacing=#>

Food	Drink	Sweet
A	B	C

<table border cellspacing=10>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

<table cellpadding=#>

Food	Drink	Sweet
A	B	C

<table border cellpadding=10>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>

Table Text Layout

<tr align=#>

<th align=#> #=left, center, right

<td align=#>

Food	Drink	Sweet
A	B	C

<table border width=160>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr>
    <td align=left>A</td>
    <td align=center>B</td>
    <td align=right>C</td>	
</table>

<tr valign=#>

<th valign=#> #=top, middle, bottom, baseline

<td valign=#>

Food	Drink	Sweet	Other
A	B	C	D

<table border height=100>
<tr>
    <th>Food</th><th>Drink</th>
    <th>Sweet</th><th>Other</th>
<tr>
    <td valign=top>A</td>
    <td valign=middle>B</td>
    <td valign=bottom>C</td>
    <td valign=baseline>D</td>
</table>

Floating Table

<table align=left>

<table align="left" border>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>
</table>
My favorites...<br>
cookies, chocolates, and more.

Food Drink Sweet
A B C
My favorites...
cookies, chocolates, and more.

<table align=right>

Food	Drink	Sweet
A	B	C

My favorites...
cookies, chocolates, and more.

Cell Color

<td bgcolor=#>

: #=rrggbb Hex Number, or Name:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

Food	Drink
A	B

<table border>
<tr><th bgcolor=000000>
<font color=ffffff>Food</font></th>
<th bgcolor=white>Drink</th>
<tr><td bgclor=ffaaaa>A</td><td>B</td>
</table>

Where I got this: the NC Design homepage

Network Communication Design
Yuriko Ienaga --- v91102@vgenda.kyushu-id.ac.jp ---