TABLE TAGS

HTML Design Guide - Table v3.0

+ Table Basic Tags

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

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>
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>

+ 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. 











<table vspace=# hspace=#> #=space value 






<table align="left" border vspace=20 hspace=30>
<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 Caption






<caption align=#> ... </caption> #=left, center, right











Lunch





Food

Drink

Sweet





A

B

C








<table border>
<caption align=center>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>















<caption valign=#> ... </caption> #=top, bottom













Lunch





Food

Drink

Sweet





A

B

C








<table border>
<caption valign=bottom>Lunch</caption>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>














NCD HOME
HTML
Design Guide Main Page

Contents
|| Page
|| Font
|| Text
Style || Image
|| Form
|| Table
|| Table
Advanced 

|| Frames
|| Marquee
|| Alternative
Inline Elements 

Tag
Index || What's
New 





Network Communication Design

http://ncdesign.kyushu-id.ac.jp/

C&P 1994-1996 Yuriko Ienaga v91102@vgenda.kyushu-id.ac.jp