dw-sheet-data-checker/templates/editor/setting-table-card.php

<table class="table checker-setting" data-toggle="table" id="checker-card">
    <tbody>
        <tr class="sheet_link">
            <th><label for="link">Sheet CSV/TSV Link</label></th>
            <td><textarea type="url" id="link" name="checker[link]" class="form-control sheet-url"><?php echo esc_url( $checker['link'] ?? '' ); ?></textarea></td>
        </tr>
        <tr class="has-link" style="display: none;">
            <th><label for="description">Description</label></th>
            <td><textarea id="description" class="form-control" name="checker[description]"><?php echo esc_textarea( $checker['description'] ?? '' ); ?></textarea></td>
        </tr>
        <tr class="has-link" style="display:none;">
            <th>Card</th>
            <td>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Width</label></div>
                    <div class="col-9">
                        <div class="input-group">
                            <input type="number" name="checker[card][width]" class="form-control border card-width" value="<?php echo esc_attr( $checker['card']['width'] ?? '500' ); ?>" />
                            <span class="input-group-text">px</span>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Background</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[card][background]" class="form-control border card-background" value="<?php echo esc_attr( $checker['card']['background'] ?? '#cccccc' ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Color Opacity</label></div>
                    <div class="col-9">
                        <div class="input-group">
                            <input type="number" name="checker[card][bg_opacity]" class="form-control border card-bg-opacity" min="0" max="100" step="1" value="<?php echo esc_attr( $checker['card']['bg_opacity'] ?? '100' ); ?>" />
                            <span class="input-group-text">%</span>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Padding</label></div>
                    <div class="col-9">
                        <div class="input-group">
                            <input type="number" name="checker[card][padding]" class="form-control border card-padding" value="<?php echo esc_attr( $checker['card']['padding'] ?? '1' ); ?>" />
                            <span class="input-group-text">em</span>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Border Radius</label></div>
                    <div class="col-9">
                        <div class="input-group">
                            <input type="number" name="checker[card][border_radius]" class="form-control border card-border-radius" value="<?php echo esc_attr( $checker['card']['border_radius'] ?? '1' ); ?>" />
                            <span class="input-group-text">em</span>
                        </div>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Box Shadow</label></div>
                    <div class="col-9">
                        <div class="input-group">
                            <input type="text" name="checker[card][box_shadow]" class="form-control border card-box-shadow" value="<?php echo esc_attr( $checker['card']['box_shadow'] ?? '10px 5px 15px -5px' ); ?>" />
                            <input type="color" name="checker[card][box_shadow_color]" class="form-control border card-box-shadow-color" value="<?php echo esc_attr( $checker['card']['box_shadow_color'] ?? '#333333' ); ?>" />
                        </div>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="has-link" style="display:none;">
            <th>Title & Description</th>
            <td>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Title Color</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[card][title]" class="form-control border card-title" value="<?php echo esc_attr( $checker['card']['title'] ?? '#333333' ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Title Align</label></div>
                    <div class="col-9">
                        <select name="checker[card][title_align]" class="form-select form-control border card-title-align">
                            <option value="left" <?= ($checker['card']['title_align'] == 'left') ? 'checked' : '' ?>>Left</option>
                            <option value="center" <?= ($checker['card']['title_align'] == 'center') ? 'checked' : '' ?>>Center</option>
                            <option value="right" <?= ($checker['card']['title_align'] == 'right') ? 'checked' : '' ?>>Right</option>
                        </select>
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Description Color</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[card][description]" class="form-control border card-description" value="<?php echo esc_attr( $checker['card']['description'] ?? '#333333' ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Description Align</label></div>
                    <div class="col-9">
                        <select name="checker[card][description_align]" class="form-select form-control border card-description-align">
                            <option value="left" <?= ($checker['card']['description_align'] == 'left') ? 'checked' : '' ?>>Left</option>
                            <option value="center" <?= ($checker['card']['description_align'] == 'center') ? 'checked' : '' ?>>Center</option>
                            <option value="right" <?= ($checker['card']['description_align'] == 'right') ? 'checked' : '' ?>>Right</option>
                        </select>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="has-link" style="display:none;">
            <th>Divider</th>
            <td>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Color</label></div>
                    <div class="col-9">
                        <input type="color" name="checker[card][divider]" class="form-control border card-divider" value="<?php echo esc_attr( $checker['card']['divider'] ?? '#333333' ); ?>" />
                    </div>
                </div>
                <div class="row mb-2">
                    <div class="col-3"><label class="form-label fw-bold mb-0">Width</label></div>
                    <div class="col-9">
                        <div class="input-group">
                            <input type="number" name="checker[card][divider_width]" class="form-control border card-divider-width" value="<?php echo esc_attr( $checker['card']['divider_width'] ?? '1' ); ?>" />
                            <span class="input-group-text">px</span>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>