TABLE PROPERTIES

NCD Style Sheet Guide v6.0

Sponsor's ADs:

+ Table Border

Table & Cell Border

<style type="text/css">
table {border: 5px solid orange}
td {border: 5px solid red}
</style>
...
<table>
<tr><td>Food</td>
    <td>Drink</td>
    <td>Sweet</td> </tr>
<tr><td>A</td>
    <td>B</td>
    <td>C</td> </tr>
</table>
FoodDrinkSweet
ABC

Cell Spacing
{border-spacing: # }
    #=length (px, pt, in, cm, em)

<style type="text/css">
table {border: 5px solid orange;
       border-spacing:15px}
td {border: 5px solid red}
</style>
...
FoodDrinkSweet
ABC

Borders around Empty Cells
{empty-cells: # }     #=show, hide

<style type="text/css">
table {border: 5px solid orange; empty-cells: #}
td {border: 5px solid red}
</style>
...
<table>
<tr><td>Food</td><td>Drink</td><td>Sweet</td> </tr>
<tr><td>A</td><td>B</td><td></td> </tr>
</table>
empty-cells:show
FoodDrinkSweet
AB
empty-cells:hide
FoodDrinkSweet
AB



+ Table Border Collapse

{border-collapse: # }
#=separate, collapse

<style type="text/css">
table {border: 5px solid orange}
td {border: 5px solid red}
</style>
...
<table style="border-collapse:#">
<tr><td>Food</td><td>Drink</td><td>Sweet</td>
<tr><td>A</td><td>B</td><td>C</td>	
</table>
border-collapse:separate
FoodDrinkSweet
ABC

border-collapse:collapse
FoodDrinkSweet
ABC


+ Table Layout

{table-layout: # }
#=auto, fixed

<table border style="table-layout:#">
<tr>
   <th width="100" height="30">NAME</th>
   <td width="100" height="30">Network Communication Design</td>
</tr>
<tr>
   <th>URL</th>
   <td>/</td>
</tr>
</table>
table-layout:auto
NAME Network Communication Design
URL/

table-layout:fixed
Table is fixed in size of width and height, but displayed faster.
NAME Network Communication Design
URL/



+ Caption Position

{caption-side: # }
#=top, bottom, left, right

Netscape 6 doesn't support "left" and "right".

<table border>
<caption
   style="caption-side:bottom">
 Lunch</caption>
<tr><td>Food</td>...</tr>
<tr><td>A</td>...</tr>
</table>
Lunch
FoodDrinkSweet
ABC



Style Sheet Guide | HTML Design Guide
Basic | Selector | Cascading
Font | Text | List | Color & Background | Box | Table | Position & Format | Other|
Selector List | Property List


BACK TO NCD HOME
Network Communication Design - /
Copyright & Publishing 1994-2008 Network Communication Design