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

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 = "1"> 
		<tr>
  <th id="table">З використанням атрибуту align</th>
  </tr>  
	</table> 
<br>
<p>Без використання атрибуту align</p>
<table border = "1"> 
		<tr>
  <th>Без використання атрибуту align</th>
  </tr>  
	</table>

CSS

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

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>
  <tr>
    <th>Рядок</th>
    <th>Що задано</th>
    <th>Результат</th>
  </tr>
  <tr align="right">
    <td>1</td>
    <td><code>align="right"</code> на <code>&lt;tr&gt;</code></td>
    <td>праворуч — атрибут спрацював</td>
  </tr>
  <tr align="right" class="reset">
    <td>2</td>
    <td><code>align="right"</code> + <code>.reset td { text-align: left }</code></td>
    <td>ліворуч — CSS перебив атрибут</td>
  </tr>
  <tr class="cherez-css">
    <td>3</td>
    <td>без атрибута, <code>.cherez-css { text-align: right }</code></td>
    <td>праворуч — сучасна заміна</td>
  </tr>
</table>

CSS

table {
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 1px solid #d0d0d0;
  padding: 6px 10px;
}
th {
  background: #f2f6f8;
}
.reset td {
  text-align: left;
}
.cherez-css {
  text-align: right;
}

HTML

<p>З використанням атрибуту align</p>
<table > 
		<caption>Таблиця товарів</caption> 
  <tr align="left" >
			<th>Фрукти</th>
			<th>Овочі</th> 
			<th>Ягоди</th>
		</tr> 
		<tr align="right"> 
			<td>Апельсин</td>
			<td>Гарбуз</td>
			<td>Чорниця</td>
		</tr>
		<tr align="center"> 
			<td>Груша</td>
			<td>Капуста</td>
			<td>Диня</td>
		</tr>
	</table> 
<br>
<p>Без використання атрибуту align</p>
<table> 
		<caption>Таблиця товарів</caption> 
  <tr>
			<th>Фрукти</th>
			<th>Овочі</th> 
			<th>Ягоди</th>
		</tr> 
		<tr> 
			<td>Апельсин</td>
			<td>Гарбуз</td>
			<td>Чорниця</td>
		</tr>
		<tr> 
			<td>Груша</td>
			<td>Капуста</td>
			<td>Диня</td>
		</tr>
	</table>

CSS

table{
   width:100%;
} 

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