Table

Table

Tables are an excellent way to organize many data, and with a striped, bordered and striped bordered modifier, your table will be more beautiful.

SysaCSS provides the following classes for tables.

Class Variable
ss-table Container for an HTML table
ss-striped Striped table
ss-border Bordered table
ss-bordered Bordered lines
ss-centered Centered table content
ss-hoverable Hoverable table
ss-table-all All properties set

Basic Table

The ss-table class is used to display a basic table.

<table class="ss-table">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Striped Table

The ss-striped class is used to add zebra-stripes to a table.

<table class="ss-table ss-striped">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Bordered Table

The ss-bordered class adds a bottom border to each table row.

<table class="ss-table ss-bordered">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Striped With Bordered Table

Combine the ss-striped class and the ss-bordered class to create a striped bordered table.

<table class="ss-table ss-striped ss-bordered">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Border Around Table

The ss-border class is used to display a border around a table.

<table class="ss-table ss-striped ss-border">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

The ss-border class is not only for tables. It can be used on any HTML element!

All Together

The ss-table-all class combines all of the classes above.

<table class="ss-table-all">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Flipping The Stripes

To flip the stripes (start with the light-gray color), add a <thead> element around the table header row. You must also define a color to be used for the table header row.

<table class="ss-table-all">
  <thead>
    <tr class="ss-bg-light-gray">
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
</table>

Hoverable Table

The ss-hoverable class adds a grey background color on mouse-over.

<table class="ss-table-all ss-hoverable">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Hover Color

If you want a specific hover color, add any of the ss-hvr-color classes to each <tr> element.

<table class="ss-table-all">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr class="ss-hvr-bg-brown">
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Centering All Content

The ss-centered class centers the content of the table.

<table class="ss-table-all ss-centered">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Centering One Column

The ss-center class centers the content of a column.

<table class="ss-table-all">
<tr>
  <th>First Name</th>
  <th class="ss-center">Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Right Align One Column

The ss-right-align class right aligns the content of a column.

<table class="ss-table-all">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th class="ss-right-align">Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Combining With SysaCSS Classes

Many SysaCSS classes can be used on all HTML elements.
For example on Table: border classes, color classes, font classes, card classes, and more can be used to beautify tables.

Colored Table Header

Use any of the ss-bg-color classes to display a colored row.

<table class="ss-table-all">
<tr class="ss-bg-green">
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Colored Table

Use any of the ss-bg-color classes to display a colored table.

<table class="ss-table-all ss-bg-sand">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Responsive Table

The ss-responsive class creates a responsive table. The table will then scroll horizontally on small screens.
When viewing on large screens, there is no difference.

<div class="ss-responsive">
  <table class="ss-table-all">
    <tr class="ss-bg-green">
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>50</td>
    </tr>
    ...
  </table>
</div>

Table As a Card

Use a ss-card class to display a table as a card.

<table class="ss-table-all ss-card">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Tiny Table

Use the ss-tiny class to display a tiny table.

<table class="ss-table-all ss-tiny">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Small Table

Use the ss-small class to display a small table.

<table class="ss-table-all ss-small">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Large Table

Use the ss-large class to display a large table.

<table class="ss-table-all ss-large">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Xlarge Table

Use the ss-xlarge class to display an xlarge table.

<table class="ss-table-all ss-xlarge">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Xxlarge Table

Use the ss-xxlarge class to display an xxlarge table.

<table class="ss-table-all ss-xxlarge">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Xxxlarge Table

Use the ss-xxxlarge class to display an xxxlarge table.

<table class="ss-table-all ss-xxxlarge">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>

Jumbo Table

Use the ss-jumbo class to display a jumbo large table.

<table class="ss-table-all ss-jumbo">
<tr>
  <th>First Name</th>
  <th>Last Name</th>
  <th>Age</th>
</tr>
<tr>
  <td>John</td>
  <td>Doe</td>
  <td>50</td>
</tr>
  ...
</table>