5.0 Tables - General Properties

The hard work can be taken out of the styling and layout out HTML tables by using CSS. For starters there are some properties that can be used on many other HTML elements that are also useful with tables:

PropertyFunction
borderDefines the border of the table / cell borders
paddingDefines the padding of the table / cell borders
text-alignSpecifies horozontal text alignment
vertical-alignSpecifies vertical text alignment

Border

The border property can be used for defining border colours, thicknesses and style for table and cell borders. To do this we can simply use table tags as selectors. For example:

table	{border:1px solid #00ffee;}

th	{border:1px solid #00ffee;}

td	{border:1px solid #00ffee;}

Padding

The padding property can be used for defining padding around the table itself and the cells, and in the second case this property replaces the HTML cellpadding attribute. For example:

table	{padding:15px 25px 15px 25px;}

th	{padding:5px;}

td	{padding:5px;}

Text Align

The text-align property positions the contents of a table cell in the horizontal direction. This property replaces the old HTML align attribute and can also be used on other elements and applies to the contents of any block-level element - it doesn't need to be text. There are four basic values:left, right, center or (default) justified. For example:


th	{text-align:center;}

td	{text-align:left;}

Vertical Align

The vertical-align property positions the contents of a table cell in the vertical direction. This property replaces the old HTML valign attribute and can also be used on other elements. The three basic values are: top, middle (default) and bottom. For example:


th	{vertical-align:middle;}

td	{vertical-align:right;}