From DM

Revision as of 14:45, 19 February 2012 by DominiqueS (Talk | contribs)
Jump to: navigation, search

The table is a structural unit made up of rows, columns, or cells that is used to display relationships graphically among disparate pieces of information. Most (probably all) markup languages have a relevant element, although the precise definition and syntax for the element can vary. A good discussion of issues involved, can be found in the TEI P4 Guidelines, §§ 22.1 and following.

Tables are closely related to Lists which share many features.


Source documents


In print, tables commonly begin on a new line and end with a line boundary. They may or may not have border lines between rows, columns, or cells. Individual rows, columns, or cells may or may not have contrasting colored backgrounds. Tables commonly have a header row and/or header column which indicates the nature of the information displayed.

Individual cells in a table may consist of a single line of text, or less often but still frequently, paragraph(s) or line(s) of verse or code.

Tables may appear as part of paragraphs, or as discrete structural elements.


In electronic documents, tables commonly have two additional functions: they are the core organisational structure of relational databases and spreadsheets, and they are commonly (though incorrectly) used to achieve layout effects such as columns in webpage design. This latter usage is strongly discouraged by most structural markup DTDs.


Tables are less commonly found in manuscripts, though they do occur. Lists are more common.

Structural encoding

Most structural markup languages contain an element for table (e.g. XHTML <table>, TEI <table>) and components.


In (X)HTML, tables are encoded using the following elements:

<table>: table
<tr>: table row
<td>: table data (cell)

Cells that extend across several rows and/or columns are indicated using the colspan, and rowspan attributes of the cell (<td>) element, e.g.

<td colspan="2"> : indicates that the cell is two columns high.
<td rowspan="2"> : indicates that the cell is two rows high.

Most visual commercial browsers render paragraphs by default as left-justified blocks without borders. The appearance of this and most other elements can also be controlled by external (e.g. CSS stylesheets. See Stylesheets, below).


In TEI XML (P4), paragraphs most commonly are encoded using the following structural elements:

 <table>: table
 <row>: table row
 <cell>: table cell

Cells that extend across several rows and/or columns are indicated using the cols, and rows attributes of the cell element, e.g.

<cell cols="2"> : indicates that the cell is two columns high.
<cell rows="2"> : indicates that the cell is two rows high.

Most commercial browsers do not have a default stylesheet for this or any other TEI element (although they may render it as the XHTML equivalent). Its display characteristics, therefore, must be controlled by stylesheets, either directly (i.e. using a formatting style language such as CSS or XSL-FO or indirectly, after conversion to XHTML for display.

Style sheets


Several CSS properties control the appearance of tables elements; the most important include

  • display
  • border (border-top, border-bottom, border-left, border-right, etc.)
  • background-color


display is used to control whether the element is displayed as a block, in-line, etc. There are two relevant values for table display are

table : displays table as block (beginning on new line and ending with carriage return)
inline-table : allows table to appear within the line of a paragraph or equivalent.

Most tables are blocks. All current browsers use table for the default value.


The border property is short hand for a number of related display properties (e.g. line size, color, position, and style). It is used when a uniform border is to enclose the element as a whole, e.g.

  • "Place a thin, solid border in the same color as the text around each cell"
td {
 border: thin solid auto;

If borders are required only on certain sides of an element, the properties border-top, border-bottom, border-left, border-right are used, e.g.

  • "Place a thin, solid border between columns"
td {
 border-left: thin solid auto;
 border-right: thin solid auto;
 border-collapse: collapse;

Note: border-collapse:collapse ensures that only one line appears between columns; if the property is not set, each cell will have its own left and right border (meaning that each column would be separated by two lines rather than one).

border properties are not inherited: setting the border for a table element will not place borders around individual cells.


background-color sets the background color of the element to which it is assigned, e.g.

  • Set the background color of cells with the class attribute odd_column to red:
td.odd_column {
 background-color: red
  • Set the background color of rows with the class attribute even_row to blue:
tr.even_row {
 background-color: red
  • Set the background of the entire table to red:
table {
 background-color: red





Personal tools