News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

HTML Tutorial – 11 – Tables

Tables are used to structure content into rows and columns. A table is organized into rows using the table row <tr> tag. Each row is then split into table cells containing either header <th> or data <td> tags. The cells can be formatted separately and automatically expand to fit their content. They may also contain tables of their own.

<table>
 <tr> <th>Head</th> <td>Data</td> </tr>
</table>

For each of the inner table elements the end tag may optionally be left out.

<table>
 <tr> <th>Head <td>Data
</table>

The table’s border attribute specifies the width of the border in pixels, which is 0 by default for most browsers.

<table border="5"></table>

The frame attribute specifies which outside borders are displayed.

<table border="5" frame="void"></table>

Allowed values are: void, above, below, hsides, lhs, rhs, vsides, box and border.

ValueDescription
voidNo borders
box, borderAll borders
hsidesTop and bottom borders
vsidesLeft and right borders
aboveTop border
belowBottom border
lhsLeft border
rhsRight border

The rules attribute controls the borders between the cells. The width of the rules is not decided by the border attribute, but by the table’s cellspacing.

<table border="5" rules="none"></table>

Allowed values are: none, groups, rows, cols and all.

ValueDescription
noneNo lines
allLines between rows and columns
groupsLines between row groups and column groups
rowsLines between rows
colsLines between columns

The bordercolor attribute can be set for any table elements to change the color of the surrounding borders.

<table bordercolor="red"></table>

Cellspacing is the space between the table cells. Cellpadding is the space between the cell border and its contents. Both of these attributes can be specified in either pixels or percentage. When specified by percentage the browser uses half of the specified percentage for each side of the cell.

<table cellspacing="0" cellpadding="0"></table>

The width attribute specifies the width of a table cell or of the table itself. The height attribute specifies the height of a table cell. Width and height can be specified in either pixels or a percentage of the containing element’s width or height. Note that the width only needs to be set for one cell in a column in order to affect the other cells in that column. Similarly, adjusting the height of a cell will also affect the other cells in that row.

<table width="50%" height="100"></table>

The background and bgcolor attributes can be used to add a background image or color to any table element.

<table background="bg.png"></table>
<table bgcolor="blue"></table>

Cells may span multiple rows and columns by using the rowspan and colspan attributes. The colspan attribute stretches a table cell across several columns.

<table>
 <tr> <td colspan="2"></td> </tr>
 <tr> <td></td> <td></td> </tr>
</table>

The rowspan attribute stretches a cell across multiple rows in the table.

<table>
 <tr> <td></td> <td rowspan="2"></td> </tr>
 <tr> <td></td> </tr>
</table>

Align controls the horizontal alignment and can be added to all table elements to force center, left or right alignment. The table cells can also be aligned with justified.

<table align="center"></table>

Valign can set the vertical alignment of table cells and rows to align the content at the top, middle, bottom or baseline.

<table>
 <tr> <td valign="baseline"></td> </tr>
</table>
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours