Атрибут align тега <colgroup> — вирівнювання в колонках

HTML

<p>З атрибутом (сучасні браузери ігнорують):</p>
<table>
    <colgroup span="2" align="left"></colgroup>
    <colgroup align="right"></colgroup>
    <tr><th>ISBN</th><th>Назва</th><th>Ціна</th></tr>
    <tr><td>3476896</td><td>Мій перший HTML</td><td>53 грн</td></tr>
</table>
<p>Сучасний спосіб — CSS:</p>
<table>
    <tr><th>ISBN</th><th>Назва</th><th class="r">Ціна</th></tr>
    <tr><td>3476896</td><td>Мій перший HTML</td><td class="r">53 грн</td></tr>
</table>

CSS

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

td, th {
    border: 1px solid #0172ad;
    padding: 4px 8px;
}

.r {
    text-align: right;
}

HTML

<table class="bad">
    <caption>1. colgroup align="right" і col align="right" — не діє нічого</caption>
    <colgroup><col><col align="right"></colgroup>
    <thead><tr><th>Товар</th><th>Ціна</th></tr></thead>
    <tbody>
        <tr><td>Олівець</td><td>7,50</td></tr>
        <tr><td>Ноутбук</td><td>1249,99</td></tr>
    </tbody>
</table>

<table class="bad cherez-styli">
    <caption>2. text-align у стилях на colgroup і на col — теж не діє</caption>
    <colgroup><col><col class="prava"></colgroup>
    <thead><tr><th>Товар</th><th>Ціна</th></tr></thead>
    <tbody>
        <tr><td>Олівець</td><td>7,50</td></tr>
        <tr><td>Ноутбук</td><td>1249,99</td></tr>
    </tbody>
</table>

<table class="skvoz">
    <caption>3. Що крізь колонку таки проходить: тло й ширина</caption>
    <colgroup><col class="shyroka"><col class="pidsvichena"></colgroup>
    <thead><tr><th>Товар</th><th>Ціна</th></tr></thead>
    <tbody>
        <tr><td>Олівець</td><td>7,50</td></tr>
        <tr><td>Ноутбук</td><td>1249,99</td></tr>
    </tbody>
</table>

<table class="good">
    <caption>4. Робочий спосіб: nth-child по комірках</caption>
    <thead><tr><th>Товар</th><th>Ціна</th></tr></thead>
    <tbody>
        <tr><td>Олівець</td><td>7,50</td></tr>
        <tr><td>Ноутбук</td><td>1249,99</td></tr>
    </tbody>
</table>

CSS

table {
    width: 100%;
    max-width: 420px;
    margin-bottom: 18px;
    border-collapse: collapse;
}

caption {
    margin-bottom: 5px;
    font-weight: 600;
    text-align: left;
}

th,
td {
    padding: 5px 10px;
    border: 1px solid #b9c6d8;
}

th {
    background: #eef3fb;
}

.bad caption {
    color: #c0392b;
}

.bad {
    outline: 2px dashed #d64545;
    outline-offset: 3px;
}

/* обидва правила нижче не спрацюють: крізь колонку text-align не проходить */
.cherez-styli colgroup {
    text-align: right;
}

.cherez-styli .prava {
    text-align: right;
}

.skvoz .shyroka {
    width: 60%;
}

.skvoz .pidsvichena {
    background: #fff6d8;
}

.skvoz caption {
    color: #8a6100;
}

.good caption {
    color: #1b5e20;
}

.good {
    outline: 2px solid #3a9a4f;
    outline-offset: 3px;
}

.good th:nth-child(2),
.good td:nth-child(2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}