Table styles in HTML output

When outputting HTML, the stylesheets assume that most styling will be handled by an external CSS stylesheet. For that reason, there are no XSL attribute-sets to add properties to the HTML table cells as there are with FO tables.

If your DocBook table has a tabstyle attribute, then its value it passed to the HTML output table as a class attribute. For example, if you have a DocBook table with a tabstyle="styleA" attribute, then you can use a CSS selector such as table.styleA to apply styles to it.

DocBook XSL has another feature that lets you apply HTML styles to individual table cells. You can add a role attribute value to any entry element in your DocBook table. The role value will be transferred to a class attribute on the corresponding HTML TD table cell. Then you can write a CSS stylesheet that includes a selector for such elements that can apply any of the HTML styles to the cell. You can create any number of role values and assign styles to them. The following is an example that marks entries in the first column with a role attribute so they can be styled in bold, as for when you need a row heading.

<title>HTML styles</title>
<tgroup cols="4">
  <entry role="rowhead">Row heading 1.1</entry>
  <entry>Entry 2.1</entry>  
  <entry>Entry 3.1</entry>
  <entry>Entry 4.1</entry>
  <entry role="rowhead">Row heading 1.2</entry>
  <entry>Entry 2.2</entry>  
  <entry>Entry 3.2</entry>
  <entry>Entry 4.2</entry>

The following CSS stylesheet entry will apply the bold style to those table cells:

TD.rowhead { font-weight: bold ; }

You can turn this feature off if you do not want entry role values output as class attributes. Just set the stylesheet parameter to zero (its default value is 1).

Another feature of the HTML stylesheets permits you to add a class attribute to individual table rows. This is useful when certain rows act as subdivision labels in a table.

To add a class attribute to a table row, add a dbhtml class processing instruction to the row element:

<row><?dbhtml class="subhead"?>

When processed, this will result in <tr class="subhead">. That class value can then be used in a CSS selector to style the subdivider rows.