table element

This article explains the XML tags which can be used to specify tables.

Table

A table element has several optional attributes:

• "caption": specifies the caption of the table (by default a table has no caption)
• "sortable": specifies if the table header has arrows to sort the columns (by default a table is not sortable)
• "borders": specifies if the table has borders (by default a table has borders)
• "vertical": specifies if the table is vertical (by default a table is vertical)
• "float": a boolean attribute indicating that the table is float (on the same column as the text)
• "position" or "align": specifies the position of the table, which can be "left", "center", or "right" (by default the position of the table is center)
• "padding": specifies the padding of the table for each cell, which can be "small", "normal", or "large" (by default the padding is normal)
• "width": specifies the width of the table
• "fixedLayout": specifies if the layout of the columns is fixed. See fixedLayout attribute for more information

The "table" element allows to define a Table. A table must have the following children:

• "tableHeader" which will define the columns in the table.
• The header will have one "column" child for each column
• The header can be defined to be vertical
• several "row" elements which will define the rows in the table.
• The row will have one "cell" child for each cell in the row. Each cell contains its content, and can have a background color if using the "color" attribute

Table width

The "width" attribute allows to set the table width. For example:

   <table width="80%">

Sortable tables

A table has sortable columns if it has the attribute "sortable" with the value true. For example:

   <table caption="table caption" sortable="true">

fixedLayout attribute

The "fixedLayout" attribute allows to specify that the table layout is fixed and words are allowed to be wrapped in cells. It is equivalent to the following specification:

  table-layout:fixed;
  word-wrap: break-word;

For example suppose the following table specification:

   <table width="50%">
      <tableHeader>
         <column width="30%">column 1</column>
         <column width="70%">column 2</column>
      </tableHeader>
      <row>
         <cell>the_very_long_name_which_will_take_all_the_place</cell>
         <cell>the value with should be on a large width</cell>
      </row>
      <row>
         <cell>name</cell>
         <cell>value</cell>
      </row>
   </table>

We will have the following result:

column 1	column 2
the_very_long_name_which_will_take_all_the_place	the value with should be on a large width
name	value

But if we have the following table specification:

   <table width="50%" fixedLayout="true">
      <tableHeader>
         <column width="30%">column 1</column>
         <column width="70%">column 2</column>
      </tableHeader>
      <row>
         <cell>the_very_long_name_which_will_take_all_the_place</cell>
         <cell>the value with should be on a large width</cell>
      </row>
      <row>
         <cell>name</cell>
         <cell>value</cell>
      </row>
   </table>

We will have the following result, respecting the columns relative width:

column 1	column 2
the_very_long_name_which_will_take_all_the_place	the value with should be on a large width
name	value

Table alignment

Several attributes allow to specify the alignment of the table:

• "position": specifies the alignment of the table.
• "left" (the default) for tables aligned to the left
• "right" for tables aligned to the right
• "center" for centered tables
• float": a boolean attribute indicating that the table is float (on the same column as the text)

For example, a table aligned to the right:

   <table caption="table caption" position="right">
      <tableHeader>
         <column>first column</column>
         <column>second column</column>
      </tableHeader>
      <row>
         <cell>name</cell>
         <cell>value</cell>
      </row>
      <row>
         <cell>name2</cell>
         <cell>value2</cell>
      </row>
   </table>

For example, a float table:

   <table float="true" position="right">
      <tableHeader>
         <column>first column</column>
         <column>second column</column>
      </tableHeader>
      <row>
         <cell>name</cell>
         <cell>value</cell>
      </row>
      <row>
         <cell>name2</cell>
         <cell>value2</cell>
      </row>
   </table>

Tables without borders

It is possible to have a table without any borders between cells if the table has the attribute "borders" with the value false. This can be useful for example to show several images on the same line.

For example:

   <table borders="false">
   <row>
      <cell><img id="image1"/></cell>
   </row>
   <row>
      <cell><img id="image2"/></cell>
   </row>
</table>

Tables rows padding

You can specify the "padding" attribute to control the padding between rows, relative to the content of the rows.

This attribute has three possible values:

• "default": the default value
• "small": specifies a small padding for rows
• "large": specifies a large padding for rows

The following example specifies a small padding for rows:

  <table padding="small">
     <row>
        <cell>my cell</cell>
     </row>
     <row>
        <cell>my other cell</cell>
     </row>
  </table>

With the following result:

my cell

my other cell

The following example specifies a large padding for rows:

   <table padding="large">
      <row>
         <cell>my cell</cell>
      </row>
      <row>
         <cell>my other cell</cell>
      </row>
   </table>

With the following result:

my cell

my other cell

Children elements

tableHeader element

The tableHeader element define the columns in the table:

• The header will have one column child for each column
• The header can be defined to be vertical

A tableHeader element has one optional attribute:

• "vertical": specifies if the table is vertical (by default a table is horizontal)

For example here is a table declaration with two columns:

   <table>
      <tableHeader>
         <column>column 1</column>
         <column>column 2</column>
      </tableHeader>
   </table>

column element

The column element is a child of the tableHeader element. It defines one column in the table.

A column element has one optional attribute:

• "colspan": the span of the column
• "width" specifies the width of the column. Note that the width of the column is relative to the parent element, so if you specify a width for columns, you should define a width for the table itself (see Table width)
• "align" specifies the alignment of the cells in the column. Can be "left", "right", or "center"

For example:

   <table>
      <tableHeader>
         <column width="30%" align="center">Type</column>
         <column width="70%">Content</column>
      </tableHeader>
   </table>

