Compare Chart

Standard User

Available to anyone with page-editing access

Side-by-side comparison tables using Oak Valley brand colors. Copy any snippet below and paste it directly into the Edlio CMS WYSIWYG editor.

Basic Compare Chart

Preview

Features	Option A	Option B
Basic Access	✓	✓
Advanced Features	✗	✓
Priority Support	✗	✓

<!-- COMPARE CHART - BASIC 3-COLUMN (OAK VALLEY) -->
<table style="width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; border: 1px solid #e0e0e0;">
    <thead>
        <tr style="background-color: #5B643A;">
            <th style="padding: 16px 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #5B643A; color: #ffffff; width: 40%;">Features</th>
            <th style="padding: 16px 12px; text-align: center; font-weight: 600; font-size: 14px; border: 1px solid #5B643A; color: #ffffff;">Option A</th>
            <th style="padding: 16px 12px; text-align: center; font-weight: 600; font-size: 14px; border: 1px solid #5B643A; color: #ffffff;">Option B</th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Basic Access</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #28a745; text-align: center;">✓</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #28a745; text-align: center;">✓</td>
        </tr>
        <tr style="background-color: #f8f9fa;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Advanced Features</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #28a745; text-align: center;">✓</td>
        </tr>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Priority Support</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #28a745; text-align: center;">✓</td>
        </tr>
    </tbody>
</table>

Recommended Column

Preview

Features	Standard	RECOMMENDED Enhanced
Basic Access	✓	✓
Advanced Features	✗	✓
Priority Support	✗	✓

<!-- COMPARE CHART - RECOMMENDED COLUMN (OAK VALLEY) -->
<table style="width: 100%; table-layout: fixed; border-collapse: collapse; margin: 20px 0; border: 1px solid #e0e0e0;">
    <thead>
        <tr style="background-color: #5B643A;">
            <th style="padding: 16px 12px; text-align: left; font-weight: 600; font-size: 14px; border: 1px solid #5B643A; color: #ffffff; width: 40%;">Features</th>
            <th style="padding: 16px 12px; text-align: center; font-weight: 600; font-size: 14px; border: 1px solid #5B643A; color: #ffffff;">Standard</th>
            <th style="padding: 16px 12px; text-align: center; font-weight: 600; font-size: 14px; border: 3px solid #D1D2D4; color: #ffffff;">
                <span style="display: block; background-color: #D1D2D4; color: #1a1a1a; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 4px; letter-spacing: 0.5px;">RECOMMENDED</span>
                Enhanced
            </th>
        </tr>
    </thead>
    <tbody>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Basic Access</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #28a745; text-align: center;">✓</td>
            <td style="padding: 12px; border-left: 3px solid #D1D2D4; border-right: 3px solid #D1D2D4; border-bottom: 1px solid #e0e0e0; font-size: 18px; color: #28a745; text-align: center; background-color: #fafafa;">✓</td>
        </tr>
        <tr style="background-color: #f8f9fa;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Advanced Features</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border-left: 3px solid #D1D2D4; border-right: 3px solid #D1D2D4; border-bottom: 1px solid #e0e0e0; font-size: 18px; color: #28a745; text-align: center; background-color: #f4f4f4;">✓</td>
        </tr>
        <tr style="background-color: #ffffff;">
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 14px; color: #333;">Priority Support</td>
            <td style="padding: 12px; border: 1px solid #e0e0e0; font-size: 18px; color: #dc3545; text-align: center;">✗</td>
            <td style="padding: 12px; border-left: 3px solid #D1D2D4; border-right: 3px solid #D1D2D4; border-bottom: 3px solid #D1D2D4; font-size: 18px; color: #28a745; text-align: center; background-color: #fafafa;">✓</td>
        </tr>
    </tbody>
</table>