Table

Tables allow web developers to arrange data into rows and columns, with FlatifyCSS you can have striped, bordered, and customized one vertical or horizontal.

Bordered

First, create a simple HTML table, then add the .bordered class to the table:

index.html

<table class="bordered">
  <caption>
    The list of students
  </caption>
  <thead>
    <tr>
      <th>Student</th>
      <th>Study time</th>
      <th>Homework</th>
      <th>Total grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alan</td>
      <td>6</td>
      <td>9/10</td>
      <td>95</td>
    </tr>
    <tr>
      <td>Carlos</td>
      <td>2</td>
      <td>7/10</td>
      <td>72</td>
    </tr>
    <tr>
      <td>Kim</td>
      <td>4</td>
      <td>7/10</td>
      <td>88</td>
    </tr>
    <tr>
      <td>Pat</td>
      <td>2</td>
      <td>4/10</td>
      <td>60</td>
    </tr>
    <tr>
      <td>Thomas</td>
      <td>5</td>
      <td>10/10</td>
      <td>98</td>
    </tr>
  </tbody>
</table>

Striped

A striped table has different odd rows for helping readers to know which row they are looking at. To have a striped style add the .striped class to the table.

index.html

<table class="striped">
  ...
</table>

Horizontal

By default, tables are vertical however for small screens and other use cases, we might need to have a horizontal table, it is possible with adding the horizontal class to the table:

index.html

<table class="bordered horizontal">
  ...
</table>

Centered

By adding the .text-center class to the table, texts will be centered.

index.html

<table class="striped text-centered">
  ...
</table>

Styling table items

With helper classes we can have specific table items with various background and colors, See here, is the list of helper classes. for styling elements based on CSS background and color properties. For example, lets show which student was better and who needs help:

index.html

<table class="bordered horizontal">
  <table class="bordered striped">
    <thead>
      <tr>
        <th>Student</th>
        <th>Study time</th>
        <th>Homework</th>
        <th>Total grade</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alan</td>
        <td>6</td>
        <td>9/10</td>
        <td>95</td>
      </tr>
      <tr>
        <td>Carlos</td>
        <td>2</td>
        <td>7/10</td>
        <td class="style-warning">72</td>
      </tr>
      <tr>
        <td>Kim</td>
        <td>4</td>
        <td>7/10</td>
        <td>88</td>
      </tr>
      <tr>
        <td>Pat</td>
        <td>2</td>
        <td>4/10</td>
        <td class="style-danger">60</td>
      </tr>
      <tr>
        <td>Thomas</td>
        <td>5</td>
        <td>10/10</td>
        <td class="style-success">98</td>
      </tr>
    </tbody>
  </table>
</table>

Customization

Each table can be customized individually or customized settings can be set as a wrapper for tables, this approach is done with custom CSS properties aka "variables". FlatifyCSS consider these CSS variables for table customization:

--flatify__table-border-color
--flatify__table-bg-color
--flatify__table-bg-color-dark
--flatify__table-bg-color-darker
--flatify__table-txt-color

CSS variables prefix

By default FlatifyCSS adds flatify__ prefix to CSS variables to prevent unwanted conflicts, If you change $CSS_VAR_PFX in _config.scss instead of flatify__, variables will have your custom prefix: --[your prefix]table-border-color.

Let's apply them in an example:

index.html

<table class="my-table bordered striped">
  ...
</table>

style.css

.my-table {
  --flatify__table-border-color: #e0c341;
  --flatify__table-bg-color: #967adc;
  --flatify__table-bg-color-dark: #6a50a7;
  --flatify__table-bg-color-darker: #4d3a79;
  --flatify__table-txt-color: #fff;
}