Glossary Table

Code Snippet Library

Use caution as this style relies on a Canvas class so it will appear the same way on a mobile device.

The code in this example is used on the Glossary page in the Introduction Module of this resource. The alternate shading of rows in this table design relies on the Canvas class (class="ic-Table ic-Table--hover-row ic-Table--striped"), plus a background color in the header and percentage widths in the columns.

Insert Caption Here
Term Definition
Term 1 Definition for Term 1 goes here.
Term 2 Definition for Term 2 goes here.
Term 3 Definition for Term 3 goes here.

 

Code: Glossary Table 
<table class="ic-Table ic-Table--hover-row ic-Table--striped">
    <caption>
        Insert Caption Here
    </caption>
    <thead>
        <tr style="background-color: #ebf2f9;">
            <th style="text-align: center; width: 10.5016%;" scope="col">Term</th>
            <th style="text-align: center; width: 89.4201%;" scope="col">Definition</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="text-align: center; width: 10.5016%;"><strong>Term 1</strong></td>
            <td style="width: 89.4201%;">Definition for term one goes here.</td>
        </tr>
        <tr>
            <td style="text-align: center; width: 10.5016%;"><strong>Term 2</strong></td>
            <td style="width: 89.4201%;">Definition for term two goes here.</td>
        </tr>
        <tr>
            <td style="text-align: center; width: 10.5016%;"><strong>Term 3</strong></td>
            <td style="width: 89.4201%;">Definition for term three goes here.</td>
        </tr>
    </tbody>
</table>

 

 

Modifications

The glossary table can be easily modified.

  • Change the background color by replacing it with the color you want (background: #ebf2f9;).
  • Change the font color using the text color options in the RCE.
  • Add or delete rows or columns using the table properties in the RCE.

 

Best Practice: Use Good Contrast

If you change the colors, make sure the background color contrasts well with the font color. Use the accessibility checker  in the RCE to verify.