Table

The table module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.

All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.

Quick overview

Presenting information the right way is very important, especially so when dealing with large amounts of data. The table module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most CSS frameworks nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.

Quick start

To use the table module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Basic syntax & responsiveness

Medium/Large screen layout

People
Name	Surname	Alias
Chad	Wilberts	MrOne
Adam	Smith	TheSmith
Sophia	Canderson	Candee

Small screen layout

People
Name	Surname	Alias
Chad	Wilberts	MrOne
Adam	Smith	TheSmith
Sophia	Canderson	Candee

Table layout utilizes the <table> HTML element with the following structure (usual tabular structure):

On the outermost level, there is the <table> element.
If you want to include a <caption> element, it must by the first element inside the <table> element.
Following the above, you need to add a <thead> element. Inside it, you should usually add one <tr> element, which contains one or more <th> elements.
Immediately after the <thead> element, you can add a <tfoot> element, if you want to. Inside it, you should usually add one or more <tr> elements, which contain one or more <td> elements.
Finally, add your <tbody> element. Inside it, you should usually add one or more <tr> elements, which contain one or more <td> elements. For each <td> element, specify a data-label attribute equal to the heading of the column. This enables responsibility for your table, so that the values in the columns will be properly labeled on mobile devices.

Sample code

<table>
  <caption>People</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Alias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chad</td>
      <td data-label="Surname">Wilberts</td>
      <td data-label="Alias">MrOne</td>
    </tr>
    <tr>
      <td data-label="Name">Adam</td>
      <td data-label="Surname">Smith</td>
      <td data-label="Alias">TheSmith</td>
    </tr>
    <tr>
      <td data-label="Name">Sophia</td>
      <td data-label="Surname">Canderson</td>
      <td data-label="Alias">Candee</td>
    </tr>
  </tbody>
</table>

Notes

Tables are responsive by default and will change to a card-like view below a certain screen width. If you'd rather not make them responsive, check the last section on this page.
Specifying the data-label attribute is essential for the responsive version of a table to display properly. You can, however, use a value different from the column's name. Make sure it does not confuse your users, though.
We strongly suggest you avoid adding multiple rows in your <thead> element, as it could cause problems with accessibility. However, if you absolutely must, you might want to check this codepen for an idea on how to deal with irregular border styling.

<tr>
  <td>Chad</td>
  <td>Wilberts</td>
  <td>MrOne</td>
</tr>

Don't: Remember to always add a data-label attribute to your <td> elements, as the table's card view is very dependent on them to display properly. <th> elements, however, do not require or utilize this attribute.

<table>
  <caption>People</caption>
  <thead>
    <!-- ... -->
  </thead>
  <tbody>
    <!-- ... -->
  </tbody>
  <tfoot>
    <!-- ... -->
  </tfoot>
</table>

Don't: The <tfoot> element must always be immediately after the <thead> element, if included.

<tbody>
  <tr>
    <th>Name</th>
    <td data-label="Name">Chad</td>
  </tr>
</tbody>

Don't: Avoid inserting <th> elements inside your <tbody> element. If you want to make your tables horizontal or preset their styling in a manner different from the one shown in the previous examples, check the below sections.

<thead>
  <tr>
    <td data-label="Name">Chad</td>
  </tr>
</thead>

Don't: Avoid using <td> elements inside your <thead>. You should use a <tbody> element instead.

Horizontal tables

People
Name	Surname	Alias
Chad	Wilberts	MrOne
Adam	Smith	TheSmith
Sophia	Canderson	Candee
Nick	Thomson	NickThom

Horizontal tables can be created, by simply adding the .horizontal class to the root element of your table (i.e. the <table> element). Horizontal tables are flexible, so they can accommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add the data-label attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that .horizontal tables do not support the <tfoot> element.

Sample code

<table class="horizontal">
  <caption>People</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Surname</th>
      <th>Alias</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">Chad</td>
      <td data-label="Surname">Wilberts</td>
      <td data-label="Alias">MrOne</td>
    </tr>
    <tr>
      <td data-label="Name">Adam</td>
      <td data-label="Surname">Smith</td>
      <td data-label="Alias">TheSmith</td>
    </tr>
    <tr>
      <td data-label="Name">Sophia</td>
      <td data-label="Surname">Canderson</td>
      <td data-label="Alias">Candee</td>
    </tr>
  </tbody>
</table>

Notes

Due to .horizontal tables utilizing the Flexbox Layout, some older browsers may not properly display these tables. This is especially true with legacy versions of Internet Explorer.
Mixing the Flexible Layout Module with <table> elements seems to upset some browsers. We noticed this on an older mobile version of Firefox, where our implementation should work in theory, given the fact that both features are properly supported. If you notice any problems with .horizontal tables, feel free to submit a new issue on Github.

<table>
  <!-- ... -->
  <tfoot>
    <!-- ... -->
  </tfoot>
</table>

Don't: We already explicitly stated that, due to the way .horizontal tables are styled, the <tfoot> element is not supported. Please refer to the next section if you need to use this element and you want to have a horizontal table layout.

Table variants & matrices

Star Wars Character Alignment Table
	Lawful	Neutral	Chaotic
Good	Yoda	Luke Skywalker	Chewbacca
Neutral	C-3PO	Boba Fett	Han Solo
Bad	Darth Vader	Emperor Palpatine	Jabba the Hutt

Tables are responsive by default, however you can disable this functionality for one or more tables (normal or .horizontal), using the .preset class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have <th> elements inside the <tbody> element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the .striped class.

Sample code

The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.

Show sample code

<table class="preset">
  <caption>Star Wars Character Alignment Table</caption>
  <tbody>
    <tr>
      <th></th>
      <th>Lawful</td>
      <th>Neutral</td>
      <th>Chaotic</td>
    </tr>
    <tr>
      <th>Good</th>
      <td>Yoda</td>
      <td>Luke Skywalker</td>
      <td>Chewbacca</td>
    </tr>
    <tr>
      <th>Neutral</th>
      <td>C-3PO</td>
      <td>Boba Fett</td>
      <td>Han Solo</td>
    </tr>
    <tr>
      <th>Bad</th>
      <td>Darth Vader</td>
      <td>Emperor Palpatine</td>
      <td>Jabba the Hutt</td>
    </tr>
  </tbody>
</table>

<table class="striped">
  <caption>People</caption>
  <thead>
    <!-- ... -->
  </thead>
  <tbody>
    <!-- ... -->
  </tbody>
</table>

Notes

Making a table .striped also affects the color of the cards in their responsive view on mobile devices.
If you create a .preset table, which you do not want to alter via Javascript to be responsive at any time in the future, you can omit the data-label attributes.

<style>
  .border-fix > td, .border-fix > th {
    border-top: 0;
  }
</style>

<table class="preset">
  <tbody>
    <tr class="border-fix">
    <!-- ... -->
    </tr>
    <!-- ... -->
  </tbody>
</table>

Do: The first row in a preset matrix table or any table without a <thead> element will have an extra border at the top. You can use a generic class to set border-to: 0; for the elements inside that row to fix this.

<table class="horizontal preset">
  <!-- ... ->
</table>
<!-- or -->
<table class="horizontal striped">
  <!-- ... ->
</table>
<!-- or -->
<table class="preset striped">
  <!-- ... ->
</table>
<!-- or -->
<table class="preset horizontal striped">
  <!-- ... ->
</table>

Do: You can combine any two of the following classes without any problems: .horizontal, .preset, .striped. Just make sure you respect each one's specific rules.

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.