Table Structure
Each table is designed with the basic structure including the open and closing table element with table rows.
|
<table>
<tr>
</tr>
<tr>
</tr>
</table>
|
Table Heading and Table Data
Table cells can be marked with 2 different tags. Table headings <th> cells usually identify the column content which is centered and bold. Table data <td>cells is displayed with the default font size.
|
<table>
<tr>
<td>table data</td>
</tr>
<tr>
<td>table data</td>
</tr>
</table>
|
|
Table border attribute determines the outside thickness of the table. The widths are measured in pixels. The first table border is 5 pixels and the second is 10 pixels.
|
| Red #ff0000 |
Blue #0000ff |
| Orange #ff9933 |
Yellow #ffff00 |
| Red #ff0000 |
Blue #0000ff |
| Orange #ff9933 |
Yellow #ffff00 |
|
Row and Column Spanning
Spanning is similiar to merging cells in a spreadsheet. A colspan spreads from left to right across several columns with the number indicated and deleting the remaining cells. Row span spreads down.
| rowspan = 4 |
| colspan is 3px
|
|---|
| rowspan="2" |
table data cell |
rowspan=2 |
|
table data cell |
|
Table Caption
Table caption is text gives addition information about the that displayed outside of the table but the caption table is placed after the open table element. It appears centered top. |
Table Caption Text
| Red #ff0000 |
Blue #0000ff |
| Orange #ff9933 |
Yellow #ffff00 |
|
|---|