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.
<table class="ic-Table ic-Table--hover-row ic-Table--striped">
<caption>
Insert Caption Here
</caption>
<thead>
<tr style="background-color: #BE0000; color: #FFFFFF;">
<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>
Click to copy
Modifications
The glossary table can be easily modified.
- Change the background color by replacing it with the color you want (background: #BE0000;).
- 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.
0 Comments
Add your comment