Разное  /  HTML 4.0 Design Guide  /  Table Tags

О нас    Новости    Услуги    Портфолио    FAQ    Разное    Дом


Contents:

Page
Font
Text
Image
Form
Table
Frame
Inline
 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>

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 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="images/tablebck.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=Red>
<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=Aqua bordercolordark=Navy>
<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

FoodDrinkSweet
ABC
DEF 
<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

FoodDrinkSweet
ABC
DEF 
<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

FoodDrinkSweet
ABC
DEF 
<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>

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


О нас    Новости    Услуги    Портфолио    FAQ    Разное    Дом

Разное  /  HTML 4.0 Design Guide  /  Table Tags