Styling Tables

Heights and Widths of Tables

Control the height and width of table, and cells, there are two properties to use, rather obviously called height and width.

To control...

• the height and/or width of an entire table, declare these properties in the table rule, or in a class applied to a table.
• the width of a column in a table, declare the width property in a class and apply it to the opening td tag for the top cell in the column - the whole column will be affected.
• the height of a row in a table, declare the height property in a class and apply it to the opening row tag for the row, or the opening td tag for the first cell in the row - the whole row will be affected.

You can specify the values in the width and height properties using either absolute units (px, cm, etc) or relative measurements (usually a % of the page for table width, and % of the table for columns, or cells).

Centering Tables

Centering objects on a web page is one of the most problematic style commands to accomplish. It seems that you should be able to apply a class containing the text-align property set to center, but this does not work.

The most successful method I have found is to enclose the table in a div element and apply a class with a declaration to center text-align the div element.

Vertical Alignment in Table Cells

Often, you wish to have the contents of a table cell align in a different way than the default of left and vertically centered. You have already learned, in the Text lesson, how to align cell contents horizontally. It is also possible to align the contents vertically (top to bottom in the cell).

The property to align cell contents vertically is: vertical-align. There are three main values this property can have:

• top - aligns the content at the top of the cell
• middle - aligns the content equally spaced between the top and the bottom of the cell
• bottom - aligns the content at the bottom of the cell

Cell Padding

Using the padding properties for tables or cells adds space between the cell contents and the cell borders. This padding will be added to any height or width you have set.

Padding may also be added to individual rows or cells, so you may apply different padding amounts in different parts of the table. You can also place a paragraph or other element inside any cell and control the padding and margins on that element.

Padding properties are used the same way as for the box model, as each cell is literally a box. You can control each of the four sides individually, or use the shorthand property to control all padding in the same declaration.

Using Borders

Borders can also be applied to cells the same way as in boxes. Normally, when borders are applied to the cells in a table, each individual cell has its own border the on four sides of the cell, creating the look of a double border with a small amount of space between the cells and a single border around the outside. This is what your table looked like in Lesson 2 when you set some table borders. But this is often not the look you want.

There is a additional property that can make single-line borders on a table: border-collapse.
There are two values for this property: separate (the default) and collapse. Collapse has the effect of 'collapsing' the space between the separate borders so that what appears is a single border between the cells.
This property should be applied to the opening table tag.

Adding a border to the table element results in only a border around the outside of the table. To put a border on individual cells, you must apply the border properties to the cells.

Below is a reference for all table spacing properties, showing the possible values.