Наверх

Cоздание таблицы в HTML

Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте следующую статью). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей.

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

  • <table> — контейнер, внутри которого располагается таблица (такой же, как <ul> для маркированных или <ol> для нумерованных списков).
  • border — атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS.
  • <caption> задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега <table>, вне ячеек и строк.
  • <tr> — парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали).
  • <th> — тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках — обычно текст внутри <th> обозреватель выделяет жирным и размещает по центру.
  • <td> — контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег <tr>, столько ячеек в ней и будет: один тег — одна ячейка.
  • <colgroup> позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега <caption>, если его нет, то после <table>.
  • <col> используется для той же цели, что и <colgroup>. <colgroup> может содержать <col>, но не наоборот.
  • span — атрибут, задающий число столбцов, к которым применяются свойства контейнера <col>.
  • <thead>, <tbody> и <tfoot> — контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров <head>, <body> и <footer> в HTML-документе.
  • colspan нужен для объединения ячеек в строке. Значение атрибута содержит цифру, которая и задаёт количество объединяемых ячеек.
  • rowspan объединяет ячейки по столбцам.

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

Создайте документ формата HTML и скопируйте в него следующий код:

<!DOCTYPE html>
<html>
   <head>
	<title>Пример таблицы</title>
   </head>
   <body>
	<table border="1">
	 <caption>Инструменты создания сайтов</caption>
	 <tr>
	  <th>Назначение</th><th colspan="2">Инструмент</th>
	 </tr>
	 <tr>
	  <td>Разметка</td><td>HTML</td><td>XHTML</td>
	 </tr>
	 <tr>
	  <td>Оформление</td><td colspan="2">CSS</td>
	 </tr>
	 <tr>
	  <td>Разработка</td><td>PHP</td><td>Python</td>
	 </tr>
	</table>
   </body>
</html>

В браузере документ будет выглядеть так:

Форматирование таблицы

Разберём, какие строчки кода за что отвечают.

  • <table border="1"> — открыли таблицу, задав ей толщину рамок.
  • <caption> Инструменты создания сайтов </caption> — озаглавили её.
  • <tr> — открыли строку.
  • <th>Назначение</th> — создали ячейку с оформлением заголовка.
  • <th colspan="2">Инструмент</th> — создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
  • </tr> — закрыли строку. Аналогично создали остальные строки.
  • <tr> <td>Разметка</td><td>HTML</td><td>XHTML</td> </tr> — добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.
  • </table> — закрыли таблицу.
You must have Javascript enabled to use this form.