When the automatic table layout algorithm is used, all contents of the table will be processed to determine the table width and its column width.
The automatic table layout algorithm is used in the following situations:
table-layout
property is
auto
; or
width
property is
auto
, regarless of the
value of the table-layout
property.
The basic rules used by Prince can be summarised as follows:
width
has value auto
,
and if the table fits in the container when using maximum column widths,
then maximum column widths will be used.
Otherwise, minimum column widths will be used,
but they will be adjusted, if the sum of them is smaller than the specified the
table width or the container width,
so that the table can take up as much space as possible.
When the fixed table layout algorithm is used, the table column widths are determined by their specified widths or by the remaining space available, regardless of their contents.
The fixed table layout algorithm is used in the following situations:
table-layout
property has a value
fixed
,
and
width
property is not
auto
table {
table-layout: fixed;
width: 90%
}
Note that if the width
property has value
auto
(which is the default value), the table-layout
property
will be ignored and automatic table layout will be used instead.
The basic rules used by Prince are as follows:
When the border-collapse
property is set to
separate
,
a table can have separate borders around individual cells.
The space between table cell borders is determined by the value of its
border-spacing
property.
CSS
table {
border-collapse: separate;
border-spacing: 5px;
border: solid 3px black
}
td { border: solid 1px red }
td.dash-blue { border: 2px dashed blue }
td.solid-green { border: 2px solid green }
Output
A | B | C |
D | E | F |
G | H | I |
Note that by default,
the value of border-collapse
is
separate
.
When the CSS property border-collapse
is set to
collapse
,
each edge of each cell resolves its final border style and border width
based on certain rules.
CSS
table {
border-collapse: collapse;
border: solid 3px black
}
table td { border: solid 1px red }
td.dash-blue { border: 2px dashed blue }
td.solid-green { border: 2px solid green }
Output
A | B | C |
D | E | F |
G | H | I |
Note that the border-spacing
property is not used
in the collapsing table border model.
The rules used by Prince for choosing the "winner" border are as follows:
hidden
,
it beats those with other border styles;
none
, it
loses to those with other border styles;
solid
,
dashed
then dotted
;
Prince table cells that span multiple columns using the
table-column-span
CSS property, which
takes an integer value and is set to 1 by default.
CSS
td.colspan2 { table-column-span: 2 }
XML
<td class="colspan2"> B </td>
Output
A | B | |
C | D | E |
Prince supports table cells that span multiple rows using the
table-row-span
CSS property, which takes
an integer value and is set to 1 by default.
CSS
td.rowspan2 { table-row-span: 2 }
XML
<td class="rowspan2"> A </td>
Output
A | B | C |
D | E |
If you want to number table rows in a table, but there are just too many rows to number by hand, or if the document is dynamically generated and hand numbering is impossible, CSS counters and generated content can help you out:
CSS
table { counter-reset: row }
tr { counter-increment: row }
tr::before {
content: counter(row);
display: table-cell
}
HTML
<table>
<tr><td>The First Table Row</td></tr>
<tr><td>The Second Table Row</td></tr>
<tr><td>The Third Table Row</td></tr>
</table>
Output
1 | The First Table Row |
2 | The Second Table Row |
3 | The Third Table Row |
As pseudo-elements only inherit inheritable properties from the element they are attached, non-inheritable properties, such as display and border properties, need to be explicitly set in the pseudo-elements.
When a table spans across more than one page, it might be desirable to have a "running" table header and footer so that they can be carried on to all the subsequent pages on which the table appears.
<table>
<thead>
<tr> <td>Name</td> <td>Mark</td> <td>Grade</td> </tr>
</thead>
<tr> <td>Xuehong</td> <td>95</td> <td>H1</td> </tr>
<!-- other rows for other students -->
<tfoot>
<tr> <td>Name</td> <td>Mark</td> <td>Grade</td> </tr>
</tfoot>
</table>
Rows inside the thead
element are used as a running table header.
Rows inside the tfoot
element are used as a running table footer.