Skip to content
Communications EO Resources

Table

The Table Component provides accessible, branded data tables for the Edlio CMS. Simply copy and paste any table style below directly into the WYSIWYG editor, then customize the content to fit your needs.

Key Features

Section titled “Key Features”

Multiple Header Styles

Navy Alt, Dark Navy, PUSD Gold, and Light Blue header variants to match any content type or page context.

Accessible Markup

Semantic <table>, <thead>, <tbody>, <th>, and <td> elements. Headers provide automatic context to screen readers.

Striping Patterns

Subtle light stripe (#f8f9fa) and strong contrast stripe (#d3d3d3) options keep rows scannable.

No Dependencies

Pure HTML with inline CSS — works immediately in Edlio CMS with no external stylesheets required.

Table Styles & When to Use

Section titled “Table Styles & When to Use”
StyleHeader ColorBest Used For
Basic (Alt Navy)#3a57a8 + light stripeGeneral data, schedules, comparisons
Striped (Gray)#3a57a8 + gray stripeContact lists, directories, rosters
Gold Header#f0ad4e + warm stripeEvents, calendars, announcements
Light Blue Header#54c8eb + blue stripeResources, guides, reference lists
Compact (Minimal)#003366 border-bottom onlyDates, quick reference, key-value pairs
Two-Column Rich#3a57a8 + light stripeDivision contacts with multi-line cell content

Copy-Paste Code

Section titled “Copy-Paste Code”

Select any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

<!-- BASIC TABLE (PUSD Navy Header) -->
<table style="width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; border: 1px solid #dce0ef; border-radius: 4px; overflow: hidden;">
    <thead>
        <tr style="background-color: #3a57a8;">
            <th style="color: white; padding: 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #2a4788;">Column 1</th>
            <th style="color: white; padding: 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #2a4788;">Column 2</th>
            <th style="color: white; padding: 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #2a4788;">Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 1</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 2</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 3</td>
        </tr>
        <tr style="background-color: #f8f9fa;">
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 4</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 5</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 6</td>
        </tr>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 7</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 8</td>
            <td style="padding: 12px; border: 1px solid #dce0ef; font-size: 14px; color: #333;">Data 9</td>
        </tr>
    </tbody>
</table>

Layout Options

Section titled “Layout Options”
OptionHow to ApplyNotes
Full widthwidth: 100% on <table>Default for all variants
Fixed columnstable-layout: fixed on <table>Prevents overflow; columns share width equally
Custom column widthsAdd width: XX% to <th> or <td>Column widths must total 100%
Rich cell contentUse <strong>, <br>, <a href=""> inside <td>See Two-Column Rich variant
Center-aligned texttext-align: center on <th> or <td>Override text-align: left as needed

PUSD Brand Colors Reference

Section titled “PUSD Brand Colors Reference”
Color NameHEXUsed In
PUSD Navy#003366Compact header, border
PUSD Alt 3 (Deep Blue)#3a57a8Basic, Striped, Two-Column headers
PUSD Light Blue#54c8ebLight Blue header
PUSD Gold#f0ad4eGold header
PUSD Alt 1 (Light Gray-Blue)#dce0efCell borders throughout
Light Gray Stripe#f8f9faSubtle alternating row
Medium Gray Stripe#d3d3d3Strong contrast alternating row
Warm Stripe#fef9f0Gold header alternating row
Blue Stripe#e8f7fcLight Blue header alternating row

Customization Guide

Section titled “Customization Guide”

  1. Add rows — Copy an existing <tr>...</tr> block from <tbody> and paste it below the last row. Maintain the correct alternating background-color to preserve striping.

  2. Remove rows — Delete the entire <tr>...</tr> block for any row you don’t need.

  3. Add columns — Add a <th> in <thead> and a matching <td> in every <tbody> row. Keep <th> and <td> counts consistent across all rows.

  4. Remove columns — Delete the corresponding <th> and all matching <td> elements from every row.

  5. Change header color — Replace the background-color value in the <tr style="..."> inside <thead>. Also update the border color on <th> elements to match.

  6. Adjust column widths — Add width: XX%; to individual <th> style attributes. Widths should total 100%.

  7. Add rich content — Use <strong>, <br>, and <a href=""> tags directly inside <td> cells for multi-line or linked content.

  8. Adjust text alignment — Change text-align: left to center or right on any <th> or <td> as needed.

Accessibility

Section titled “Accessibility”

Best Practices

Section titled “Best Practices”