|
LILLY ROBOT |
Tables
| Property | Value |
|---|---|
| border-collapse | collapse, separate |
| border-spacing | length e.g 20px |
| caption-side | top, bottom, left, right |
| empty cells | show, hide |
| table-layout | auto, fixed |
It is important to understand the structure of the table tags before we look at any of the properties.
Table Tags
<tr> table row </tr>
<th>table header </th>
<td> table data </td>
</table>
Example
| table header | table header |
|---|---|
| table data | table data |
| table data | table data |
Border Collapse
A table border can be seperated or collapsed (single border).
<style>
table
{
border:1px solid black;
width:400px
border-collapse:collapse;
}
th,td
{
border:3px groove green;
font-family:vardana arial;
font-size:22px;
padding:10px;
}
</style>
</head>
<table>
<tr>
<th>Name</th>
<th>Results</th>
</tr>
<tr>
<td>Jane</td>
<td>passed</td>
</tr>
<tr>
<td>Imran</td>
<td>passed</td>
</tr>
<tr>
<td>Tom</td>
<td>passed</td>
</tr>
<table>
</body>
Displays
Border: Collapse
| Name | Results |
|---|---|
| Jane | passed |
| Imran | passed |
| Tom | passed |
Displays
Border: Separate
| Name | Results |
|---|---|
| Jane | passed |
| Imran | passed |
| Tom | passed |
Border Spacing
A border spacing specifies the distance that separates the borders of adjoining cells.
<style>
table
{
border:1px solid black;
width:400px
border-spacing:20px;
}
th,td
{
border:3px groove green;
font-family:vardana arial;
font-size:22px;
padding:10px;
}
</style>
</head>
Displays
| Name | Results |
|---|---|
| Jane | passed |
| Imran | passed |
| Tom | passed |
Caption Side
A table caption is a title, it tells you what the table is about. The placement of the table caption can be on the top, bottom, left or right.
<style>
table
{
border:1px solid black;
width:200px
}
th,td
{
border:3px groove green;
font-family:vardana arial;
font-size:20px;
padding:5px;
}
caption
{
font-size:16px;
caption-side:bottom.
}
</style>
</head>
<table>
<caption>
English Exam Results
</caption>
</table>
</body>
Displays
| Name | Results |
|---|---|
| Jane | passed |
| Imran | passed |
| Tom | passed |
Empty Cells
Cells without content can have their borders hidden. In the table below we have removed the content Jane and passed.
<style>
table
{
empty-cells:show;
}
</style>
</head>
<style>
table
{
empty-cells:hide;
}
</style>
</head>
Displays
Empty Cells: Show
| Name | Results |
|---|---|
| Imran | passed |
| Tom | passed |
Displays
Empty Cells: Hide
| Name | Results |
|---|---|
| Imran | passed |
| Tom | passed |
Table Layout
The default algorithm for the table layout, by most browsers, is automatic. The auto value takes into consideration the content inside the table cells when defining the widths of the cells layout.
Whereas, if the table layout value is fixed the content is ignored, instead it is based on the first width of the table's cell.
Table Layout: Fixed
<table style="table-layout:fixed; width:100%">
<th style="width:20%">Name</th>
Table Layout: Auto
<table style="table-layout:auto; width:100%">
<th style="width:20%">Name</th>
Displays
Table Layout: Fixed
| Name | Results |
|---|---|
| Jane | passed |
| Imran | passed |
| Tom | passed |
Displays
Table Layout: Auto
| Name | Results |
|---|---|
| Jane | passed |
| Imran | passed |
| Tom | passed |