Table componentAvailable since EcoComposer 2.2

Table examples
Default SCSS values
SCSS implementation
HTML implementation

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>