Table Border Sizes

Table with a border size of 1:

Table with a border size of 3:

Table with no borders:

Cell Spacing

Table with a cell spacing of 5:

Cell Padding

Table with a cell padding of 5:

Table and Text Alignment

style="float:right"

The following table has an attribute of style="float:right". Notice the text wraps around it similar to the way it wraps around images with the <img> tag. Also note that is the text after the <table> tag that is aligned, not before it.

The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.

Table sizing

Table Width

Table Width by Percent

Here is a table sized at 50% of the width of the screen. Note this doesn't mean the columns will be equally sized.

Table Width by Pixels

Here is a table sized at 400 pixels of the width of the screen. This is close to 50% for most monitors ... assuming most monitors are sized for 800 x 600 pixel resolution. But how would this be rendered if the monitor could display more or less resolution?

Table Height

Table Height by Percent

Here is a table sized at 50% of the height of the screen. Note this doesn't mean the rows will be equally sized.

Table Height by Pixels

Here is a table sized at 300 pixels of the height of the screen. This is close to 50% for most monitors ... assuming most monitors are sized for 800 x 600 pixel resolution. But how would this be rendered if the monitor could display more or less resolution?

Column Sizing

The following table has three columns, with the first row 30% of the table width, the next 20% of the table width, and the last with "*", which means whatever space remains. Note that since I did not specify a table width, the browser first figures out how wide the table should be, then sets the column size based on the calculated width of the table. Also note that if I specify a width parameter for more than one column, the browser gets to figure out if it which value it should use.

This table uses column widths of 100 and 75 pixels, but the table width is also set to 100%, making the last column the widest.

Here is the same table width the same information except the table width is not specified. Notice the difference.

Table Background Colors

Table with a background color of Yellow. Note the bgcolor attribute is deprecated, so styles should be used.

Table cell colors

Table with a header background color of Green, a default row background colors of Hotpink, Orange and Snow, except Row 2, Column 2 has overridden the default color and specified Tan. Note the bgcolor attribute is deprecated, so styles should be used.