University of Utah / Advanced HTML Elements / Tables

Basic Tables

Updated on Aug 23, 2024

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

Code: Centered Basic Table

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

Click to copy

Table With Invisible Borders, Centered Text, and Cell Size Changes

Code: 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>

Click to copy

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

Previous Article Table Overview

Next Article Tables With Color