Remember to remove all the cellpadding, cellspacing, width, height, and border elements to all tables.
Checklist Table (Road Map and Assignment Tables)
<table class="table-checklist" summary="table summary">
<caption>Enter Table caption</caption>
<thead>
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
<th scope="col">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>New row 1</td>
<td>New row 2</td>
<td>New row 3</td>
</tr>
</tbody>
<table>
Data Table Header Top Row Only (will have zebra striping)
<table class="table-data" summary="table summary">
<caption>Enter Table caption</caption>
<thead>
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
<th scope="col">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>New row 1</td>
<td>New row 2</td>
<td>New row 3</td>
</tr>
</tbody>
</table>
Syllabus Letter Grade Table & Short Data Table Cells Centered (will have zebra striping)
<table class="table-lettergrade" summary="table summary">
<caption>Enter Table caption</caption>
<thead>
<tr>
<th scope="col">Heading 1</th>
<th scope="col">Heading 2</th>
<th scope="col">Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>New row 1</td>
<td>New row 2</td>
<td>New row 3</td>
</tr>
</tbody>
</table>
Data Table Header Top Row and Side Column
<table class="table-data" summary="table summary">
<caption>Enter Table caption</caption>
<thead>
<tr>
<th scope="col"> </th>
<th scope="col"> </th>
<th scope="col"> </th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Data Table Header Side Only
<table class="table-data" summary="table summary">
<caption>Enter Table caption</caption>
<tbody>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row"> </th>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
Schedule Table (Syllabus ONLY)
<table class="table-schedule" summary="The topics, readings, and assignments for the lesson.">
<caption>Enter Weekly Lesson number and name</caption>
<tbody>
<tr>
<th scope="row">Date:</th>
<td> </td>
</tr>
<tr>
<th scope="row">Topics:</th>
<td> </td>
</tr>
<tr>
<th scope="row">Readings:</th>
<td> </td>
</tr>
<tr>
<th scope="row">Assignments:</th>
<td> </td>
</tr>
</tbody>
</table>
Selective Text Align in a Table Cell
You can override the text alignment of a cell with the class left and right. Simply use:
<td class="left"> for left-aligned text/characters and
<td class="right"> for right-aligned text/characters
NOTE: These classes will only work when used with a td inside of a properly-named table.
Image Center (caption and/or credit lines appear with this style)
The classes "image-center," "image-caption," and "image-credit" may also be used here
<div class="img-center"><img alt="Enter image and alt text here. No sizes!" src="foo.jpg">
<div class="img-caption">Enter caption here</div>
<div class="img-credit">Enter image credit here</div>
</div>
Toggler inside a caption box for an image (i.e. text descriptions)
Notes for accessibility:
- The link to the text description should be unique. ie. includes name of image or something similar
- Alt tag should include "see link in caption for text description"
- Verify that the toggler module has been turned on.
<div class="img-center">
<img alt="short alt tag. See link in caption for text description" src="image source">
<div class="img-caption">This is where you put the caption
<div aria-label="expand content" class="toggler">Click for a text description of [name of image].</div>
<div aria-label="additional content">Add text description here</div>
</div>
<div class="img-credit">image credit</div>
</div>
Image Left (no caption or credit line)
The class "image-left" may also be used here
<div class="img-left">
<img alt="Enter image and alt text here. No sizes!" src="foo.jpg">
</div>
Image Right (no caption or credit line)
The class "image-right" may also be used here
<div class="img-right">
<img alt="Enter image and alt text here. No sizes!" src="foo.jpg">
</div>
Image Left (no caption or credit line, no border - very small decorative images generally)
The class "image-left-unboxed" may be used here
<img class="image-left-unboxed"alt="Enter image and alt text here. No sizes!" src="foo.jpg">
Image Right (no caption or credit line, no border - very small decorative images generally)
The class "image-right-unboxed" may be used here
<img class="image-right-unboxed"alt="Enter image and alt text here. No sizes!" src="foo.jpg">
Image as a Bullet (used to vertically align middle a small decorative image)
The class "img-bullet" may be used here
<img class="img-bullet" alt="Enter image and alt text here. No sizes!" src="foo.jpg">
NOTE: If the images in the course are broken, you will need to manually add /files to the URL between the course number and image (see below for example):
Formatting the text around a Floating Image
If you have an image that is floating right or left and you have text around it but need to do a hard break so the next line or section starts below the image, not next to it, then use this code:
<div style="clear:both;"></div>
**Verify that the toggler module is turned on in the course: In the black menu bar, click Modules. In the box, filter for js. Choose custom js library>configuration and check the Toggler box. Note that if custom js library is not enabled, you will have to enable it (check the box) in order to get the configuration option.**
NOTE: Toggler code is not yet fully accessible. You can continue to use this code for now but it will evenutally need to be updated.
Self-Check using Toggler
<div class="box-activity-optional">
<h4>Title of box</h4>
<p>Question1</p>
<p><textarea aria-hidden="true" cols="100" rows="5"></textarea></p>
<div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
<div aria-label="answer"><p>ANSWER:text</p></div>
<p>Question2</p>
<p><textarea aria-hidden="true" cols="100" rows="5"></textarea></p>
<div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
<div aria-label="answer"><p>ANSWER:text</p></div>
<p>Question3</p>
<p><textarea aria-hidden="true" cols="100" rows="5"></textarea></p>
<div aria-label="expand content" class="toggler"><em>Click for answer...</em></div>
<div aria-label="answer"><p>ANSWER:text</p></div>
</div>
Toggler outside of an image or video caption
This is most relevant for audio files.
<div aria-label="expand content" class="toggler">
<strong>Click for text description.</strong> This will expand to provide more information.
</div>
<div aria-label="additional content">
Add text description here
</div>
Toggler code for text descriptions of images and transcripts has been moved to the image and video sections.
** Again, a reminder to verify that the toggler module is turned on in the course: In the black menu bar, click Modules. In the box, filter for js. Choose custom js library>configuration and check the Toggler box. Note that if custom js library is not enabled, you will have to enable it (check the box) in order to get the configuration option.
