Tables With Class

Code Snippet Library

These tables rely on Canvas classes for styling, which are no longer supported but are still available for use.

 

Use Classes With Caution

Should you opt to use a class in your table, understand that future support is not guaranteed, the effect may disappear without notice, and this styling does not work on mobile devices.

These tables provide an example of what the class style does. A class is applied by adding it to the opening <table> tag in the HTML editor. For example, <table class="name of class" >

 

 

Striped Table With Alternate Shading on Rows

The alternate shading of rows in this table design relies on the Canvas class (class="table-striped").

Insert Caption Here
Types of Things Header 1 Header 2 Header 3
Thing 1 1 2 3
Thing 2 4 5 6

 

 

Striped Table With Alternate Shading on Rows on Hover

The alternate shading of rows in this table design relies on the Canvas class (class="ic-Table ic-Table--hover-row ic-Table--striped").

Table Caption
Types of Things Header 1 Header 2 Header 3
Thing 1 1 2 3
Thing 2 4 5 6

 

 

Tables With a Hover Effect 

Original

The hover effect on rows in this table design relies on the Canvas class (class="table-hover"). 

Table Caption
Types of Things Header 1 Header 2 Header 3
Thing 1 1 2 3
Thing 2 4 5 6

 

With Background Color Added

Table Caption
Types of Things Header 1 Header 2 Header 3
Thing 1 1 2 3
Thing 2 4 5 6
Table With Hover Effect and Background Color code to copy 
<table class="table-hover" style="width: 100%; border-collapse: collapse; border-style: solid; text-align: center; border-color: #314D64; background-color: #eef3f7;" border="1">
    <caption>Table Caption</caption>
    <thead>
        <tr>
            <th scope="col">Types of Things</th>
            <th scope="col">Header 1</th>
            <th scope="col">Header 2</th>
            <th scope="col">Header 3</th>
        </tr>
    </thead>
     <tbody>
        <tr>
            <th scope="row">Thing 1</th>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <th scope="row">Thing 2</th>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
    </tbody>
</table>

Modifications

  • You can change the background color by editing the hex code (#eef3f7) in the background-color attribute.
  • You can change the border color by using a different hex code (#314D64) in the border-color attribute.