Tables With Color

Code Snippet Library

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 Caption
Header Header Header

 

 

 

 

 

 
Code: 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: #102644;">Table Caption</caption>
    <colgroup>
        <col style="border: 1px solid #cccccc; width: 33.33%;" />
        <col style="border: 1px solid #cccccc; width: 33.33%;" />
        <col style="border: 1px solid #cccccc; width: 33.33%;" />
    </colgroup>
     <thead>
        <tr style="border: 1px solid #cccccc;">
            <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>
   </thead>
  <tbody>
        <tr style="border: 1px solid #cccccc;">
            <td style="padding: 0.5em;">
                <p>&nbsp;</p>
            </td>
            <td style="padding: 0.5em;">
                <p>&nbsp;</p>
            </td>
            <td style="padding: 0.5em;">
                <p>&nbsp;</p>
            </td>
        </tr>
        <tr style="border: 1px solid #cccccc;">
            <td style="padding: 0.5em;">
                <p>&nbsp;</p>
            </td>
            <td style="padding: 0.5em;">
                <p>&nbsp;</p>
            </td>
            <td style="padding: 0.5em;">
                <p>&nbsp;</p>
            </td>
        </tr>
    </tbody>
</table>

The colors can be adjusted. Check color contrast to ensure accessibility.

 

Table With Data in Color

Text Color Changes Table
Things Header 1 Header 2
Thing 1 1 2

 

Code: Table With Data in Color 
<table style="border-collapse: collapse; width: 90%; margin-left: auto; margin-right: auto;" border="1">
    <caption>Text Color Changes Table</caption>
    <thead>
        <tr style="border: 1px solid black;">
            <th style="border: 1px solid black; width: 26.8199%; height: 61px;" scope="col">
                <span style="color: #000000;">Things</span>
            </th>
            <th style="border: 1px solid black; width: 36.3985%; height: 61px;" scope="col">Header 1</th>
            <th style="border: 1px solid black; width: 36.3985%; height: 61px;" scope="col">Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border: 1px solid black;">
            <th style="border: 1px solid black; width: 26.8199%; height: 61px;" scope="row">Thing 1</th>
            <td style="text-align: center; border: 1px solid black; width: 36.3985%; height: 61px;">
                <span style="color: #ba372a;">1</span>
            </td>
            <td style="text-align: center; border: 1px solid black; width: 36.3985%; height: 61px;">
                <span style="color: #ba372a;">2</span>
            </td>
        </tr>
    </tbody>
</table>

 

Table With Borders in Color

Black Solid and Red Double
Things Header 1 Header 2
Thing 1 1 2

 

Code: Table With Borders in Color 
<table style="border-collapse: collapse; width: 90%;">
    <caption>Black Solid and Red Double</caption>
    <thead>
        <tr>
            <th style="border: 1px solid black;" scope="col">Things</th>
            <th style="border: 1px solid black;" scope="col">Header 1</th>
            <th style="border: 1px solid black;" scope="col">Header 2</th>
        </tr>
    </thead>
     <tbody>
        <tr>
            <th style="text-align: center; border: 2px double #ba372a;" scope="row">Thing 1</th>
            <td style="text-align: center; border: 2px double #ba372a;">1</td>
            <td style="text-align: center; border: 2px double #ba372a;">2</td>
        </tr>
    </tbody>
</table>

 

Table With Alternating Shaded Rows

Table with Alternating Shaded Rows
Things   Header 1   Header 2    Header 3 
 Thing 1  data data data
 Thing 2  data data data
 Thing 3  data data data

 

Code: 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>
    <thead>
        <tr style="height: 35px; border-bottom: 3px solid black;">
            <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>
    </thead>
     <tbody>
        <tr style="height: 35px; background-color: #e5f5fb;">
            <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: #e5f5fb;">
            <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.