A table can show data in a grid. It can also be used to arrange page contents in separate portions.
The border property of a table indicates the width of the border.
Set border to 0 to remove borders.
Set width/height to 100% to make the table taking full width/height of its parent element:
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.
Click a table cell of the table header, table footer, or table body, the properties of the cell are displayed and can edited.
Each cell is a container and it may contain almost all kinds of other elements.
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
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
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.