Centered Basic Table
The table is centered on the page, and all cell contents are centered. (Note that table column headers designated with scope="col" or row headers designated with scope="row" are centered by default.)
<table style="border-collapse: collapse; width: 90%; border-style: solid; border-color: #BE0000; margin-left: auto; margin-right: auto;" border="1" summary="brief description of the table (optional)">
<caption style="font-size: 100%; color: #BE0000;">Centered Basic Table</caption>
<tbody>
<tr style="background-color: #BE0000; color: #FFFFFF;">
<th style="text-align: center;" scope="col">Types of Things</th>
<th scope="col">Header 1</th>
<th scope="col">Header 2</th>
<th scope="col">Header 3</th>
</tr>
<tr>
<th scope="row" style="background-color: #890000; color: #FFFFFF;">Thing 1</th>
<td style="text-align: center;">1</td>
<td style="text-align: center;">2</td>
<td style="text-align: center;">3</td>
</tr>
<tr>
<th scope="row" style="background-color: #890000; color: #FFFFFF;">Thing 2</th>
<td style="text-align: center;">4</td>
<td style="text-align: center;">5</td>
<td style="text-align: center;">6</td>
</tr>
</tbody>
</table>Table With Invisible Borders, Centered Text, and Cell Size Changes
<table style="border-collapse: collapse; width: 90%; height: 137px;" border="0" cellpadding="10">
<caption style="color: #BE0000;">No Visible Borders, Centered Text, Height and Width Changes</caption>
<tbody>
<tr style="height: 46px; background-color: #BE0000; color: #FFFFFF;">
<th style="height: 46px;" scope="col">Types of Things</th>
<th style="height: 46px;" scope="col">Header 1</th>
<th style="height: 46px;" scope="col">Header 2</th>
<th style="height: 46px;" scope="col">Header 3</th>
</tr>
<tr style="height: 46px;">
<th style="height: 46px; background-color: #890000; color: #FFFFFF;" scope="row">Thing 1</th>
<td style="text-align: center; height: 46px;">1</td>
<td style="height: 46px; text-align: center;">2</td>
<td style="height: 46px; text-align: center;">3</td>
</tr>
<tr style="height: 46px;">
<th style="height: 46px; background-color: #890000; color: #FFFFFF;" scope="row">Thing 2</th>
<td style="text-align: center; height: 46px;">4</td>
<td style="height: 46px; text-align: center;">5</td>
<td style="height: 46px; text-align: center;">6</td>
</tr>
</tbody>
</table>Best Practice: Use a Percentage for the Width
Responsive tables adjust the width to a designated percentage of the available screen width when the screen size changes.This is now the default in Canvas for responsive tables, but you may find older tables that use fixed width.
Using the RCE
The table menu in the RCE will allow you to add or delete rows and columns and make adjustments to cell, row, or table properties, including height, width, alignment, and color. In particular, the Table Properties menu in the RCE will allow you to adjust the
- width,
- height,
- cell spacing,
- cell padding,
- border width,
- caption, and
- alignment.
The advanced Table Properties menu allows you to adjust the border style, border color, and background color.
0 Comments
Add your comment