APEX@IGP-FX
34
F11: Common Tables (table-rw)
Tables for structured content, presentation and layout
IGP:FoundationXHTML uses the standard XHTML equivalent table model inside appropriate named elements to give the table specific characteristics.
Tables are relatively easy to create, but have considerable production overhead to produce appropriate presentation quality. Tables inevitably require considerable “hand-crafting” in a number of areas such as column widths (always), header spans, alignment and border/background colours.
FX uses tables for layout of content only in exceptional circumstances where there will be no effect future reflow requirements, and/or there is no other reasonable structure to achieve the content communication purposes. An example of this is lines of parallel linguistic text in multiple languages, or structured lists which have table like presentation, but no table implied. Tables are also used in simple equations.
Default Presentation Styles
FX provides four default table presentation styles under common tables. These are a starting point for a range table presentation requirements:
- Classic. Standard serif text presentation with plain header rules.
- Modern. Standard sans-serif text presentation with shaded headers, and light row rules.
- Grid. Standard sans-serif presentation with full row and column rules.
- Layout. Standard bodytext containers with no rules or significant table generated spacing.
- Image Table. An image of a table is presented and manipulated as a table object.
Using a default presentation approach means tables come with basic styles applied, and primarily columns and layout are the outstanding item. The base set of four tables also allows extension for project/genre specific styles, especially where there are pre-defined column alignments such as in financial documents.
The combination of pre-defined presentation styles, and custom styles makes FX table generation and maintenance easier than in nearly any other environment, including some graphical styling environments.
Accessible tables
Accessibility is not a requirement for FX, but is often a requirement for the output. Therefore the <summary> element is mandatory to ensure tables validate with any XHTML 1.1 validation service.
More complex column structures to assist reading devices are optional and are a user/document specific issue.
Captions
Use of the XHTML caption element and related CSS properties is optional. There are sometimes conflicts with the rigidity of presentation formatting for very high quality presentation. It is the choice of the document designer whether they should use this and the positioning options available for this element. Additionally if the caption behaviour is going to be the same for figures, tables and other floating blocks, it is more economic to apply selectors to the <p class="caption"> structure rather than the table caption element.
Detail Table Styling
To allow detailed custom table styling a table ID is always required. Spot styling for any specific table should be carried out with the ID and specific selector.
The three parts of a table are handled separately. The <thead> and <tfoot> are optional and not always required. <tbody> is mandatory.
The class attributes follow a simple row / column pattern to allow columns, rows or cells to be easily targeted for specific styling. It is appropriate to use inline styles where required for spot style over-rides when styling a specific document.
This set of CSS selectors is easy to generate automatically at table creation or processing time, and allows the custom stying of any individual table to the cell level using various combinations of CSS selectors in combination with the table ID.
table-rw Standard Tagging Patterns
<table id="a1234">
<thead>
<tr class="hrow1">
<th class="hcol1"> ... </th>
<th class="hcol2"> ... </th>
</tr>
</thead>
<tfoot>
<tr class="frow1">
<td class="fcol1"> ... </td>
<td class="fcol2"> ... </td>
</tr>
</tfoot>
<tbody>
<tr class="row1">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
</tr>
<tr clss="row2">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
</tr>
</tbody>
</table>
hrow* Allows the styling of a specific header row, where * is the number of the target row.
hcol* Allows the styling of a specific header column where * is the number of the target column
row* Allows the styling of a specific body row, where * is the number of the target row.
col* Allows the styling of a specific body column where * is the number of the target column
frow* Allows the styling of a specific footer row, where * is the number of the target row.
fcol* Allows the styling of a specific footer column where * is the number of the target column
Table Content Object Structure
Tables are always placed in a named content block <div class="table-rw"> for content object control, even if they do not have any associated text such as a title or caption. The implication here is that a content table is more than just the table structure itself.
This allows the outer content object to handle the galley interaction, mainly galley width and alignment, consistently across documents. By default tables fill 100% of the width of their containing content block and are aligned in the center. Therefore a table element can never appear in the document <galley-rw> root.
Classic Table
The classic table is a generic academic styling. The default table without custom styling should have all header and column cells left aligned in output formats. The font is serif. Variations in styling can be made from this starting point.
table-rw classic-rw Standard Tagging Patterns
***** Basic Classic Table XHTML *****
<div class="table-rw classic-rw" id="ContentObject-01">
<h4>Table Title</h4
<table summary="Summary text" id="table1">
<thead>
<tr class="hrow1">
<th class="hcol1"> ... </th>
<th class="hcol2"> ... </th>
<th class="hcol3"> ... </th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
<tr class="row2">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
</tbody>
....
</table>
<p class=“caption-rw”><span class=“number”>1.2<span>. Table caption text</p>
<p class=“source-rw”> Source statement if text</source>
<p>any other paragraph text</p>
</div>
table-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
classic-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with or without number generators. This is optional
source-rw Source statements are common with tablular data. This is optional.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
table-rw classic-rw Standard Styling Patterns
/* ================================ */
/* F11: COMMON TABLES */
/* CLASSIC TABLE READER ===== */
.classic-rw table {
border-collapse: collapse;
font-size: 1em;
line-height: 1.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
border-top: 1px solid rgb(0,0,0);
border-bottom: 1px solid rgb(0,0,0);
}
.classic-rw table th {
font-weight: bold;
vertical-align: top;
padding: 0.25em 0.5em 0.25em 0.5em;
border-bottom: 1px solid rgb(0,0,0);
}
.classic-rw table td {
vertical-align: top;
padding: 0 0.5em 0 0.5em;
}
.classic-rw table tfoot td {
font-size: 0.8em;
line-height: 1em;
font-style: italic;
padding-top: 0.5em;
border-top: 0.1pt solid rgb(0,0,0);
}
.classic-rw tfoot td p {
text-indent: 0;
padding-bottom: 0.5em;
}
/* TABLE BOX & GENERAL PROPERTIES ===== */
div.table-rw {
display: block; text-align: left;
}
div.table-rw h4 {
font-size: 10pt; margin: 0 0 6pt 0; padding: 0;
}
div.table-rw p, div.table-float-rw p {
text-indent: 0;
margin: 0; padding: 0;
}
/* CLASSIC TABLE PRINT ===== */
.classic-rw table {
border-collapse: collapse;
font-size: 9pt;
line-height: 10pt;
margin: 6pt 0 6pt 0;
border-top: 0.5pt solid black;
border-bottom: 0.5pt solid black;
}
.classic-rw table th {
font-weight: bold;
text-align: left;
vertical-align: top;
padding: 0.25em 0.5em 0.25em 0.5em;
border-bottom: 0.25pt solid black;
}
.classic-rw table td {
text-align: left;
vertical-align: top;
padding: 0 0.5em 0 0.5em;
}
.classic-rw table td + td {
padding: 0 0.5em 0 0.5em;
}
.classic-rw table tfoot td {
font-size: 8pt;
line-height: 10pt;
font-style: italic;
text-align: left;
padding-top: 6pt;
border-top: 0.5pt solid black;
}
.classic-rw tfoot td p {
text-indent: 0;
padding-bottom: 0.5em;
}
Standard selectors are used with pseudo elements where practical for ease of maintenance.
When tables are linked, they are linked to content object ID rather than the table ID, which should only be used for styling. When tables are extacted or analyzed, it is recommended to use the content object rather than the table so it comes with its full context.
Modern Table
The modern table is a generic trade and retail styling. The default table without custom styling should have all header and column cells left aligned in output formats. The font is sans-serif.
table-rw modern-rw Standard Tagging Patterns
***** Basic Modern Table XHTML *****
<div class="table-rw modern-rw" id="ContentObject-01">
<h4>Table Title</h4
<table summary="Summary text" id="table1">
<thead>
<tr class="hrow1">
<th class="hcol1"> ... </th>
<th class="hcol2"> ... </th>
<th class="hcol3"> ... </th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
<tr class="row2">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
</tbody>
....
</table>
<p class=“caption-rw”><span class=“number”>1.2<span>. Table caption text</p>
<p class=“source-rw”> Source statement if text</source>
<p>any other paragraph text</p>
</div>
table-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
modern-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with or without number generators. This is optional
source-rw Source statements are common with tablular data. This is optional.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
table-rw classic-rw Standard Styling Patterns
/* ================================ */
/* F11: COMMON TABLES */
/* MODERN TABLE READER ===== */
/* TABLE BOX & GENERAL PROPERTIES ===== */
div.table-rw {
font-size: 0.9em;
line-height: 1.2em;
text-align: left;
margin-top: 1em;
margin-bottom: 1em;
}
div.table-rw h4 {
font-size: 1em;
margin: 0 0 0.5em 0;
}
div.table-rw p {
text-indent: 0;
padding: 0 0 0.5em 0;
}
.modern-rw table {
border-collapse: collapse;
font-family: sans-serif;
font-size: 0.9em;
line-height: 1.2em;
margin-top: 0.5em;
margin-bottom: 0.5em;
border-top: 1px solid #00008b;
border-bottom: 1px solid #00008b;
}
.modern-rw table th {
font-weight: bold;
font-style: normal;
background: #d3d3ff;
border-bottom: 1pt solid white;
padding: 0.2em 0.2em 0.2em 0.2em;
margin: 0;
}
.modern-rw table td {
vertical-align: top;
text-align: left;
border-bottom: 1pt solid #d3d3ff;
margin: 0;
padding: 0.2em 0.2em 0.2em 0.2em;
}
.modern-rw table tfoot td {
font-size: 0.8em;
line-height: 1em;
font-style: italic;
text-align: left;
padding: 0.5em;
border-top: 1px solid #00008b;
}
.modern-rw table tfoot td p {
text-indent: 0;
padding-bottom: 0.5em;
}
/* MODERN TABLE PRINT ===== */
/* TABLE BOX & GENERAL PROPERTIES ===== */
div.table-rw {
display: block;
text-align: left;
}
div.table-rw h4 {
font-size: 10pt;
margin: 0 0 6pt 0;
padding: 0;
}
div.table-rw p, div.table-float-rw p {
text-indent: 0;
margin: 0;
padding: 0;
}
.modern-rw table {
border-collapse: collapse;
font-family: sans-serif;
font-size: 8pt;
line-height: 10pt;
border-top: 0.5pt solid #00008b;
border-bottom: 0.5pt solid #00008b;
}
.modern-rw table th {
font-weight: bold;
font-style: normal;
text-align: left;
background: #d3d3ff;
border-bottom: 1pt solid white;
padding: 0.2em;
margin: 0;
}
.modern-rw table td {
vertical-align: top;
border-left: 0.5pt solid white;
border-right: 0.5pt solid white;
border-bottom: 0.5pt solid #d3d3ff;
margin: 0;
padding: 0.2em;
}
.modern-rw table tfoot td {
font-size: 8pt;
line-height: 10pt;
font-style: italic;
text-align: left;
background: white;
padding: 0.5em;
border-top: 0.5pt solid #00008b;
}
.modern-rw table tfoot td p {
text-indent: 0;
padding-bottom: 0.5em;
}
Standard selectors are used with pseudo elements where practical for ease of maintenance.
Grid Table
The Grid table is a generic data table styling, generally for larger data sets. The default table without custom styling should have all header and column cells left aligned in output formats. The font is sans-serif.
table-rw grid-rw Standard Tagging Patterns
***** Basic Grid Table XHTML *****
<div class="table-rw grid-rw" id="ContentObject-01">
<h4>Table Title</h4
<table summary="Summary text" id="table1">
<thead>
<tr class="hrow1">
<th class="hcol1"> ... </th>
<th class="hcol2"> ... </th>
<th class="hcol3"> ... </th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
<tr class="row2">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
</tbody>
....
</table>
<p class=“caption-rw”><span class=“number”>1.2<span>. Table caption text</p>
<p class=“source-rw”> Source statement if text</source>
<p>any other paragraph text</p>
</div>
table-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
grid-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with or without number generators. This is optional
source-rw Source statements are common with tablular data. This is optional.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
table-rw classic-rw Standard Styling Patterns
/* ================================ */
/* F11: COMMON TABLES */
/* MODERN TABLE READER ===== */
div.table-rw {
font-size: 0.9em;
line-height: 1.2em;
text-align: left;
margin-top: 1em;
margin-bottom: 1em;
}
div.table-rw h4 {
font-size: 1em;
margin: 0 0 0.5em 0;
}
div.table-rw p {
text-indent: 0;
padding: 0 0 0.5em 0;
}
/* grid table */
.grid-rw table {
border-collapse: collapse;
font-family: sans-serif;
font-size: 0.9em;
line-height: 1.2em; margin-top: 0.5em;
margin-bottom: 0.5em;
border: 1px solid rgb(128,128,128);
}
.grid-rw table th {
font-weight: bold;
font-style: normal;
vertical-align: top;
padding: 0.25em 0.5em 0.25em 0.5em;
border: 1px solid rgb(128,128,128);
}
.grid-rw table td {
vertical-align: top;
margin: 0;
padding: 0.25em 0.5em 0.25em 0.5em;
border: 1px solid rgb(128,128,128);
}
.grid-rw table tfoot td {
font-size: 0.8em;
line-height: 1em;
font-style: italic;
padding: 0.5em;
border-top: 1px solid rgb(128,128,128);
}
.grid-rw table tfoot td p {
text-indent: 0;
padding-bottom: 0.5em;
}
/* GRID TABLE ===== */
.grid-rw table {
font-family: sans-serif;
font-size: 8pt;
line-height: 10pt;
text-align: center;
border: 0.25pt solid gray;
border-collapse: collapse;
}
.grid-rw table th {
font-weight: bold;
font-style: normal;
vertical-align: top;
border: 0.25pt solid gray;
}
.grid-rw table td {
vertical-align: top;
border: 0.25pt solid gray;
margin: 0;
padding: 0.2em 0.4em 0.2em 0.4em;
}
.grid-rw table tfoot td {
font-size: 8pt;
line-height: 10pt;
font-style: italic;
padding: 0.5em;
border-top: 0.5pt solid gray;
}
.grid-rw table tfoot td p {
text-indent: 0;
padding-bottom: 0.5em;
}
Standard selectors are used with pseudo elements where practical for ease of maintenance
Layout table
IGP:Foundation XHTML counter indicates using tables for text layout issues or ad-hoc presentation and page structuring. Where a table is absolutely necessary for X-Y layout and content formatting, layout-rw can be used. Layout tables must not have captions or generated table numbers. Layout tables do not require a Content Object ID.
The layout table exists to allow the creation of pseudo columns if required. Conceptually there is no header row in a layout table so the first row would not be required. The layout table has all cells left-aligned and vertically aligned to the top. The text should be set to match the bodytext size, lineheight and font-face if it is to look like part of bodytext.
table-rw layout-rw Standard Tagging Patterns
***** Basic Classic Table XHTML *****
<div class="table-rw layout-rw" id="ContentObject-01">
<h4>Table Title</h4
<table summary="Summary text" id="table1">
<thead>
<tr class="hrow1">
<th class="hcol1"> ... </th>
<th class="hcol2"> ... </th>
<th class="hcol3"> ... </th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
<tr class="row2">
<td class="col1"> ... </td>
<td class="col2"> ... </td>
<td class="col3"> ... </td>
</tr>
</tbody>
....
</table>
<p class=“caption-rw”><span class=“number”>1.2<span>. Table caption text</p>
<p class=“source-rw”> Source statement if text</source>
<p>any other paragraph text</p>
</div>
table-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
layout-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with or without number generators. This is optional
source-rw Source statements are common with tablular data. This is optional.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
table-rw layout-rw Sample Styling Patterns
/* ================================ */
/* F11: COMMON TABLES */
/* LAYOUT TABLE READER ===== */
.layout-rw table {
border-collapse: collapse;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.layout-rw table td, .layout-rw table th {
font-size: 1.1em;
line-height: 1.2em;
vertical-align: top;
font-weight: normal;
padding: 0 0.5em 0 0;
}
.layout-rw table th + th, .layout-rw table td + td {
padding: 0 0 0 0.5em;
}
/* TABLE BOX & GENERAL PROPERTIES ===== */
div.table-rw {
display: block;
text-align: left;
}
div.table-rw h4 {
font-size: 10pt;
margin: 0 0 6pt 0;
padding: 0;
}
div.table-rw p, div.table-float-rw p {
text-indent: 0;
margin: 0;
padding: 0;
}
/* LAYOUT TABLE PRINT ===== */
.layout-rw table {
margin: 0.5em 0 0.5em 0;
border-collapse: collapse;
}
.layout-rw table td, .layout-rw table th {
text-align: left;
vertical-align: top;
padding: 0 0.5em 0 0;
}
.layout-rw table th + th, .layout-rw table td + td {
padding: 0 0 0 0.5em;
}
Standard selectors are used with pseudo elements where practical for ease of maintenance.
Tables as Images
In some documents it is appropriate or required to use tables as images. The basic element structure remains identical to the full table models and the image is inserted into the table area. Image orientation can also be specified. There is limited styling required with image tables.
The <img> element must have no controls on it. All flow and float control must be asserted from the <div class="table-rw"> container.
table-rw image-table-rw Standard Tagging Patterns
***** Basic Classic Table XHTML ***** <div class="table-rw image-table-rw" id="ContentObject-01"> <h4>Table Title</h4 <img src="table.png" alt="image table" /> <p class=“caption-rw”><span class=“number”>1.2<span>. Table caption text</p> <p class=“source-rw”> Source statement if text</source> <p>any other paragraph text</p> </div>
table-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
layout-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with or without number generators. This is optional
source-rw Source statements are common with tablular data. This is optional.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
table-rw image-table-rw Sample Styling Patterns
/* ================================ */
/* F11: COMMON TABLES */
/* IMAGE TABLE READER ===== */
.image-table-rw img {
width: 100%;
}
/* IMAGE TABLE PRINT ===== */
.image-table-rw img {
width: 100%;
}
© 2005-2012 Infogrid Pacific. All rights reserved.