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