CSS Cookbook/Tables

Tables and Table Entries

Tables cause immense labor for both proofers and post-proofers. Guiguts has extensive support for working with tables in the ASCII text. It also provides some aids for converting tables to HTML markup. With the basic HTML markup done, you can use CSS to style all tables or particular kinds of tables. Here we'll look at the rules in the Cookbook styles.

Table Width and Centering

You set the width of an entire table with the width property. You could set that in the CSS styles if all (or most) tables in the book are the same general layout on the page.

You set the width of a single table by coding an explicit style declaration:

<table style="width:85%">

When a table is less than 100% width and you want it to be centered, enclose it in a centering div:

<div class="center">
  <table style="width:50%">
</div>

The Cookbook styles include this rule:

.center table { margin-left: auto; margin-right: auto;  text-align: left; }

The center class rule sets text-align:center. A table in such a div would inherit that, causing all its cell contents to be centered. The rule above applies to tables enclosed in a centered div. It sets auto left and right margins so that the table is centered, but it overrides the text alignment to set the preferred left-alignment for the table's contents. (Note that justified alignment is a dubious choice in a table because browsers have difficulty justifying text in narrow columns.)

Table Shape

One Cookbook style rule applies to all tables.

table {	/* these affect all <table> elements */
	margin-top: 1em;	/* space above the table */
	caption-side:		/* top; or */ bottom ;
	empty-cells: show;	/* no need for nbsp's in empty cells */
}

This rule sets a top margin that will bring a table fairly close to the preceding text (modify as necessary for your common case). It also sets the caption-side property. That specifies whether the table caption (encoded with the little-known <caption> element inside the table) will be displayed on the top or the bottom of the table. Finally it sets the empty-cells property to show. This makes the browser pretend there is at least an &nbsp; in any empty or omitted table cell, eliminating the annoyance that empty cells have no borders.

If most tables in your book are the same size, you could put their common width property in this rule as well.

Table Borders

You can control some features of table borders in CSS. One property worth knowing is border-collapse, which reduces the borders around cells from double lines to single ones. In the default table, the border around each cell is spaced a small distance away from the borders of the adjacent cells, producing a double line.

default borders	default borders
default borders	default borders

When you specify border-collapse:collapse; borders of adjacent cells are combined, producing a single line. Borders are collapsed only when they are identical as to color and width, but that is the usual case in adjacent table cells.

border-collapse:collapse	border-collapse:collapse
border-collapse:collapse	border-collapse:collapse

You could specify this property for all tables, or as part of a particular class of tables, or as explicit styling on a particular <table> element.

When borders are not collapsed, you can specify the amount of spacing to be used between adjacent cells with the border-spacing property.

default borders	default borders
default borders	default borders

 

border-spacing:1px	border-spacing:1px
border-spacing:1px	border-spacing:1px

 

border-spacing:4px	border-spacing:4px
border-spacing:4px	border-spacing:4px

Table Text

The following rule is meant to style all text that appears in the body cells of a table:

td, td > p {	/* style all text inside body cells */
	margin-top: 0.25em;	/* compact vertical.. */
	line-height: 1.1em;	/* ..spacing */
	font-size: 90%;		/* smaller than book body text */
}

Typically you want table text to be more compact than body text. When table entries consist of single lines or sentences, you enclose their text in <td>..</td>. However, an item might contain two or more logical paragraphs, in which case you use <p> markup inside the <td>. The rule above is written to apply to both table cells and to paragraphs within table cells, so that text in the table will be styled the same way, whether the cell contains <p> elements or not.

In the unlikely event that you have tables whose cells contain lists also, you could add a selector td > li to the rule.

Headers and Footers

Heading and Footing rows in a table are marked with the <thead and <tfoot elements.

thead td, tfoot td {	/* header/footer cells: center & bold */
	text-align: center;
	font-weight: bold;
	/* background-color: #ddd;  optional: gray background */
}

It might be that your tables use left-aligned headings, or small-cap styling of the headings; or you might want a color shade behind them. Make the obvious changes.

Styling Rows and Cells

If you book makes heavy use of tables, look for consistent use of special styling and write a class-rule to cover it. Then insert class=name" in those rows or cells.

One class is provided to make it easy to put a light-gray background shade on a cell or a row.

table .shade { /* class="shade" applied to <tr> or <td> */
	background-color: #ddd;
}

Styling Columns

The HTML model of a table is row-oriented. You can apply styles to an entire row using <tr class="name"> or with explicit styles, <tr style="text-align:center;">.

It would be very convenient if one could apply a consistent styling to all the cells of a given column as well, for example to right-justify a column of decimal values. Alas, although the HTML standard defines a method for exactly that, it is unsupported by most browsers (see discussion here).

The only way to apply a style to the cells of a column is to insert styling into every cell using <td class="name"> or <td style="whatever">. You could write a very specific style for this situation; for example, if you had several tables (or one very long table) in which a column was right-aligned, lightly shaded, and needed to be bottom-aligned in the cell, you could add a rule

td.x {
	text-align:right;
	vertical-align:bottom;
	background-color:#EEE;
	}

and then insert class="x" into each <td> in the column.