8 (800) 500-54-06
Создать сайт
Создать сайт
ГлавнаяБлогСерёжа Сыроежкин
Серёжа Сыроежкин
Серёжа СыроежкинКопирайтер
26.05.2015

Создать таблицу HTML

Создать таблицу на сайте можно при помощи тега table. Далее представлен самый примитивный вариант создания таблицы с помощью HTML:

<table>
	<tr>
		<td>Значение [1,1]</td>
		<td>Значение [1,2]</td>
	</tr>
	<tr>
		<td>Значение [2,1]</td>
		<td>Значение [2,2]</td>
	</tr>
</table>

Представленная таблица для сайта HTML имеет две строки и два столбца.

Вложенные теги таблицы

Таблица может содержать в себе следующие базовые теги:

  • caption – представляет собой заголовок таблицы;
  • thead – «заголовок» таблицы. Представляет собой строку (или несколько), которые располагаются вверху таблицы. Должен располагаться сразу после тега table;
  • tbody – позволяет разбивать таблицу на отдельные блоки, имеющие различное оформление, которое задается с помощью стилей;
  • tfoot – «подвал» таблицы. Одна или несколько строк, которые располагаются внизу таблицы. Должен быть описан до тега tbody;
  • tr – является контейнером для строки таблицы;
  • td – определяет столбцы таблицы.

Атрибуты тега table

К основным атрибутам тега table относятся:

  • align – выравнивание таблицы (center, right, left);
  • background – позволяет задать фоновое изображение для таблицы (принимает значение url. Например, background=”tableBackground.png”);
  • bgcolor – позволяет определить цвет фона для таблицы (может принимать значение названия цвета, например, blue, или цвет в шестнадцатеричном формате, например, #fa8e47);
  • border – задает толщину рамки вокруг таблицы (принимает значение в пикселях, например, border=3);
  • width/height – определяет ширину/высоту таблицы (в пикселях или процентах).

Пример HTML-таблицы

Применим описанные выше теги и атрибуты к нашей таблице:

<html>
<head>
 <meta charset="utf-8">
 <title>Пример таблицы HTML – «Нубекс»</title>
</head>
<body>
<table border=3 align="center">
	<thead bgcolor="#ccc">
		<tr>
			<td>Первая ячейка в заголовке</td>
			<td>Вторая ячейка в заголовке</td>
		</tr>
	</thead>
	<tfoot bgcolor="#fc0">
		<tr>
			<td>Первая ячейка в подвале</td>
			<td>Вторая ячейка в подвале</td>
		</tr>
	</tfoot>
	<tbody bgcolor="#fa8e47">
		<tr>
			<th>Заголовок 1</th>
			<th>Заголовок 2</th>
		</tr>
		<tr>
			<td>Ячейка [1,1]</td>
			<td>Ячейка [1,2]</td>
		</tr>
		<tr>
			<td>Ячейка [2,1]</td>
			<td>Ячейка [2,2]</td>
		</tr>
	</tbody>
</table>
</body>
</html>

Выглядит это следующим образом:

Первая ячейка в заголовке Вторая ячейка в заголовке
Первая ячейка в подвале Вторая ячейка в подвале
Заголовок 1Заголовок 2
Ячейка [1,1] Ячейка [1,2]
Ячейка [2,1] Ячейка [2,2]

CSS-стили для таблицы

Теперь рассмотрим стили, которые можно применить к нашей таблице, чтобы значительно уменьшить избыточность кода:

  • border-style – определяет стиль рамки (может принимать значения solid, dashed, dotted и др.);
  • border-width – задает толщину рамки (в пикселях);
  • padding – отступ от внешней границы таблицы (в пикселях);
  • width/height – задает ширину/высоту таблицы (строки, столбца, ячейки) в пикселях или процентах;
  • color – устанавливает цвет текста указанного элемента;
  • border-color – цвет рамки;
  • background-color – цвет фона элемента.

Указанные выше атрибуты стилей являются основными и наиболее часто применяемы на практике.

Пример определения стилей для таблицы:

.table, th, td
	{
	border-style:solid;
	border-width:2px;
	padding:5px;
	}
	th 
	{
	height:28px;
	background-color:#fa8e47;
	color:white;
	border-color:#ccc;
	}
	td
	{
	border-color:#ccc;
	}
	.trColor 
	{
	background-color:#feb280;
	}

В конструкторе сайтов «Нубекс» вставка таблиц сведена к элементарным операциям, которые под силу любому. Для получения подробной информации читайте статью: Создать таблицу на сайте.

Смотрите также: