Color can be specified in the RCE by using one of the preset colors or a custom color by selecting the artist palette icon (see the section on color in this resource for additional information). If you change the colors specified on this page, make sure the background color contrasts well with the font color and meets accessibility requirements for contrast. Also, be sure that you aren't solely relying on color to convey meaning - if colors have a meaning, they should also have another indicator, such as a symbol or text, to convey the same meaning. Use the accessibility checker in the RCE to verify color contrast.
Table With Styled Caption, Gray Borders, and Padding
<table style="width: 100%; border-collapse: collapse; margin: 3em auto 3em auto; text-align: center;">
<caption style="font-size: 120%; text-align: left; padding: 5px 10px; color: #ffffff; background: #BE0000;">Table Caption</caption>
<colgroup>
<col style="border: 1px solid #707271; width: 33.33%;" />
<col style="border: 1px solid #707271; width: 33.33%;" />
<col style="border: 1px solid #707271; width: 33.33%;" />
</colgroup>
<tbody>
<tr style="border: 1px solid #707271;">
<th style="padding: 0.5em;" scope="col">Header</th>
<th style="padding: 0.5em;" scope="col">Header</th>
<th style="padding: 0.5em;" scope="col">Header</th>
</tr>
<tr style="border: 1px solid #707271;">
<td style="padding: 0.5em;">
<p> </p>
</td>
<td style="padding: 0.5em;">
<p> </p>
</td>
<td style="padding: 0.5em;">
<p> </p>
</td>
</tr>
<tr style="border: 1px solid #707271;">
<td style="padding: 0.5em;">
<p> </p>
</td>
<td style="padding: 0.5em;">
<p> </p>
</td>
<td style="padding: 0.5em;">
<p> </p>
</td>
</tr>
</tbody>
</table>The colors can be adjusted. Check color contrast to ensure accessibility.
Table With Borders in Color
<table style="border-collapse: collapse; width: 90%;">
<caption>Utah Red Solid and Double</caption>
<tbody>
<tr>
<th style="border: 1px solid #BE0000;" scope="col">Things</th>
<th style="border: 1px solid #BE0000;" scope="col">Header 1</th>
<th style="border: 1px solid #BE0000;" scope="col">Header 2</th>
</tr>
<tr>
<th style="text-align: center; border: 2px double #890000;" scope="row">Thing 1</th>
<td style="text-align: center; border: 2px double #890000;">1</td>
<td style="text-align: center; border: 2px double #890000;">2</td>
</tr>
</tbody>
</table>Table With Alternating Shaded Rows
<table style="border-collapse: collapse; width: auto; height: 140px; margin-left: auto; margin-right: auto;" border="0">
<caption><span style="color: #000000;">Table with Alternating Shaded Rows</span></caption>
<tbody>
<tr style="height: 35px; border-bottom: 3px solid #BE0000;">
<th style="height: 35px;" scope="col">Things</th>
<th style="height: 35px;" scope="col">Header 1</th>
<th style="height: 35px;" scope="col">Header 2</th>
<th style="height: 35px;" scope="col">Header 3</th>
</tr>
<tr style="height: 35px; background-color: #E2E6E6;">
<td style="height: 35px;">Thing 1</td>
<td style="text-align: center;">data</td>
<td style="text-align: center;">data</td>
<td style="height: 35px; text-align: center;">data</td>
</tr>
<tr style="height: 35px;">
<td style="height: 35px;">Thing 2</td>
<td style="height: 35px; text-align: center;">data</td>
<td style="height: 35px; text-align: center;">data</td>
<td style="height: 35px; text-align: center;">data</td>
</tr>
<tr style="height: 35px; background-color: #E2E6E6;">
<td style="height: 35px;">Thing 3</td>
<td style="height: 35px; text-align: center;">data</td>
<td style="height: 35px; text-align: center;">data</td>
<td style="height: 35px; text-align: center;">data</td>
</tr>
</tbody>
</table>Modifications
Many table attributes, including border, row, column, and cell color may be changed via the table properties or advanced table properties menu. However, you may need to edit in HTML using inline CSS to adjust some specifics. Table color modifications in HTML include the following:
- Border style and color:Change border style or color by adding, deleting, or modifying the border style tag (style="border: 1px solid black;").
- Cell, row, or column shading:Change shading by adding, deleting, or modifying the background color tag (style="background-color: #e5f5fb;").
- Text color:Change text color by adding, deleting, or modifying the color tag (style="color: #ba372a;"), which can either be in the HTML element style e.g., (<th>) tag or added with a (<span>) tag.
- Caption style:Changes are accomplished by using (caption style=) followed by the desired attribute details in quotes - a column group (<colgroup>) can be created to apply styling to a group instead of coding each line individually.
0 Comments
Add your comment