Control table appearance with CSS

by Tony Patton | Feb 26, 2007 8:00:00 AM

Tags: Tony Patton, Listing B, CSS, HTML, Web Development Zone Newsletter

Takeaway: The final installment of the three-part series on styling HTML table elements with CSS concludes with a focus on spacing and table layout.

My previous columns covered how to organize data with HTML tables and control style table borders with CSS. This week, I conclude this three-part series with an examination of spacing issues and overall table layout.

Box model

CSS rectangular boxes are generated for all elements in the document tree. This is called the CSS box model. Each box has a content area and optional surrounding padding, border, and margin areas. You need to keep this box model in mind when working with CSS and HTML elements.

Spacing

With HTML tables, you can easily define the padding and margins by specifying these in the CSS rules. The key issue is the margin only applies to the overall table and not individual rows, columns, or cells.

Weekly development tips in your inbox

Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday.

Automatically sign up today!

The HTML in Listing A presents a table with the margins and cell spacing defined via CSS. The padding and margin properties can be defined individually (left, right, top, and bottom), along with the syntax in the previous example that defines one margin for all sides of the element.

Listing B defines separate values. Also, you'll notice the use of the width property for the entire table. This allows you to easily define the size of the table.

Alignment

Along with controlling spacing, you can also control the alignment of data within individual table cells. There are two alignment options: vertical and horizontal. These correspond to the align and valign properties for the HTML TD elements. You can use the CSS text-align property to horizontally align cell data and the vertical-align property to control vertical placement. The following snippet demonstrates both properties in action.

TD, TH { text-align: center; vertical-align: middle;}

The vertical-align property has the following possible values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, and length; you can specify a percentage value that takes a percentage of the line height. The text-align property is simple with possible values of left, right, center, and justify.

Controlling display

As with all HTML elements, you can control whether an item is visible on the Web page via the CSS display property. The following HTML table-related display values are valid:

table: This corresponds to a block-level HTML TABLE element.
inline-table: An inline-level HTML TABLE element.
table-row: A row of cells within a table (TR element).
table-row-group: A group of one or more table rows (TBODY element).
table-header-group: A group of rows displayed at the top of the table rows and after its caption (THEAD element).
table-footer-group: A group of rows displayed after all other rows or row groups (TFOOT element).
table-column: A column of cells in the table (COL element).
table-column-group: A group of columns in a table (COLGROUP element).
table-cell: This corresponds to individual cells within a table (TD element).
table-caption: The table's caption (CAPTION element).

You can use these display properties to control what aspects (if any) of an HTML table are visible. For example, you can set the display property to none to hide an element. Listing C uses these values to control the visibility of their respective HTML elements.

The interesting aspect of using these display values is displaying any element as a table. That is, you can use the table display properties to make any element act like a table. It is as simple as assigning the appropriate display value.

Use accordingly

The HTML specification includes tables to work with tabular data, but many developers still rely on tables for page layout. I know a lot of developers that view HTML tables with disdain, but tables are applicable in various situations. Regardless of the purpose, table elements may be combined with CSS to control the look and feel of a site.

Do you utilize CSS to style your tables, or do you still use tables to markup your pages? Share your experiences with the Web development community.