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

HTML

<table border="0" cellpadding="5" cellspacing="3">
<thead  align="right">
<tr>
<th colspan="4">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</thead>
<tbody align="left">
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>
</table>

CSS

table{
   width:100%;
} 

th{
   padding:10px;
    border: 1px solid grey;
}
th,td{
   padding:10px;
    border: 1px solid grey;
}
caption{
  font-size:10px;
}

HTML

<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>

<p>З використанням атрибуту align</p>
<table border="0" cellpadding="5" cellspacing="3">
<thead id="table" >
<tr>
<th colspan="4">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</thead>
<tbody align="left">
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>
</table>

<br>
<p>Без використання атрибуту align</p>
<table border="0" cellpadding="5" cellspacing="3">
<thead >
<tr>
<th colspan="4">
Транспорт України
</th>
</tr>
<tr>
<th colspan="2">Автомобілі</th>
<th colspan="2">Літаки</th>
</tr>
</thead>
<tbody align="left">
<tr>
<td>ZAZ Vida</td>
<td>ZAZ Forza</td>
<td>Ан-77</td>
<td>Ан-24</td>
</tr>
<tr>
<td>ZAZ Lanos</td>
<td>ZAZ Sens</td>
<td>ХАЗ-30</td>
<td>Aeroprakt A-22</td>
</tr>
</tbody>
</table>

CSS

table{
   width:30%;
} 

th{
   padding:10px;
    border: 1px solid grey;
}
th,td{
   padding:10px;
    border: 1px solid grey;
}
caption{
  font-size:10px;
}

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>align="left" — те, чого від шапки хочуть найчастіше</caption>
  <thead align="left"><tr><th>Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

<table>
  <caption>Без align — заголовки й так посередині</caption>
  <thead><tr><th>Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

<table>
  <caption>align="center" — нічого не змінює, бо це вже типове</caption>
  <thead align="center"><tr><th>Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

<table class="bad">
  <caption>align="char" char="," — не діє</caption>
  <thead align="char" char=","><tr><th>Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

<table class="bad">
  <caption>align=" right " із пробілами — теж не діє</caption>
  <thead align=" right "><tr><th>Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

<table>
  <caption>align="middle" — тихо працює як center</caption>
  <thead align="middle"><tr><th>Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

<table>
  <caption>align="right" на шапці, але перший заголовок має свій align="left"</caption>
  <thead align="right"><tr><th align="left">Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

<table class="css">
  <caption>align="right" на шапці, але в стилях text-align: left — виграє CSS</caption>
  <thead align="right"><tr><th>Місто</th><th>2001</th><th>2021</th></tr></thead>
  <tbody><tr><td>Київ</td><td>2 611 000</td><td>2 952 000</td></tr></tbody>
</table>

CSS

table {
    width: 100%;
    max-width: 480px;
    margin-bottom: 18px;
    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;
}

.bad caption {
    color: #c0392b;
}

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

.css thead th {
    text-align: left;
}

.css caption {
    color: #1b4f9c;
}