Create a table with a star rating and a link in a stylized box.

by NOVUSIDEA

HTML

<div style="font-family: 'Arial', sans-serif; color: #333; max-width: 800px; margin: auto; padding: 20px;">
    <p>Hallo {{ order.orderCustomer.firstName }} {{ order.orderCustomer.lastName }},</p>

    <p>herzlichen Dank für Ihr Vertrauen und Ihre Bestellung bei <strong>{{ order.salesChannel.translated.name }}</strong> am {{ order.orderDateTime|format_datetime('medium', 'short') }}. Wir hoffen, dass Sie mit Ihrer Bestellung voll und ganz zufrieden sind.</p>

    <p>Wir würden uns sehr freuen, wenn Sie sich einen Moment Zeit nehmen könnten, um Ihre Erfahrungen mit uns zu teilen. Ihre Bewertung hilft uns, unseren Service kontinuierliche zu verbessern.</p>

    <table role="presentation" style="margin: 20px 0; border: 1px solid #ddd; border-collapse: collapse;">
        <tr>
            <th style="padding: 0; text-align: right;">
                <a href="{{ reviewLink }}" style="text-decoration: none; color: #333; display: block; padding: 3px 16px;">Sehr gut</a>
            </th>
            <td style="padding: 0; font-size: 32px; letter-spacing: 2px;">
                <a href="{{ reviewLink }}" style="text-decoration: none; color: #333; display: block; padding: 3px 16px;">
                    <span style="color: #fc0;">★★★★★</span>
                </a>
            </td>
        </tr>
        <tr>
            <th style="padding: 0; text-align: right;">
                <a href="{{ reviewLink }}" style="text-decoration: none; color: #333; display: block; padding: 3px 16px;">Gut</a>
            </th>
            <td style="padding: 0; font-size: 32px; letter-spacing: 2px;">
                <a href="{{ reviewLink }}" style="text-decoration: none; color: #333; display: block; padding: 3px 16px;">
                    <span style="color: #fc0;">★★★★</span><span style="color: #ccc;">★</span>
                </a>
            </td>
        </tr>
        <tr>
            <th style="padding: 0; text-align: right;">
                <span...