| Type: | Tables |
|---|---|
| Attributes: | align • colspan • rowspan • align • alt • background-color • background-image-dpi • background-image-position • background-image • background-pdf • border-color • border-style • border-width • border • clear • corner-radius • display • float • font-size • height • href • left • line-cap • line-height • line-join • margin • onmouseover • overflow • padding • page-break-after • page-break-inside • position • rotate • size • title • top • vertical-align • visibility • white-space • width • class • colorspace • direction • id • lang • pdf-tag-background-color • pdf-tag-border-color • pdf-tag-border-style • pdf-tag-border-thickness • pdf-tag-color • pdf-tag-list-numbering • pdf-tag-placement • pdf-tag-table-colspan • pdf-tag-table-headers • pdf-tag-table-rowspan • pdf-tag-table-scope • pdf-tag-table-summary • pdf-tag-text-align • pdf-tag-type |
| See: | table tr |
The td and TH elements specify text in a cell in a table - although in theory the td should be used for "table data" and TH used for "table headings", the only actual difference is the default style that's used. Use these elements inside a tr element, which is used inside a table element.
Like all blocks (but unlike HTML) table cells can have margin, border and padding attributes specified, which will override any values set by the cellmargin, cellborder and cellpadding attributes in the parent table.
The may also have colspan and rowspan specified, so individual cells can span several columns or rows. Cells may also have a width and height specified, but if these conflict with the width and height values set in the table, the tables values will take precedence.
The "nowrap" attribute specified in HTML is not used here. Instead, set the white-space attribute to "nowrap".
Create a simple table which is autosized
<table> <tr><td>Cell 1</td><td>Cell 2</td></tr> <tr><td>Cell 3</td><td>Cell 4</td></tr> </table>
Create a simple table which uses the "fixed" layout. The width must be specified for every cell in the first row and the table itself.
<table table-layout="fixed" width="200"> <tr><td width="60%">Cell 1</td><td width="40%">Cell 2</td></tr> <tr><td>Cell 3</td><td>Cell 4</td></tr> </table>
This shows how to use the ROWSPAN attribute.
<table>
<tr>
<th rowspan="2">First column, both rows</th>
<td>Second column, first row</td>
</tr>
<tr>
<td>Second column, second row</td>
</tr>
</table>
In this example, the tables width takes precedence over the width set in the cells.
<table width="500">
<tr>
<td width="50">Cell 1</td>
<td width="50">Cell 2</td>
</tr>
</table>