Recent updates
-
Row of Grouped Tables
Updated onArticleThe purpose of this style is to group tables on the same line when viewed on a wider screen. They will adjust at smaller screen widths so they won't overlap. This style works best with four or fewer small tables of similar size; otherwise, they will not align correctly. You can find similar code for use with images and text blocks in the Image and Other modules respectively. Use with Caution: this style relies on an unsupported Canvas class, so if it "breaks" or when viewed in the Canvas mobile app, the tables will display in a vertical row.
Gen3 Course Template Advanced HTML Elements Tables
-
Glossary Table
Updated onArticleUse 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.
Gen3 Course Template Advanced HTML Elements Tables
-
Accounting Tables
Updated onArticleThis is basic accounting table with the first column left-aligned, Columns 2 and 3 right-aligned, Column 4 centered, and width set to auto. Blank cells should include a symbol, such as a dash, a zero, or "n/a." In this case, the width is set to auto to minimize white space between columns and make it easier to read.
Gen3 Course Template Advanced HTML Elements Tables
-
Specialized Table Designs
Updated onArticleGen3 Course Template Advanced HTML Elements Tables
-
Table Code Basics
Updated onArticleThis page outlines the basic parts of a table, associated tags, and how to use them, along with an example table, example code, quick tip, and best practice for tables.
Gen3 Course Template Advanced HTML Elements Tables
-
Table Margins and Padding
Updated onArticleIf you would like to customize the space in and around your table beyond what is available in the RCE, you may need to manually add or adjust table margins and padding. Cell spacing and padding can be specified in the RCE using the general table properties menu. Table margins, table and caption padding are not found in the RCE and needs to be added or changed in code.
Gen3 Course Template Advanced HTML Elements Tables
-
Table Borders and Shading
Updated onArticleSometimes it is desirable to shade a specific column, row, or cell beyond the available selections in the RCE. This page outlines the basics of borders and shading in case you need to make a manual adjustment to achieve your desired effect.
Gen3 Course Template Advanced HTML Elements Tables
-
Centering Images
Updated onArticleWe're using <figure> and <figcaption> tags to style our images throughout this resource. This isn't the only way to do it, but it's a best practice because it provides the correct semantic structure in the code, and for screen reader users the image and caption are associated with each other. If you don't need a caption, just eliminate the <figcaption> tags. On this page, we'll give you the basic code for centering a single image and adding a caption, and using a banner image.
Gen3 Course Template Advanced HTML Elements Images
-
Image Captions
Updated onArticleWe're using <figure> and <figcaption> tags to style our images throughout this resource. This isn't the only way to do it, but it's a best practice because it provides the correct semantic structure in the code, and for screen reader users the image and caption are associated with each other. The image caption goes between the <figcaption> tags.
Gen3 Course Template Advanced HTML Elements Images
-
Adding a Long Description
Updated onArticleAn informative image often requires more description than the alt text allows (ideally 120 characters), so a longer description needs to be added. There are two ways to do this. You can include it on the page with the image in a show/hide toggle or link a document below the image.
Gen3 Course Template Advanced HTML Elements Images