For example:

   <table>
      <tableHeader>
         <column width="10%" align="center">first column</column>
         <column width="40%" align="left">second column</column>
      </tableHeader>
      <row>
         <cell>name</cell>
         <cell>the cell text</cell>
      </row>
      <row>
         <cell>name2</cell>
         <cell>the second cell text</cell>
      </row>
   </table>

Will have the following result:

first column	second column
name	the cell text
name2	the second cell text

row element

The row element define each row in the table.

This element has several optional attributes:

• "color" specifies the background color of the cells in the row
• "borders" specifies if the row has a border between its cells. By default borders are present
• "borderTop" specifies the style of the top border of the row
• "borderBottom" specifies the style of the bottom border of the row
• "widths" specifies a list of custom widths for the row cells

For example:

      <table>
         <row color="green">
            <cell>name</cell>
            <cell>the cell text</cell>
         </row>
         <row borders="false">
            <cell>name2</cell>
            <cell>the second cell text</cell>
         </row>
      </table>

Will have the following result:

name	the cell text
name2	the second cell text

Bottom and top border of a row

The "borderTop" and "borderBottom" attributes specify the style of the bottom and top border of each row. The possible values are:

• "false" or "none": no border
• "true" or "solid": solid border (one solid line)
• "dotted": dotted border
• "dashed": dashed border

For example:

   <table>
      <tableHeader>
         <column>first column</column>
         <column>second column</column>
      </tableHeader>
      <row borderBottom="dashed">
         <cell>name</cell>
         <cell>the cell text</cell>
      </row>
      <row>
         <cell>name2</cell>
         <cell>the second cell text</cell>
      </row>
   </table>

Will have the following result:

first column	second column
name	the cell text
name2	the second cell text

Custom widths for the row cells

The widths attribute for a row specifies custom widths for the row cells, regardless of the fact that the table has specified column widths or not.

For example:

   <table width="60%">
      <row widths="50% 50%" >
         <cell>name</cell>
         <cell>the cell text</cell>
      </row>
      <row widths="20% 80%" >
         <cell>name2</cell>
         <cell>the second cell text</cell>
      </row>
   </table>

Will have the following result:

name	the cell text

name2	the second cell text

cell element

The cell element define each cell in the table.

This element has several optional attributes:

• "rowspan" specifies the row span of the cell
• "colspan" specifies the column span of the cell
• "color" specifies the background color of the cell. By default the cell will have the background color of its row if it is defined
• "align" specifies the alignment of the cell. Can be "left", "right", or "center". By default the cell will be left aligned or will have the alignment of its column if the column is defined and its alignemnt is specified
• "class" specifies the style class of the cell
• "style" specifies the style of the cell

For example:

   <table>
      <row>
         <cell align="center">name</cell>
         <cell>the cell text</cell>
      </row>
      <row>
         <cell color="green" colspan="2">the cell text</cell>
      </row>
   </table>

Will have the following result:

name	the cell text
the cell text

Vertical headers

A table has a vertical header if the "vertical" attribute of the header is true. For example:

<table caption="table caption">
   <tableHeader vertical="true">
      <column>first row</column>
      <column>second row</column>
   </tableHeader>
   <row>
      <cell>name</cell>
      <cell>value</cell>
   </row>
   <row>
      <cell>name2</cell>
      <cell>value2</cell>
   </row>
</table>

Result:

table caption

first row	second row
name	value
name2	value2

Vertical headers style

Note that vertical headers are implemented in HTML without a thead element. This means that if you want to use customized styles for tables with vertical headers, styles which are defined for the thead element will be applied to the header column th elements instead.

For example, the following specification:

  <table>
     <tableHeader vertical="true" style="background: gray; color: white;">
        <column>first row</column>
        <column>second row</column>
     </tableHeader>
     <row>
        <cell>name</cell>
        <cell>value</cell>
     </row>
  ...
  </table>

will have the following HTML result:

   <table class="border" >
      <caption class="tablecaption" >table caption</caption>
      <thead class="notSortable">
      </thead>
      <tbody>
         <tr>
            <th valign="center"  style="background: gray; color: white;" class="column border" >first row</th>
            <td valign="center" class="border">name</td>
            <td valign="center" class="border">value</td>
         </tr>
         <tr>
            <th valign="center"  style="background: gray; color: white;" class="column border" >second row</th>
            <td valign="center" class="border">name2</td>
            <td valign="center" class="border">value2</td>
         </tr>
      </tbody>
   </table>

Examples

  <table caption="table caption">
     <tableHeader>
        <column>first column</column>
        <column>second column</column>
     </tableHeader>
     <row>
        <cell>name</cell>
        <cell>value</cell>
     </row>
     <row>
        <cell color="#00FF00">name2</cell>
        <cell>value2</cell>
     </row>
  </table>

Result:

table caption

first column	second column
name	value
name2	value2

Another example (with fixed column width):

<table>
   <tableHeader>
      <column width="200">first column</column>
      <column width="300">second column</column>
   </tableHeader>
   <row>
      <cell>name</cell>
      <cell>value</cell>
   </row>
   <row>
      <cell>name2</cell>
      <cell>value2</cell>
   </row>
</table>

Result:

first column	second column
name	value
name2	value2

Another example (with sortable columns):

<table sortable="true">
   <tableHeader>
      <column width="150">first column</column>
      <column width="150">second column</column>
   </tableHeader>
   <row>
      <cell>name</cell>
      <cell>value</cell>
   </row>
   <row>
      <cell>name2</cell>
      <cell>value2</cell>
   </row>
</table>

Result:

table caption

first column	second column
name	value
name2	value2