Разметка таблицы

Таблицы на web-страницах сайта используются как для вёрстки, так и для структурирования данных. Табличная вёрстка считается устаревшей, но в виду тех или иных факторов всё ещё используется. Блочная вёрстка, которая рекомендована к использованию, в отличие от табличной вёрстки, на много проще и легче, но стили CSS используемые для форматирования <div> блоков, здесь более сложны.

Таблица, в HTML форматируется тегом <table>, который является контейнером для её элементов. Конструкция, какой либо таблицы, включает в себя строки и ячейки, соответственно задаваемые тегами <tr> и <td>. Выравнивание таблицы по центру и форматирование содержимого осуществляется с помощью стилей.

Образец разметки таблицы


HTML

<table>
	<tr>
		<td>
			1
		</td>
		<td>
			2
		</td>
	</tr>
	<tr>
		<td>
			3
		</td>
		<td>
			4
		</td>
	</tr>
</table>

Простая таблица расположенная по центру


HTML

<table class="simple-table">
	<caption>
		Выравнивание по центру
	</caption> 
  	<tr>
		<th>Обозначение</th>
		<th>Наименование</th>
	</tr>
	<tr>
		<td>400</td>
		<td>200</td>
	</tr>
	<tr>
		<td>400</td>
		<td>200</td>
	</tr>
	<tr>
		<td>400</td>
		<td>200</td>
	</tr>
</table>


CSS

caption, th
		{
	color : #369;
		}
caption
		{
	margin-bottom : 5px;
	text-align : left;
		}
.simple-table
		{
	margin: 17px auto;
	border-collapse : collapse;
		}
.simple-table td,
.simple-table th
		{
	padding : 8px;
	border : 1px solid #000;
		}

Выравнивание по левому краю


<table style="margin-left:0px;">

Выравнивание по правому краю


<table style="margin-right:0px;">