TABLE ADVANCED

HTML Design Guide - Table v3.0

+ Table Color

Cell Background Color & Image
<th bgcolor=#>
<th background="URL">

#=rrggbb Hex Number, or Name:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
Food Drink Sweet
A B 
<table border>
<tr><th bgcolor=ffaa00>Food</th>
    <th bgcolor=Red>Drink</th>
    <th rowspan=2 background="image.gif">Sweet</th>
<tr bgcolor=white><td>A</td><td>B</td>
</table>







Border Color 

<table bordercolor=#>











Food

Drink

Sweet





A

B

C








<table cellspacing=5 border=5 bodercolor=#ffaa00>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>












Light & Dark Border Color 

<table bordercolorlight=#>

<table bordercolordark=#> 











Food

Drink

Sweet





A

B

C








<table cellspacing=5 border=5 
     bordercolorlight=White bordercolordark=Maroon>
<tr><th>Food</th><th>Drink</th><th>Sweet</th>
<tr><td>A</td><td>B</td><td>C</td>      
</table>















+ Structured Table 






Groups of Rows

<thead> ... </thead> - Table Header 

<tbody> ... </tbody> - Table Body 

<tfoot> ... </tfoot> - Table Footer 
















Food

Drink

Sweet







A

B

C





D

E

F










<table border>
<thead>
     <tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>












Groups of Columns

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
















Food

Drink

Sweet







A

B

C





D

E

F










<table border width=160>
<colgroup align=left>
<colgroup align=center>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
</table>












Properties of Columns

<col span=#> #=amount of colmuns affected

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
















Food

Drink

Sweet







A

B

C





D

E

F










<table border width=160>
<colgroup>
     <col align=center span=2>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
</table>












+ Frame Display 






All Four Sides of Frame <table frame=box>
















Food

Drink

Sweet







A

B

C





D

E

F










<table border frame=box>
<thead>
     <tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody>
     <tr><td>A</td><td>B</td><td>C</td>
     <tr><td>D</td><td>E</td><td>F</td>
</tbody>
</table>












Top Side of Frame <table frame=above>











Food

Drink

Sweet







A

B

C





D

E

F











Bottom Side of Frame <table frame=below>











Food

Drink

Sweet







A

B

C





D

E

F











Top and Bottom Sides of Frame <table frame=hsides>











Food

Drink

Sweet







A

B

C





D

E

F











Left and Right Sides of Frame <table frame=vsides>











Food

Drink

Sweet







A

B

C





D

E

F











Left Hand Side of Frame <table frame=lhs>











Food

Drink

Sweet







A

B

C





D

E

F











Right Hand Side of Frame <table frame=rhs>











Food

Drink

Sweet







A

B

C





D

E

F











No Frame <table frame=void>











Food

Drink

Sweet







A

B

C





D

E

F











+ Rules Display 






All Rules <table rules=all> 
















Food

Drink

Sweet







A

B

C





D

E

F







Total $-00.0










<table border rules=all>
<colgroup><col align=center span=2>
<colgroup align=right>
     <thead>
          <tr><th>Food</th><th>Drink</th><th>Sweet</th>
     </thead>
     <tbody>
          <tr><td>A</td><td>B</td><td>C</td>
          <tr><td>D</td><td>E</td><td>F</td>
     </tbody>
     <tbody>
          <tr><td rowspan=3 align=right>Total $-00.0</td>
     </tbody>
</table>












Rules between Groups <table rules=groups> 











Food

Drink

Sweet







A

B

C





D

E

F







Total $-00.0











Rules between All Rows <table rules=rows> 











Food

Drink

Sweet







A

B

C





D

E

F







Total $-00.0











Rules between All Cols <table rules=cols> 











Food

Drink

Sweet







A

B

C





D

E

F







Total $-00.0











None <table rules=none> 











Food

Drink

Sweet







A

B

C





D

E

F







Total $-00.0










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