Table Element

A table can show data in a grid. It can also be used to arrange page contents in separate portions.

Table border

The border property of a table indicates the width of the border.

Set border to 0 to remove borders.

Table width/height

Set width/height to 100% to make the table taking full width/height of its parent element:

Table header and footer

A table has 3 parts: table header, table body and table footer. Each of the 3 parts is by itself a grid. It is as if there are 3 grids put together vertically. These 3 parts are not independent. For example, if there is not a header row then the row number of the first table body row is 0; if there are two header rows then the row number for the first row of the table body is 2.
The element toolbar for a table element contains following buttons for adding and deleting header and footer.
  Add table header
  Show and edit properties of table header
  Add table footer
  Show and edit properties of table footer
When the properties of table header or table footer are displayed, the element toolbar contains a delete button . Click the delete button  will remove the table header or table footer.

Table Cells

Set cell styles

Click a table cell of the table header, table footer, or table body, the properties of the cell are displayed and can edited.

Set cell contents

Each cell is a container and it may contain almost all kinds of other elements.

Cell toolbar

The element toolbar for a table cell contains buttons for adding columns and rows; for merging and splitting cells; and for setting column styles.
  Set column styles. It will be explained in more details later.
  Add a new row above the selected cell
  =>
  Add a new row below the selected cell
 => 
  Add a new column to the left of the selected cell
 => 
  Add a new column to the right of the selected cell


 
  Merge selected cell with the cell on its left


 
  Merge selected cell with the cell on its right


 
  Merge selected cell with the cell above it
 => 
  Merge selected cell with the cell below it
 => 
  Split selected cell into two cells side by side
 => 
  Split selected cell into two cells stack on each other

Table row

The parent element of a table cell is a table row. We may select a table row and give it styles.

The element toolbar for a table row contains following buttons.
  Delete the row
  Add a new row above the selected row
  Add a new row below the selected row
  Merge selected row with the row above it
  Merge selected row with the row below it

Table Column Styles

Select a table cell, click  to edit the styles of the column.

For example, we set background color of a column:

The styles are applied to the whole column, not just the selected cell.