Description
Tables allow authors to arrange, organize and display data efficiently.
Authors use tables to logically structure content in a grid to make it easier to see relationships and to facilitate understanding. Data tables are used to organize data with a logical relationship in grids.
Usage
Accessible tables need HTML markup that indicates header cells and data cells and defines their relationship. Header cells must be marked up with <th>, and data cells with <td> to make tables accessible. For more complex tables, explicit associations may be needed using scope, id, and headers attributes.
Demonstration
The following examples show you how you can provide tables with a suitable structure markup.
1) First example Table - built in the following way:
Columns: 3 - Width: 100% - Cell padding: 1
Rows: 3 - Height: n.s. - Cell spacing: 0
Border: 0 - Header: First row
Caption: n.s.
| Header of this table | Lorem ipsum | Lorem ipsum |
|---|---|---|
| Lorem ipsum dolor sit amet | Ut wisi enim ad minim veniam | Nam liber tempor cum soluta |
| Duis autem vel eum | At vero eos et accusam | Consetetur sadipscing elitr |
2) Second example Table - built in the following way:
Columns: 3 - Width: 100% - Cell padding: 1
Rows: 3 - Height: n.s. - Cell spacing: 0
Border: 0 - Header: First column
Caption: n.s.
| Lorem ipsum dolor sit amet | Duis autem vel eum iriure dolor | Ut wisi enim ad minim veniam |
|---|---|---|
| Nam liber tempor cum soluta nobis | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
| Consetetur sadipscing elitr | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
3) Third example Table - built in the following way:
Columns: 3 - Width: 100% - Cell padding: 1
Rows: 3 - Height: n.s. - Cell spacing: 0
Border: 0 - Header: First column and first row
Caption: n.s.
| Lorem ipsum dolor sit amet | Duis autem vel eum iriure dolor | Ut wisi enim ad minim veniam |
|---|---|---|
| Nam liber tempor cum soluta nobis | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
| Consetetur sadipscing elitr | Lorem ipsum dolor sit amet | Lorem ipsum dolor sit amet |
4) Fourth example Table - built in the following way:
Columns: 3 - Width: 100% - Cell padding: 1
Rows: 3 - Height: n.s. - Cell spacing: 1
Border: 0 - Header: First column and first row
Caption: yes
| Ut wisi enim ad minim veniam | Duis autem vel eum iriure dolor | Ut wisi enim ad minim veniam |
|---|---|---|
| Nam liber tempor cum soluta nobis | Avoid too different contents e.g. one cell with a lot of text next to another with a few text. For example like this: At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua | Lorem ipsum dolor sit amet |
| Consetetur sadipscing elitr | The text can be formatted bold and italic | Nested table as well as centered listings should be avoid. |
How to build a Content Table
Tables are structured in HTML, so the component only provides structure and content alignment.
No table should have a border so please set the border for the tables to 0.
The animated gif (see below) helps to find out where and which properties (mentioned on this page) are.
How to modify a "Content Table"
After it has been created, the content table can be edited and modified further.
Please click in the table and select one of the available options (see picture on the right):
- insert left,
- insert right,
- delete column,
- insert above,
- insert below,
- delete row,
- merge right,
- merge down,
- merge cells,
- split cell horizontally,
- split cell verticaly,
- select entire row,
- select entire column,
- ensure paragraph,
- table (insertion of a new) Please avoid,
- remove table