Атрибут align тега <tbody> — вирівнювання тіла таблиці

HTML

<h3>Приклад з використанням атрибуту align</h3>
<table width="400" border="1"> 
        <caption>Таблиця товарів</caption> 
            <th>Фрукти</th>
            <th>Овочі</th> 
            <th>Ягоди</th>
        </tr>
 <tbody align="right">
        <tr> 
            <td>Апельсин</td>
            <td>Гарбуз</td>
            <td>Чорниця</td>
        </tr>

        <tr> 
            <td>Груша</td>
            <td>Капуста</td>
            <td>Диня</td>
        </tr>

        <tr> 
            <td>Яблуко</td>
            <td>Морква</td>
            <td>Гарбуз</td>
        </tr>
  </tbody>
    </table> 

<h3>Приклад без використання атрибуту align</h3>
<table width="400" border="1"> 
        <caption>Таблиця товарів</caption> 
            <th>Фрукти</th>
            <th>Овочі</th> 
            <th>Ягоди</th>
        </tr>
 <tbody>
        <tr> 
            <td>Апельсин</td>
            <td>Гарбуз</td>
            <td>Чорниця</td>
        </tr>
        <tr> 
            <td>Груша</td>
            <td>Капуста</td>
            <td>Диня</td>
        </tr>
        <tr> 
            <td>Яблуко</td>
            <td>Морква</td>
            <td>Гарбуз</td>
        </tr>
  </tbody>
    </table>

CSS

table,th,td{
  border: 1px solid grey;
} 

th{
   padding:20px;
}
th,td{
   padding:20px;
}
caption{
  font-size:20px;
}

HTML

<h3>Приклад з використанням атрибуту align</h3>
<p>Вибери потрібне значення для <code>align</code>:

<select id="form">
   <option value="left" name="value">left</option>
  <option value="center" name="value">center</option>
   <option value="right" name="value">right</option>
   <option value="justify" name="value">justify</option>

</select>
  </p>
<nav id='text'>Текст комірки розташовано за замовчуванням</nav>
<hr>


<table width="400" border="1"> 
        <caption>Таблиця товарів</caption> 
            <th>Фрукти</th>
            <th>Овочі</th> 
            <th>Ягоди</th>
        </tr>
<tbody id="table">
        <tr> 
            <td>Апельсин</td>
            <td>Гарбуз</td>
            <td>Чорниця</td>
        </tr>
 
        <tr> 
            <td>Груша</td>
            <td>Капуста</td>
            <td>Диня</td>
        </tr>
        <tr> 
            <td>Яблуко</td>
            <td>Морква</td>
            <td>Гарбуз</td>
        </tr>
 </tbody>
    </table>

CSS

table,th,td{
  border: 1px solid grey;
} 

th{
   padding:20px;
}
th,td{
   padding:20px;
}
caption{
  font-size:20px;
}

JS

var wrapper = document.getElementById('table');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'left': 'Вирівнювання по лівій частині таблиці.',
  'center': 'Вирівнювання по центру таблиці.',
  'right': 'Вирівнювання по правій частині таблиці.',
  'justify': 'Вирівнювання по ширині.' };

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      wrapper.align = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

HTML

<table>
  <caption>1. align="right" на всьому tbody — праворуч поїхало все</caption>
  <thead><tr><th>Місто</th><th>Область</th><th>Населення</th></tr></thead>
  <tbody align="right">
    <tr><td>Київ</td><td>Київська</td><td>2 952 000</td></tr>
    <tr><td>Львів</td><td>Львівська</td><td>717 000</td></tr>
    <tr><td>Кропивницький</td><td>Кіровоградська</td><td>221 000</td></tr>
  </tbody>
</table>

<table class="bad">
  <caption>2. align на colgroup — переглядач його не застосовує</caption>
  <colgroup><col><col><col align="right"></colgroup>
  <thead><tr><th>Місто</th><th>Область</th><th>Населення</th></tr></thead>
  <tbody>
    <tr><td>Київ</td><td>Київська</td><td>2 952 000</td></tr>
    <tr><td>Львів</td><td>Львівська</td><td>717 000</td></tr>
    <tr><td>Кропивницький</td><td>Кіровоградська</td><td>221 000</td></tr>
  </tbody>
</table>

<table class="col3">
  <caption>3. Робочий спосіб: td:nth-child(3) { text-align: right }</caption>
  <thead><tr><th>Місто</th><th>Область</th><th>Населення</th></tr></thead>
  <tbody>
    <tr><td>Київ</td><td>Київська</td><td>2 952 000</td></tr>
    <tr><td>Львів</td><td>Львівська</td><td>717 000</td></tr>
    <tr><td>Кропивницький</td><td>Кіровоградська</td><td>221 000</td></tr>
  </tbody>
</table>

<table class="col3 tabular">
  <caption>4. Те саме плюс tabular-nums — розряди стали один під одним</caption>
  <thead><tr><th>Місто</th><th>Область</th><th>Населення</th></tr></thead>
  <tbody>
    <tr><td>Київ</td><td>Київська</td><td>2 952 000</td></tr>
    <tr><td>Львів</td><td>Львівська</td><td>717 000</td></tr>
    <tr><td>Кропивницький</td><td>Кіровоградська</td><td>221 000</td></tr>
  </tbody>
</table>

CSS

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

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

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

th {
    background: #eef3fb;
    text-align: left;
}

.bad caption {
    color: #c0392b;
}

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

.col3 td:nth-child(3),
.col3 th:nth-child(3) {
    text-align: right;
}

.tabular td:nth-child(3) {
    font-variant-numeric: tabular-nums;
}

.tabular caption {
    color: #1b5e20;
}