Атрибут align тега <caption> — де стоїть заголовок таблиці

HTML

<table>
  <caption>align відсутній — підпис зверху, текст по центру</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

<table class="bad">
  <caption align="left">align="left" — нічого не змінилось</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

<table class="bad">
  <caption align="right">align="right" — теж нічого</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

<table>
  <caption align="bottom">align="bottom" — єдине робоче значення</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

<table>
  <caption align="BOTTOM">align="BOTTOM" — регістр не важить</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

<table class="bad">
  <caption align=" bottom ">align=" bottom " з пробілами — вимкнено</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

<table class="css">
  <caption align="top">align="top", але caption-side: bottom у стилях — виграє CSS</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

<table class="livoruch">
  <caption>text-align: left у стилях — ось так підпис таки притискається</caption>
  <tr><th scope="col">Місто</th><th scope="col">2021</th></tr>
  <tr><th scope="row">Київ</th><td>2 952 000</td></tr>
</table>

CSS

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

caption {
    padding: 4px 0;
    font-weight: 600;
    outline: 1px dashed #b9c6d8;
}

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

th {
    background: #eef3fb;
}

.bad caption {
    color: #c0392b;
}

.css caption,
.livoruch caption {
    color: #1b4f9c;
}

.css caption {
    caption-side: bottom;
}

.livoruch caption {
    text-align: left;
}

HTML

<p>Вибери потрібне значення для <code>align</code>:

<select id="form">
   <option value="left" name="value">left</option>
  <option value="top" name="value">top</option>
   <option value="right" name="value">right</option>
   <option value="bottom" name="value">bottom</option>

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

<p>З використанням атрибуту align</p>
  <table   width="100%">
    <caption  id="table" >Таблиця 1.1 Демонстрація прибутку фірми</caption>
   <tr>
    <th></th>
    <th scope="col">Місяць</th>
    <th scope="col">Прибуток (грн)</th>
   </tr>
   <tr>
    <td scope="row">1</td>
    <td>Вересень</td>
    <td>270</td>
   </tr>
   <tr>
    <td scope="row">2</td>
    <td>Жовтень</td>
    <td>420</td>
   </tr>
   <tr>
    <td scope="row">3</td>
    <td>Листопад</td>
    <td>1200</td>
   </tr>
  </table>

CSS

table{
   width:100%;
} 

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

JS

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

var textArray = { 'left': 'Вирівнювання по лівій частині таблиці.',
  'top': 'Заголовок розміщений перед таблицею по центру .',
  'right': 'Вирівнювання по правій частині таблиці.',
  'bottom': 'Заголовок розміщений внизу таблиці по центру' };

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

<p>З використанням атрибуту align</p>
  <table   width="100%">
    <caption align="right"  >Таблиця 1.1 Демонстрація прибутку фірми</caption>
   <tr>
    <th></th>
    <th scope="col">Місяць</th>
    <th scope="col">Прибуток (грн)</th>
   </tr>
   <tr>
    <td scope="row">1</td>
    <td>Вересень</td>
    <td>270</td>
   </tr>
   <tr>
    <td scope="row">2</td>
    <td>Жовтень</td>
    <td>420</td>
   </tr>
   <tr>
    <td scope="row">3</td>
    <td>Листопад</td>
    <td>1200</td>
   </tr>
  </table>

CSS

table{
   width:100%;
} 

th{
   padding:10px;
    border: 1px solid grey;
}
th,td{
   padding:10px;
    border: 1px solid grey;
}
caption{
  text-align:right;
}