Table Borders and Shading

Code Tutorial

Sometimes 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.

Border Basics

Using the border attribute within the table tag for style provides the border around the outside of the table. Using this attribute within the table row or table head tags provide borders for specific cells. In addition, much like image borders, you can specify table borders using (border), (border-top), (border-right), (border-bottom), or (border-left) followed by the desired border width (border-width), color (border-color) and style (border-style), or you can specify all three at once using, for example, (border-bottom: 1px solid black). Websites HTML.am Links to an external site. and Color Hex Links to an external site. can be helpful resources when trying to match specific border and color styles.

Shading a Row or Column

Shading a row or column can be accomplished in the RCE by selecting the desired row(s)/column(s), then using the advanced table properties menu to select your shade in background color. In code, use background-color, followed by your desired color in hex code or HTML color name (see module on color for more information), with the style attribute (style="") for the associated row's opening tag (<tr>) or column's tag (<col />). Note that to apply a style to a column, the table code will need to include column group tags (<colgroup></colgroup>) that surround column tags for each of the table's columns.

Table With Shaded Row
Header Row	Col 1	Col 2
Row 1	1.1	1.2
Row 2	2.1	2.2

Table With Shaded Column
Header Row	Col 1	Col 2
Row 1	1.1	1.2
Row 2	2.1	2.2

Code: Shading a Row or Column

Row Shading

<table style="border: 1px solid; max-width: 100%; min-width: 40%; margin: 1.5rem auto; float: left;">
    <caption>Table with Shaded Row</caption>
    <colgroup>
        <col style="border: 1px solid;" />
        <col style="border: 1px solid;" />
        <col style="border: 1px solid;" />
    </colgroup>
    <thead>
        <tr style="border: 1px solid;">
            <th scope="row">Header Row</th>
            <th scope="col">Col 1</th>
            <th scope="col">Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr style="border: 1px solid;">
            <th scope="row">Row 1</th>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr style="border: 1px solid; background-color: #e5f5fb;">
            <th scope="row">Row 2</th>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </tbody>
</table>

Column Shading

<table style="border: 1px solid; max-width: 100%; min-width: 40%; margin: 1.5rem auto; float: right;">
    <caption>Table with Shaded Column</caption>
    <colgroup>
        <col style="border: 1px solid;" />
        <col style="border: 1px solid;" />
        <col style="border: 1px solid; background-color: #e5f5fb;" />
    </colgroup>
    <thead>
        <tr style="border: 1px solid;">
            <th scope="row">Header Row</th>
            <th scope="col">Col 1</th>
            <th scope="col">Col 2</th>
        </tr>
    </thead>
    <tbody>
        <tr style="border: 1px solid;">
            <th scope="row">Row 1</th>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
        <tr style="border: 1px solid;">
            <th scope="row">Row 2</th>
            <td>2.1</td>
            <td>2.2</td>
        </tr>
    </tbody>
</table>

Shading Individual Cells

Select an individual cell to use the general table properties menu to shade an individual cell or, in code, add a style to the td tag to specify the background color for a specific cell.

Table With Shaded Cell
Things	Header 1	Header 2
Thing 1	1	2

Code: Table With Shaded Cell

<table style="border-collapse: collapse; width: auto; margin-left: auto; margin-right: auto;" border="1" cellpadding="5">
<caption>Table Caption</caption>
<thead>
<tr style="height: 25px; border: 1px solid black;">
<th style="height: 25px; border: 1px solid black;" scope="col">Things</th>
<th style="height: 25px; border: 1px solid black;" scope="col">Header 1</th>
<th style="height: 25px; border: 1px solid black;" scope="col">Header 2</th>
</tr>
</thead>
<tbody>
<tr style="height: 27px; border: 1px solid black;">
<th style="height: 27px; border: 1px solid black;" scope="row">Thing 1</th>
<td style="height: 27px; text-align: center; border: 1px solid black; background-color: #e5f5fb;">1</td>
<td style="height: 27px; text-align: center; border: 1px solid black;">2</td>
</tr>
</tbody>
</table>