TABLE TAGS

NCD HTML Design Guide v6.0

Sponsor's ADs:

+ Table Basic Tags

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

FoodDrinkSweet
ABC 
<table border>
<tr><th>Food</th>
    <th>Drink</th><th>Sweet</th>
<tr><td>A</td>
    <td>B</td><td>C</td>	
</table>
FoodDrinkSweet
ABC 
<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
ABC 
<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=#>

FoodDrinkSweet
ABC 
<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=#>










FoodDrinkSweet

ABC





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










FoodDrinkSweet

ABC





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










FoodDrinkSweet

ABC





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






<tr align=#> ,
<th align=#>,
<td align=#> 

     #=left, center, right










FoodDrinkSweet

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=#>, <td valign=#> 

     #=top, middle, bottom, baseline











	FoodDrink
	SweetOther

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>














No Wrap

<tr nowrap>, <th nowrap>, <td nowrap>


Text wrap does not occur.












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









FoodDrinkSweet

ABC


My favorites...

cookies, chocolates, and more.












<table align=right> 





FoodDrinkSweet

ABC


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.









FoodDrinkSweet

ABC


My favorites...

cookies, chocolates, and more.














+ Table Caption





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








Lunch

FoodDrinkSweet

ABC





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














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








Lunch

FoodDrinkSweet

ABC





<table border>
<caption align=bottom>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

FoodDrinkSweet

ABC





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


















+ 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

AB





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









FoodDrinkSweet

ABC





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











FoodDrinkSweet

ABC





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
















+ Groups of Rows





Groups of Rows

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

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

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





Rows Alignment

<thead align=#1 valign=#2> ... </thead>

#1=left, center, right

#2=top, middle, bottom, baseline












FoodDrinkSweet




ABC

DEF







<table border>
<thead>
  <tr><th>Food</th><th>Drink</th><th>Sweet</th>
</thead>
<tbody align="right">
  <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





Groups of Columns

<colgroup> ... </colgroup>


<colgroup span=#> #number of colmuns affected

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

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

<colgroup width=#> #=width of one colmun











     
          
FoodDrinkSweet
     

     
          
ABC
          
DEF
     






<table border>
<colgroup span=2 align=center width=50>
</colgroup>
<colgroup align=right width=100>
</colgroup>
<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>












Subdivided Groups of Columns

<col>



<col span=#> #number of colmuns affected

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

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

<col width=#> #=width of one colmun










     
     

     
          
FoodDrinkSweet
     

     
          
ABC
          
DEF
     






<table border>
<colgroup align=center width=50>
  <col span=2 style="color:red">
  <col width=100>
</colgroup>
<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>









     
FoodDrinkSweet



     
ABC
     
DEF







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





     
FoodDrinkSweet



     
ABC
     
DEF












Bottom Side of Frame <table frame=below>





     
FoodDrinkSweet



     
ABC
     
DEF












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





     
FoodDrinkSweet



     
ABC
     
DEF












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





     
FoodDrinkSweet



     
ABC
     
DEF











Left Hand Side of Frame <table frame=lhs>





     
FoodDrinkSweet



     
ABC
     
DEF












Right Hand Side of Frame <table frame=rhs>





     
FoodDrinkSweet



     
ABC
     
DEF












No Frame <table frame=void>





     
FoodDrinkSweet



     
ABC
     
DEF
















+ Rules Display 






All Rules <table rules=all>











     
          
FoodDrinkSweet
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     






<table border rules=all>
<colgroup align=center span=2></colgroup>
<colgroup align=right></colgroup>
<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>







     
          
FoodDrinkSweet
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     











Rules between All Rows <table rules=rows>







     
          
FoodDrinkSweet
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     











Rules between All Cols <table rules=cols>







     
          
FoodDrinkSweet
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     











None <table rules=none>







     
          
FoodDrinkSweet
     

     
          
ABC
          
DEF
     

     
          
Total $-00.0
     




















HTML Design Guide
|
Style Sheet Guide





Document |
Page |
Font |
Text |
Image |
Form |
Table |
Frame |
Objects |
XML



HTML TAG LIST |
PDF Edition








BACK TO NCD HOME


Network Communication Design -
/






Copyright & Publishing 1994-2008
Network Communication Design