Tables
Tables - sortable and not sortable
| Product - not sortable | Price - sortable |
|---|---|
| Ice cream | 50 |
| Pony | 75 |
| Car | 9999999 |
Table with form elements
Invisible table
Add invisible class to the table tag in order to make the table discreet without any visible borders.
| Even table header | Odd table header |
|---|---|
| Even table item | Odd table item |
| Odd table item | Even table item |
Muted table
Add invisible class to the table tag in order to make the table discreet without any visible borders.
Add even class to each tr in order to add back a muted border color
| Even table header | Odd table header |
|---|---|
| Even table item | Odd table item |
| Odd table item | Even table item |
Next table without thead tags
| Even table item | Odd table item |
| Odd table item | Even table item |
Plain table
Add plain class to the table tag in order to make the table look like a spreadsheet table.
| Even table header | Odd table header |
|---|---|
| Even table item | Odd table item |
| Odd table item | Even table item |
Vertical listing table
Add vertical listing classes to the table tag in order to make the table vertical.
| Table heading | Odd table item |
|---|---|
| Another heading | Even table item |
Striped table
Add odd and even classes to each tr tag in order to add a stripe effect to table rows or add listing class to the table and these classes will be added by javascript.
| Table heading | Another heading (sortable, click to sort) | Fixed column (not sortable) |
|---|---|---|
| Odd table item | Item 1 | Another item |
| Even table item | Item 2 | Yet another item |
| Odd table item | Item 3 | And one more item |
Datatable styled table
This legacy table style is not currently used anywhere however for completion sake we also document this style as well.
| Title | Size | Modified | State | Other |
|---|---|---|---|---|
| Title 1 | 10 kB | 2006-01-10 10:20 | Published | Other info |
| Title 2 | 20 kB | 2006-03-13 10:20 | Unpublished | Other info |
| Title 3 | 50 kB | 2006-02-10 10:20 | Unpublished | Other info |
| Title 4 | 20 kB | 2006-03-13 10:20 | Unpublished | Other info |
Permalinks
- Permalink to this version
- bb220ddb371542fc8fc09c6569a7c1c2
- Permalink to latest version
- QIP52A63WS
Geographic coverage
For references, please go to https://www.eea.europa.eu/code/design-elements/tables or scan the QR code.
PDF generated on 16 Jan 2021, 08:02 AM
Document Actions
Share with others