Understanding HTML tables Part 4

Borders		width		cellpadding		background images		rowspan
alignment		height		cellspacing		background colour		colspan

Table Attributes

continued...

Width

height can be set in pixels or percentage.

if the table is set to a percentage, it will be a percentage of the page ie will be 30% of the width of the page.
if the data cell is set to a percentage, it will be a percentage of the table. If no table width has been set, then the table will end up twice the width of the contents of the data cell.

setting the width of the table to 400 px

setting the width of the table to 400 px and the data cell to 200 px.

setting the width of the table to 400 px and the data cell to 200 px. Note that the data doesn't span across the whole width of the table.

Height

height can be set in pixels or percentage.

if the table is set to a percentage, it will be a percentage of the page ie will be 30% of the height of the page.
if the data cell is set to a percentage, it will be a percentage of the table. If no table height has been set, then the table will end up twice the height of the contents of the data cell.

setting the height of the table to 200 px

setting the height of the
table to 200 px

setting the height of the data cell to 200 px forces the size of the table to 200 px if it's not set.

setting the height of the
data cell to 200 px forces the size of the table to 200 px if it's not set.

Alignment

align=	valign=
left center right	top middle bottom

aligns the contents of the table (the data cells) to the left. Use the same format for the 'center' and 'right' attributes.

aligns the contents of each of the data cells in the row to the left. Use the same format for the 'center' and 'right' attributes. This saves having to set each data cell in the row.

aligns the contents of the data cell to the left. Use the same format for the 'center' and 'right' attributes.

vertically aligns the contents of the table (the data cells) to the top. Use the same format for the 'middle' and 'bottom' attributes.

aligns the contents of each of the data cells in the row to the top. Use the same format for the 'middle' and 'bottom' attributes. This saves having to set each data cell in the row.

vertically aligns the contents of the data cell to the top. Use the same format for the 'middle' and 'bottom' attributes.

aligns the contents of the table cell to the bottom center.

aligns the contents of each of the data cells in the row to the bottom center. This saves having to set each data cell in the row.
		aligns the contents of the data cell to the bottom center.

Next: Backgrounds in your tables