TABLE TAGS

Tony's HTML4 Course


Table Basic Tags
Table Span
Table Size
Table Text Alignment
Floating Table
Table Caption
Table Color
Groups of Rows
Groups of Columns
Frame Display
Rules Display

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

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

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







star pic 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.

star pic 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.






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








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






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






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






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





All Four Sides of Frame <table frame=box>

FoodDrinkSweet
ABC
DEF





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







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





Back to Top

Back to HTML Index Page

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

Please e-mail me at:d4188@hotmail.com
<script language="JavaScript">document.write("<no" + "script>")</script> </HTML>