Table Lists
Basic Table List
Table lists are a great way to visually organize lists of information.
Example
Name | Email Address | Phone Number | Room |
---|---|---|---|
Johnny Campus | johnny.campus@canyonsdistrict.org | (801) 123-4567 | 101 |
Suzy Campus | suzy.campus@canyonsdistrict.org | (801) 234-5678 | 102 |
Kelly Campus | kelly.campus@canyonsdistrict.org | (801) 345-6789 | 103 |
Anatomy of Code Snippet
How to Add a Table List
1. Copy the code snippet:
<table class="ic-Table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Column 1 Entry 1</td>
<td>Column 2 Entry 1</td>
<td>Column 3 Entry 1</td>
</tr>
</tbody>
</table>
2. Navigate to a content page, click Edit, and select the HTML Editor.
3. Paste the copied snippet & edit the text that will appear in the header & first row. Add more rows as needed.
Striped Table List
Replace the first line of the code snippet above to have a striped table list:
<table class="ic-Table ic-Table--striped">
Name | Email Address | Phone Number | Room |
---|---|---|---|
Johnny Campus | johnny.campus@canyonsdistrict.org | (801) 123-4567 | 101 |
Suzy Campus | suzy.campus@canyonsdistrict.org | (801) 234-5678 | 102 |
Kelly Campus | kelly.campus@canyonsdistrict.org | (801) 345-6789 | 103 |
Highlight on Hover Table List
To make your table easier to read, you can have a row highlighted when your cursor hovers over it. To do this, replace the first line of the table list code snippet:
<table class="ic-Table ic-Table--hover-row">
Name | Email Address | Phone Number | Room |
---|---|---|---|
Johnny Campus | johnny.campus@canyonsdistrict.org | (801) 123-4567 | 101 |
Suzy Campus | suzy.campus@canyonsdistrict.org | (801) 234-5678 | 102 |
Kelly Campus | kelly.campus@canyonsdistrict.org | (801) 345-6789 | 103 |
You can also have a striped table with hover rows by replacing the first row of the table list code snippet with
<table class="ic-Table ic-Table--hover-row ic-Table--striped"
Colored Table List
You can also create a colored table with gray, green, orange, and red. Save your page to see the colors.
Name | Email Address | Phone Number | Room |
---|---|---|---|
Johnny Campus | johnny.campus@canyonsdistrict.org | (801) 123-4567 | 101 |
Suzy Campus | suzy.campus@canyonsdistrict.org | (801) 234-5678 | 102 |
Kelly Campus | kelly.campus@canyonsdistrict.org | (801) 345-6789 | 103 |
Anatomy of Code Snippet
Color Key
Color | Code |
---|---|
Gray | <tr class="ic-Table__row--bg-neutral"> |
Green | <tr class="ic-Table__row--bg-success"> |
Orange | <tr class="ic-Table__row--bg-alert"> |
Red | <tr class="ic-Table__row--bg-danger"> |