HTML – это просто. Часть 3

Таблицы являются очень важными и востребованными элементами web-страниц. Кроме прямого применения, таблицы используются для структурирования сайта, организации различных меню, упорядочивания элементов на страничке.

За создание таблиц отвечает составной парный тэг <table>. Как известно, таблицы состоят из строк и столбцов. За обозначение строк отвечает парный тэг <tr>, а за обозначение столбцов – парный тэг <td>. Создадим таблицу, состоящую из двух строк и двух столбцов. Сначала создаются строки – их у нас две, поэтому в тэг <table> включаем две строки:

<table>
<tr></tr>
<tr></tr>
</table>

Внутри строк создаются ячейки, за которые отвечает тэг <td>. Количество тэгов <td> определяет и количество столбцов. Обратите внимание, что для создания правильной структуры таблицы ячейки необходимо создавать в каждой строке (столбцы не создаются автоматически!). В итоге получаем примерно такой код:

<table>
 <tr>
  <td>ячейка 1.1</td>
  <td>ячейка 1.2</td>
 </tr>
 <tr>
  <td>ячейка 2.1</td>
  <td>ячейка 2.2</td>
 </tr>
</table>

Вот мы и создали самую простую таблицу (см. рис. 1). Её параметры прописываются в тэге <table>:
align="left" – выравнивание таблицы по левому краю;
align="right" – выравнивание таблицы по правому краю;
align="center" – выравнивание таблицы по центру;
background="fon.jpg" – текстура для фона таблицы;
bgcolor="#003000" – цвет фона таблицы;
border="1" – толщина рамки таблицы в пикселях;
bordercolor="#003000" – цвет рамки;
cellspacing="0" – расстояние между ячейками в пикселях;
cellpadding="0" – расстояние между содержанием ячейки и её границей;
title="Таблица 1" – всплывающая подсказка;
width="800" – ширина таблицы либо в пикселях, либо в процентах от ширины окна браузера (например, «30%»).
Кроме этого, параметры можно прописать и для каждой отдельной ячейки. Это полезно, когда нужно раскрасить ячейки таблицы в разные цвета, или задать их ширину.

Для тэгов <tr> и <td> возможны следующие параметры:
align – выравнивание содержимого в ячейке. Принимает такие же значения, что и параметр «align» тэга <table>;
valign – отвечает за выравнивание содержимого по вертикали. Данный параметр может принимать значения «top» (выравнивание по верхнему краю), «middle» (выравнивание по середине), и «bottom» (выравнивание по нижнему краю);
bgcolor="#0030FF" – задаёт цвет фона ячейки;
height="100" – высота ячейки в пикселях. В принципе, задаётся автоматически, в зависимости от наполнения ячейки.
Тэг <td> имеет ещё несколько собственных параметров:
width="120" – ширина ячейки в пикселях;
colspan="2" – этот параметр используется для создания объединённых ячеек. Он задаёт количество столбцов, которые «поглотит» текущая ячейка;
rowspan="2" – количество строк, которые объединит текущая ячейка.
Закрепим использование последних двух тэгов на примере. Предположим, нам необходимо вписать в таблицу шапку (см. рис. 2). Для этого мы объединяем первые два столбца, прописав параметр colspan="2", и убираем второй столбец. Ведь он нам теперь не нужен.

Получаем следующий код:

<table border=”1”>
 <tr>
 <td colspan=”2”>ячейка 1.1+
 ячейка 1.2</td>
 </tr>
 <tr>
 <td>ячейка 2.1</td>
 <td>ячейка 2.2</td>
 </tr>
</table>

Для объединения столбцов применяется тот же принцип, только прописывается параметр «rowspan», a не «colspan».
Таблицы можно вкладывать в ячейки, что удобно при структурировании других элементов. Если того требует дизайн странички, можно сделать границы таблицы невидимыми, прописав в тэге <table> параметр «border=0».

Спецсимволы
В некоторых случаях стоит прибегнуть к такой интересной вещи, как спецсимволы. Зачем? Например, вам необходимо опубликовать на своей страничке HTML-код с символами «<» и «>». Однако, браузер будет воспринимать такие символы как команду открытия тэгов. Выход – использование альтернативных служебных слов, обозначающих спецсимволы. Вот некоторые из них:
&quot – кавычка (“);
&nbsp – неразрывный пробел;
&amp – амперсэнд (&);
&lt – знак «меньше» (<);
&gt – знак «больше» (>);
&copy – символ авторских прав (©);
&reg – символ регистрации торгового знака (®).
Здесь приведены наиболее часто используемые спецсимволы. Полный их список вы можете посмотреть по следующей ссылке: html.manual.ru/book/info/specialchars.php


Рекомендуем почитать: