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

HTML

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

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

<table class="bad">
  <caption>3. text-align просто на col — не доходить до комірок</caption>
  <col><col class="hoch-pravo">
  <thead><tr><th>Товар</th><th>Ціна</th></tr></thead>
  <tbody>
    <tr><td>Олівець</td><td>7</td></tr>
    <tr><td>Ноутбук</td><td>1249</td></tr>
  </tbody>
</table>

<table class="good">
  <caption>4. td:nth-child(2) — те, що працює</caption>
  <thead><tr><th>Товар</th><th>Ціна</th></tr></thead>
  <tbody>
    <tr><td>Олівець</td><td>7</td></tr>
    <tr><td>Ноутбук</td><td>1249</td></tr>
  </tbody>
</table>

<table class="good">
  <caption>5. Що крізь col таки проходить: ширина, тло, зникнення</caption>
  <col class="shyrokyi"><col class="tlo"><col class="znykla">
  <thead><tr><th>Ширина 160px</th><th>Тло</th><th>Схована</th></tr></thead>
  <tbody>
    <tr><td>а</td><td>б</td><td>в</td></tr>
    <tr><td>г</td><td>д</td><td>е</td></tr>
  </tbody>
</table>

<p class="note">У п'ятій таблиці третьої колонки не видно зовсім: це
   visibility: collapse на самому col. Ширина й тло теж задані стовпцям,
   а не коміркам — на відміну від вирівнювання, ці властивості крізь col проходять.</p>

CSS

table {
    width: 100%;
    max-width: 460px;
    margin-bottom: 20px;
    border-collapse: collapse;
}

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

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

thead th {
    background: #eef3fb;
}

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

.bad caption {
    color: #c0392b;
}

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

.good caption {
    color: #1b5e20;
}

/* Не спрацює: col не є предком комірок, успадковувати нема чого. */
.hoch-pravo {
    text-align: right !important;
}

/* А оце — робочий спосіб вирівняти стовпець. */
.good tbody td:nth-child(2),
.good thead th:nth-child(2) {
    text-align: right;
}

.shyrokyi {
    width: 160px;
}

.tlo {
    background: #fff6d8;
}

.znykla {
    visibility: collapse;
}

.note {
    max-width: 460px;
    margin-top: 12px;
    color: #5a6472;
    font-size: .9em;
}

HTML

<h3>З використанням атрибуту align </h3>
<table border="1">
<colgroup>
        <col  align="right" width="50%" valign="top" />
        <col align="right" width="250" />
        <col span="3" width="250" align="right"  />
    </colgroup>
    <tr>
        <th>Смартфони</th>
        <th>Ноутбуки</th>
        <th>Планшети</th>
    </tr>
    <tr>
        <td>Samsung S8</td>
        <td>Lenovo G560</td>
        <td>Samsung Galaxy Tab E </td>
    </tr>
    <tr>
        <td>Samsung S8+</td>
        <td>Asus VivoBook S</td>
        <td>Samsung Galaxy Tab A</td>
    </tr>
</table>

CSS

table {
    width: 100%; 
   }
   td {
    border: 1px solid black;
   }
   td {
    text-align: right; 
   }