Table componentAvailable since EcoComposer 2.2

Default table example :
Date Schedule Event
January 1, 2021 18:00 22:00 Eco-Friendly Web Design Workshop
March 10, 2021 15:00 16:00 Sustainable Development Strategies
Table example with some configuration :
Date Schedule Event
January 1, 2021 18:00 22:00 Eco-Friendly Web Design Workshop
March 10, 2021 15:00 16:00 Sustainable Development Strategies

The default values are :

border-collapse : collapse, desktop--td-padding : .5rem * theming.$font-size, mobile--header-min-width : 25rem * theming.$font-size, mobile--gap : 1rem * theming.$font-size, mobile--td-padding : .5rem * theming.$font-size, print : false, table--border : 'table--border', table--border-radius : .5rem * theming.$font-size, table--font-family : theming.$font-family, table--td--border : 'table--td--border', table--td--color : 'table--td--color', table--th--border : 'table--th--border', table--th--color : 'table--th--color', suffix : '', themes : ( light : ( default--table--border : 1px solid #333, default--table--td--border : 1px solid #333, default--table--td--color : #333, default--table--th--border : 1px solid #333, default--table--th--color : #333, ), dark : ( default--table--border : 1px solid #eee, default--table--td--border : 1px solid #eee, default--table--td--color : #ccc, default--table--th--border : 1px solid #eee, default--table--th--color : #ccc, ) )

We can implement it that way :

@include table.init(); @include table.create(); @include table.create( ( mobile--gap : 1rem, themes : $themes ) );

We can implement it that way :

<table class="table suffix"> <caption class=table--caption>My table :</caption> <thead class=table-header> <tr> <th>Date</th> <th>Schedule</th> <th>Event</th> </tr> </thead> <tbody> <tr> <td data-label=Date>Le 01/01/2021</td> <td data-label=Schedule>18:00 22:00</td> <td data-label=Event>Our event</td> </tr> <tr> <td data-label=Date>Le 10/03/2021</td> <td data-label=Schedule>15:00 16:00</td> <td data-label=Event>Our second event</td> </tr> </tbody> </table>
^