ALF Tables

Table options

  • Tables can have no style class (default style), or use .main or .alt
  • .bordered
  • .striped
  • .compact
  • .w100: uses all the available width
  • .linearized-phone, .linearized-tablet: uses the linearized version for responsive. Alternative, a container DIV with class .scroller can be used.

Cell options

  • center
  • right
  • nowrap
  • price (equivalent to "right nowrap")

(see Advanced tab example)

Row options

  • total

(see Advanced tab example)

Examples

Default table (caption)
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.main
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.alt
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.bordered
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.main bordered
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.alt bordered
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.w100
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.striped
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.striped main
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.compact
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.compact alt
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.main striped bordered compact w100
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3

Tables can have multiple tbody, a tfoot, combined cells...

table.w100 main - Caption here
Product Description Date Price
Product 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 28/02/2019 1024.64 €
Product 2 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 28/02/2019 256.32 €
Product 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 28/02/2019 1024.64 €
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 28/02/2019 256.32 €
Product 2 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 28/02/2019 256.32 €
Total (class .total) 2.818.24 €

To make tables accessible, wrap them in a DIV with class .scroller. An alternative is the linearized version, see the next tab.

Default table (caption)
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
.main
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
.main bordered
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
.w100
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
.compact
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6

A second approach for responsive tables is to linearize them for phone. Instead of cluttering the HTML, ALF uses a bit of Javascript to set things up. This way all you have to do is add the class .linearized-phone and/or .linearized-tablet.

.main bordered linearized-phone
Heading 1 Heading 2 Heading 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
.linearized-phone linearized-tablet
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6