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").
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").
Tables With a Hover Effect
Original
The hover effect on rows in this table design relies on the Canvas class (class="table-hover").
With Background Color Added
<table class="table-hover" style="width: 100%; border-collapse: collapse; border-style: solid; text-align: center; border-color: #BE0000; background-color: #E2E6E6;" border="1">
<caption>Table Caption</caption>
<tbody>
<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>
<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 (#E2E6E6) in the (background-color) attribute.
- You can change the border color by using a different hex code (#BE0000) in the (border-color) attribute.
0 Comments
Add your comment