Tables

HTML tables are used to display tabular data in a structured format. They are especially useful when you need to present information in rows and columns.

In Sitefinity

Within the Sitefinity Content Management System we’ve adopted a consistent use of the same fonts, sizing, color and formatting options so as users are building the website content, there is a cohesive, recognizable brand-standard.

Every content module is carefully crafted to support and reflect these styles. Tables are edited using the WYSIWYG editor.

The Basics

Here are the key points on when and why to use HTML tables:

When to Use HTML Tables

Tabular Data: Use tables to display data that naturally fits into a grid of rows and columns.
- Examples:
  - Financial reports
  - Timetables and schedules
  - Comparison charts
  - Inventory lists
Organized Information: When you need to present information in a way that highlights relationships between data points.
- Examples:
  - Product specifications
  - Pricing tables
  - Attendance records

Why to Use HTML Tables

Structured Layout: Tables provide a clear and organized way to display complex data, making it easier for users to read and understand the information.
Semantic HTML: Using <table>, <thead>, <tbody>, <tr>, <th>, and <td> elements correctly ensures that the table is semantically meaningful, improving accessibility and SEO. Screen readers and other assistive technologies can better interpret the data.
Styling and Control: Tables can be styled using CSS to enhance their appearance and make the data more visually appealing and easier to digest.
Accessibility: Properly marked-up tables, including headers (<th>) and captions (<caption>), improve accessibility for users relying on screen readers, as they can navigate and understand the table's structure and content.

How to Use HTML Tables

Best Practices

Use Tables Only for Tabular Data: Avoid using tables for layout purposes. Use CSS for page layout instead.
Include Headers and Captions: These improve accessibility and provide context for the data.
Ensure Responsiveness: Use CSS to ensure tables are readable on all devices, especially on smaller screens.

In these examples:

The <table> element is a wrapper around all table elements
The <caption> element provides a title for the table
The <thead> element contains the header row defined with <tr>
- Each heading is represented with a <th>
The <tbody> element contains the data or body of all other rows defined with <tr>
- Each data cell is represented with a <td>

Table: Default

Caption Text
Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table>
    <caption>Caption Text</caption>
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table Divider

CSS Classes: table-divider

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-divider">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table Border + Divider

CSS Classes: table-border table-divider

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-border table-divider">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table Striped

CSS Classes: table-striped

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-striped">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table Hover

CSS Classes: table-hover

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-hover">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Table Small

CSS Classes: table-small

Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data
Table Data	Table Data	Table Data

<table class="table-small">
    <thead>
        <tr>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
            <th scope="col">Table Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
        <tr>
            <td>Table Data</td>
            <td>Table Data</td>
            <td>Table Data</td>
        </tr>
    </tbody>
</table>

Responsive Overflow Wrapper

CSS Classes: table-overflow

Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading	Table Heading
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data
Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data	Table Data

<div class="table-overflow">
    <table class="table-border table-divider">
        <thead>
            <tr>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
                <th scope="col">Table Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
            <tr>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
                <td>Table Data</td>
            </tr>
        </tbody>
    </table>
</div>

Sitefinity Modules

Content modules create collections of content that can be displayed on web pages and in templates. The following modules allow users to manipulate tables on the websites through the WYSIWYG editor on the widgets or content items: Content Blocks, Lists, Blogs and Events modules. Learn more about adding content and classes to each of these modules by clicking on the provided links.

The WYSIWYG editor helps keep websites in-brand by allowing users to add html tags and classes to text without needing to edit the HTML by using the formatting options in the dropdown. Learn how to use the WYSIWYG editor.

HTML & pre-written classes

Manipulating the pre-written styles requires a solid knowledge of HTML and CSS and is discouraged unless you have spoken with a member of the web branding team. The fonts are to never be overridden with different fronts, and any changes made must pass AAA compliance for web accessibility.

Custom work can be applied to any content type which provides a WYSIWYG editor or has a “more options” area where a custom class can be added and has a display option of full HTML given the changes are not conflicting with other work on the page.