Basics
Tables are a very useful way of presenting tabular information, as well as allowing creative HTML authors to control their page layout.
The basic rules for tables are as follows:
- Tables are defined with the <table> container tag.
- The <table> tag contains rows of cells, defined with the
<tr> container tag.
- Each <tr> tag contains data cells, defined with the
<td> container tag.
- Each data cell contains whatever you want - links, images, lists, or
even other tables.
Rows are defined from top to bottom, and cells are defined from left
to right. If you want lines to show up between the table cells, use the
border attribute in the <table> tag.
For example, the HTML code
<table border="1">
<tr>
<td>Top Left</td>
<td>Top Right</td>
</tr>
<tr>
<td>Bottom Left</td>
<td>Bottom Right</td>
</tr>
</table>
will be rendered as:
| Top Left |
Top Right |
| Bottom Left |
Bottom Right |
Table and Cell Widths
If you need to set specific sizes for the table or for the
cells, use the width attribute in the <table> and
<td> tags. Use either a percentage of browser or table width,
like <td width="20%"> or an absolute
pixel value like <td width=138>.
Cells that Span Multiple Columns or Rows
Use the colspan and rowspan attributes of the <td> tag to span more than one column across,
or more than one row deep.
<table border="1">
<tr>
<td rowspan=2>Entry 1</td>
<td>Entry 2</td>
</tr>
<tr>
<td>Entry 3</td>
</tr>
</table>
will be rendered as:
Aligning Cell Contents Within the Cells
To set the horizontal or vertical placement within the <td> tag, use the align and valign attributes, respectively:
- align can be left, right, or center.
- valign can be top, middle, bottom, or
baseline (aligned to baseline of the text).
You can also use the align and valign attributes in the
<tr> tag, to affect all cells in that row.
|
