Tables

Overview

Corporate web standards

  • Tables must only be used for tabular data. They must not be used for layout purposes
  • Tables should have at least two columns. If you have a table with only one column, replace it with a list
  • Tables must have headings

Use the Sitecore Table Wizard to ensure the correct HTML code is generated.

All tables should have a similar structure to this in the HTML view:

<table>
      <thead>
            <th>Name</th>
            <th>Role</th>
            <th>Phone</th>
      </thead>
      <tbody>
          <tr>
               <td>Amy</td>
               <td>Web Manager</td>
               <td>1234</td>
          </tr>
          <tr>
               <td>Ben</td>
               <td>Web Editor</td>
               <td>5678</td>
          </tr>
       </tbody>
</table>

Using this structure automatically styles up the header row with a dark background and white text.

Don't copy and paste tables into Sitecore. They won't display properly.
Example
Name Role Phone
Amy Web Manager 1234
Ben Web Editor 5678
WCMS use

Creating a new table with Sitecore's Table Wizard

  1. In the Rich Text Editor tool (Design view), click on the table icon.
  2. Click the words ‘Table Wizard’
  3. Add rows and columns using the + and – buttons
  4. Click the Accessibility tab
  5. In the ‘Heading rows’ box type in 1
  6. Click Ok.

This will create a blank table with one header row at the top.

Sitecore automatically fills table cells with blank spaces. You will need to manually remove these or you’ll end up with blank spaces in front of all of your cell data

Adding a header row to an existing table

To add a header row to an existing table, you will need to go into the HTML view and add it by hand. Make sure you add <tbody>...</tbody> tags to the rest of the table content.

Example

<table>
   <thead>
        <tr>
            <th>Column 1 heading</th>
            <th>Column 2 heading</th>
            <th>Column 3 heading</th>
        </tr>
   </thead>

   <tbody>
        <tr>
            <td>Column 1, row 1 data</td>
            <td>Column 2, row 1 data</td>
            <td>Column 3, row 1 data</td>
        </tr>
   </tbody>
</table>

 

Adding or removing rows or columns from an existing table

In Design view, right click the table. A series of options will be displayed, including adding and removing rows and columns.

MVC.net use
Code
Version and status
  • current version
  • Concept