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

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>
</select>
  </p>
<nav id='text'>Таблиця розташована за замовчувнням</nav>
<hr>


<table id="table">
<caption>Графік роботи</caption>
<thead>
  <tr>
    <th>День тиждня</th>
    <th>Роботчий час</th>
    <th>Обідня перерва</th>
  </tr>
</thead>
<tr>
  <td>Понеділок</td>
  <td>8:00 - 16:00</td>
  <td>12:00 - 13:00</td>
</tr> 
<tr>
  <td>Вівторок</td>
  <td>9:00 - 17:00</td>
  <td>13:00 - 14:00</td>
</tr>
<tr>
  <td>Середа</td>
  <td>11:00 - 19:00</td>
  <td>15:00 - 16:00</td>
</tr> 
<tr>
  <td>Четверг</td>
  <td>9:00 - 18:00</td>
  <td>13:30 - 14:30</td>
</tr> 
<tr>
  <td>П'ятниця</td>
  <td>9:00 - 13:00</td>
  <td>12:00 - 13:30</td>
</tr> 
</table>

CSS

table,th,td{
  border: 1px solid grey;
  text-align:center;
} 

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

*{
  text-align:center;
}

#text{
  color:#ff0000;
  font-size:20px;
}

JS

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

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

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 class="lbl">1. align="center" — переглядач виконує, валідатор лається</p>
<div class="frame">
    <table align="center">
        <caption>Підпис їде разом із таблицею</caption>
        <tr><th>Товар</th><th>Ціна</th></tr>
        <tr><td>Ключ</td><td>120,00</td></tr>
    </table>
</div>

<p class="lbl">2. Сучасна заміна: margin: 0 auto — ширину задавати не треба</p>
<div class="frame">
    <table class="auto">
        <tr><th>Товар</th><th>Ціна</th></tr>
        <tr><td>Ключ</td><td>120,00</td></tr>
    </table>
</div>

<p class="lbl">3. align="right" — це float, тому текст обтікає таблицю</p>
<div class="frame">
    <table align="right">
        <tr><th>Товар</th><th>Ціна</th></tr>
        <tr><td>Ключ</td><td>120,00</td></tr>
    </table>
    <p class="flow">Цей текст обтікає таблицю збоку — саме такого ефекту
        від margin: 0 auto не буде ніколи, для нього потрібен float.</p>
</div>

<p class="lbl">4. text-align: center на батьківському блоці — таблиця не рухається</p>
<div class="frame centered">
    <table>
        <tr><th>Товар</th><th>Ціна</th></tr>
        <tr><td>Ключ</td><td>120,00</td></tr>
    </table>
    <span class="hint">рядковий текст центрувався, а таблиця — ні</span>
</div>

CSS

.lbl {
    margin: 20px 0 6px;
    max-width: 520px;
    color: #5a6472;
    font-size: .95em;
}

.frame {
    width: 460px;
    max-width: 100%;
    padding: 10px;
    border: 1px dashed #b9c6d8;
    background: #f6f9ff;
    overflow: hidden;
}

.centered {
    text-align: center;
}

table {
    border-collapse: collapse;
    background: #fff;
}

.auto {
    margin: 0 auto;
}

caption {
    margin-bottom: 4px;
    color: #5a6472;
    font-size: .9em;
}

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

.flow {
    margin: 0;
    color: #5a6472;
}

.hint {
    color: #c0392b;
    font-size: .9em;
}