Table

Standard User

Available to anyone with page-editing access

Data table components using Sunset Hills brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

Basic Table

Preview

Column 1	Column 2	Column 3
Data 1	Data 2	Data 3
Data 4	Data 5	Data 6
Data 7	Data 8	Data 9

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

Accent-Striped Table

Preview

Name	Department	Phone
Jane Smith	Front Office	(858) 521-0000
John Doe	Counseling	(858) 521-0001
Maria Garcia	Athletics	(858) 521-0002
Robert Kim	Activities	(858) 521-0003

<!-- TABLE - ACCENT STRIPED (SUNSET HILLS) -->
<table style="width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; border: 1px solid #e0e0e0;">
    <thead>
        <tr style="background-color: #004aad;">
            <th style="color: #ffffff; padding: 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #004aad;">Name</th>
            <th style="color: #ffffff; padding: 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #004aad;">Department</th>
            <th style="color: #ffffff; padding: 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #004aad;">Phone</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Jane Smith</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Front Office</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">(858) 521-0000</td>
        </tr>
        <tr style="background-color: rgb(255, 255, 255);">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">John Doe</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Counseling</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">(858) 521-0001</td>
        </tr>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Maria Garcia</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Athletics</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">(858) 521-0002</td>
        </tr>
        <tr style="background-color: rgb(255, 255, 255);">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Robert Kim</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Activities</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">(858) 521-0003</td>
        </tr>
    </tbody>
</table>