Показать Меню
falbar Основы HTML

Урок 11. Учимся пользоваться HTML таблицами

Основы HTML

Таблицы относятся к блочным элементам, но при этом они не занимают всё доступное пространство по ширине. Интересный момент касательно построения их заключается в том, что таблицы занимает ширину контента находящегося внутри и все ячейки взаимосвязаны.

Если посмотреть на структуру HTML таблиц, то она может показаться сложной, но это не так.

<table border="1"><!--	Первая строка-->
	<tr>
		<th>Название 1</th><!--Первая ячейка-->
		<th>Название 2</th><!--Вторая ячейка-->
		<th>Название 3</th><!--Третья ячейка-->
	</tr>
	<tr><!--Вторая строка -->
		<td>ячейка</td><!--Первая ячейка-->
		<td>ячейка</td><!--Вторая ячейка-->
		<td>ячейка</td><!--Третья ячейка-->
	</tr>
	<tr><!-- Третья строка -->
		<td>ячейка</td><!--Первая ячейка-->
		<td>ячейка</td><!--Вторая ячейка-->
		<td>ячейка</td><!--Третья ячейка-->
	</tr>
	<tr><!-- Четвертая  строка -->
		<td>ячейка</td><!--Первая ячейка-->
		<td>ячейка</td><!--Вторая ячейка-->
		<td>ячейка</td><!--Третья ячейка-->	
	</tr>
</table>

HTML таблица

Давайте рассмотрим структуру подробней. Состоит она из цепочки элементов table -> tr -> td(th):

  • Элемент table является контейнером для всех внутри лежащих элементов;
  • Элемент tr является служебным, размечающий ряды в таблице;
  • Элемент td или th(используется для заголовков столбцов, в котором могут находиться только строчные элементы) это ячейки таблицы, отличие только визуальное.

Как и у всех элементов HTML, так и у таблиц есть свои атрибуты, давайте рассмотрим основные из них для элемента table:

  • align(left, right, center) – выравнивание;
  • cellpadding(число или проценты) – внутренний отступ ячеек;
  • cellspacing(число) – расстояние между ячейками по умолчанию 2px;
  • border(число) – рамка таблицы по умолчанию 0;
  • bgcolor(цвет) – цвет заднего фона;
  • background(файл) – задание заднего фона изображением.

Элемент tr является служебным, поэтому все атрибуты применяемые к нему девствуют на внутренние ячейки:

  • align(left, right, center) – выравнивание;
  • valing(top, middle, bottom, baseline) – выравнивание ячеек по вертикали;
  • bgcolor(цвет) – цвет заднего фона.

Осталось упомянуть атрибуты непосредственно ячеек(td) и заголовков столбцов(th) таблицы:

  • align(left, right, center) – выравнивание;
  • valing(top, middle, bottom, baseline) – выравнивание ячеек по вертикали;
  • width(число или проценты) – ширина;
  • bgcolor(цвет) – цвет заднего фона;
  • background(файл) – задание заднего фона изображением.
  • colspan(число) – охват столбцов по умолчанию 1;
  • rowspan(число) – охват строк.

Мы рассмотрели основные части таблиц и их атрибуты, которые чаще всего используются, но есть ещё несколько элементов, которые можно встретить в своей практике.

Первый из них это заголовок таблицы, который задается через элемент caption. Заголовок у всей таблицы может быть использован единожды, но его место размещения несущественно. Его можно поместить как в начало, так и в конец таблицы. У заголовка есть свои атрибуты: align(left, right, center), valing(top, bottom).

<table border="1" cellpadding="0" cellspacing="0" width="600">
	<caption>Название иаблицы<caption>
	<tr>
		<th>Название 1</th>
		<th>Название 2</th>
		<th>Название 3</th>
	</tr>
	<tr align="center">
		<td>ячейка</td>
		<td>ячейка</td>
		<td>ячейка</td>
	</tr>
	<tr align="center">
		<td>ячейка</td>
		<td>ячейка</td>
		<td>ячейка</td>
	</tr>
	<tr align="center">
		<td>ячейка</td>
		<td>ячейка</td>
		<td>ячейка</td>
	</tr>
</table>

HTML таблица с заголовком

Другой момент заключается в том, что таблицу можно разбить на блоки thead, tbody и tfoot. Элементы thead и tfoot можно использовать только по разу. Такое структурирование таблицы может в дальнейшем пригодиться, если например блокам надо будет задать разные стили.

<table border="1" cellpadding="0" cellspacing="0" width="600">
	<caption>Название иаблицы</caption>
	<thead>
		<tr>
			<th>Название 1</th>
			<th>Название 2</th>
			<th>Название 3</th>
		</tr>
	</thead>
	<tbody>
		<tr align="center">
			<td>ячейка</td>
			<td>ячейка</td>
			<td>ячейка</td>
		</tr>
		<tr align="center">
			<td>ячейка</td>
			<td>ячейка</td>
			<td>ячейка</td>
		</tr>
	</tbody>
	<tbody>
		<tr align="center">
			<td>ячейка</td>
			<td>ячейка</td>
			<td>ячейка</td>
		</tr>
		<tr align="center">
			<td>ячейка</td>
			<td>ячейка</td>
			<td>ячейка</td>
		</tr>
	</tbody>
	<tfoot>
		<tr align="center">
			<td>ячейка</td>
			<td>ячейка</td>
			<td>ячейка</td>
		</tr>
	</tfoot>
</table>

Последний момент, про который можно рассказать так это про возможность группировать таблицу по колонкам. Для этого служат элементы colgroup, col или оба этих элемента в связке. У них есть два хороших атрибута width и span(ширина охвата). Так же можно использовать аlign(center, left, right) и valing(bottom, middle, top).

<table border="1" cellpadding="0" cellspacing="0">
	<col span="4" width="15">
	<col span="2" width="60">
	<col span="1" width="100">
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
		<td>4</td>
		<td>5</td>
		<td>6</td>
		<td>7</td>
	</tr>
</table>

<colgroup width="100">
	<col width="50">
	<col span="2">
</colgroup>

HTML таблица группирование ячеек

Как это нужно понимать. Мы задаем первым четырем столбцам ширину 15px. Следующим двум ширину 60px и последнему 100px. Если превысить число столбцов группировка перестанет работать.

Подписаться на обновления

Комментариев еще не оставлено