Вложение элементов

Язык HTML позволяет вкладывать элементы форматирования друг в друга. При этом их действия суммируются. Если вложить в элемент B элемент I, то получится текст, написанный полужирным курсивом. При этом нужно следить за правильным закрытием элементов: тот, что открыт раньше, закрывается позже.

В листинге 2.22 показаны примеры правильного и неправильного вложения элементов.

Листинг 2.22. Вложение элементов

<head>

<title>Вложение элементов</title>

<body>

<del><b><i>Это неправильное вложение элементов</b></i></del><br />

<ins><b><i>Это правильное вложение элементов</i></b></ins>

</body>

</html>

Неправильную запись некоторые браузеры могут отображать некорректно.

Резюме

В данной главе были рассмотрены основные принципы форматирования текста с использованием возможностей HTML. Особенно подробно было рассказано об особенностях структурного форматирования документа и форматировании самого текста, были описаны особенности логического и физического форматирования текста, работа с большими блоками текста и вложением элементов.

Теперь внешний вид текста на вашем сайте полностью подвластен вам. Помните, что ни один символ не может быть написан напрямую в элементе BODY. Текст всегда должен быть включен в элемент, который определяет его назначение и внешний вид.

Глава 3
Создание таблиц

3.1. Что такое таблица

3.2. Создание тела таблицы

3.3. Ячейки таблицы

3.4. Граница таблицы

3.5. Ширина и высота таблицы и ячеек

3.6. Группировка строк и столбцов

3.7. Выравнивание таблицы и содержимого ячеек

3.8. Объединение ячеек таблицы

3.9. Установка фонового цвета или рисунка ячейки

3.10. Создание вложенных таблиц

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

В языке HTML таблицы используются в двух случаях: для представления числовых данных, разбитых по строкам и столбцам, или как средство форматирования веб-страниц, задания взаимного расположения элементов страницы. Ячейки таблицы могут содержать любые HTML-элементы, например заголовки, списки, абзацы, фигуры, графику, а также элементы форм. Фактически весь сайт расположен в большой сложной таблице (рис. 3.1).

Рис. 3.1. Пример использования HTML-таблицы при создании сайта

Примечание

Как и в прошлой главе, напоминаю, что оформление таблицы согласно требованиям языка XHTML должно выполняться средствами CSS. Все элементы и атрибуты форматирования признаны в спецификации языка HTML 4. 01 нежелательными.

3.1. Что такое таблица

Таблица состоит из ячеек, образующихся при пересечении строк и столбцов (рис. 3.2).

Рис. 3.2. Пример стандартной таблицы

Рассмотрим элементы таблицы.

• Ячейка – это основной элемент таблицы. Она формируется пересечением строки и столбца.

• Строка – это прямая линия ячеек, расположенных слева направо.

• Столбец – это набор ячеек, расположенных одна над другой сверху вниз.

• Граница – это линия, которая окружает каждую ячейку и таблицу в целом.

В стандартной таблице каждая строка и каждый столбец содержат одинаковое количество ячеек. Однако таблицы могут очень сильно отличаться от предложенной стандартной. В таблице, изображенной на рис. 3.3, одна ячейка объединяет в себе четыре строки, а другая – три столбца.

Рис. 3.3. Пример нестандартной таблицы

Кстати, при создании таблицы лучше начать с ее планирования, потом будет легче верстать, так как вы наглядно будете видеть вашу таблицу и будет меньше вероятности ошибиться. Для этого вам следует выбрать оптимальный способ создания таблицы.

Рассмотрим некоторые примеры планирования таблиц.

• Нарисуйте таблицу на бумаге.

• Нарисуйте таблицу в Paint, Adobe Photoshop или в AutoCAD.

• Используйте HTML-совместимые текстовые редакторы, например Microsoft Word. Создайте таблицу и сохраните в редакторе HTML-страницы. Затем откройте страницу в окне браузера и скопируйте исходный текст в ваш HTML-редактор для дальнейшей корректировки и форматирования.

3.2. Создание тела таблицы

В построении HTML-таблиц нет ничего сложного. Описание таблиц должно располагаться внутри элемента BODY. Документ может содержать произвольное количество таблиц, допускается вложение таблиц друг в друга. Каждая таблица должна начинаться тегом <TABLE> и завершаться тегом </TABLE>:

<body>

<table>

</table>

</body>

Все прочие элементы таблицы должны быть вложенными в элемент TABLE. Наименование таблицы определяется тегами <CAPTION>. </CAPTION>. Выравнивание наименования задается с помощью атрибута align, который может принимать значения top (над таблицей) и bottom (под таблицей). По умолчанию наименование располагается над таблицей.

3.3. Ячейки таблицы

Теперь приступим к созданию ячеек таблицы. Для начала нужно создать необходимое количество строк, затем поделить строки столбцами на ячейки. Количество пар тегов <TR> и </TR> определяет количество горизонтальных строк в вашей таблице. Встречаются случаи, когда строка создана только с помощью тега <TR> без использования закрывающего тега </TR>. Количество пар тегов <TD> и </TD>, расположенных между тегами соответствующей строки, определяет количество ячеек (столбцов) в пределах строки. Встречаются случаи использования элемента TD без закрывающего тега.

<body>

<table>

</table>

</body>

Чтобы созданная ячейка являлась заголовком в таблице (текст выравнивается по центру и выделяется полужирным шрифтом), нужно воспользоваться парой тегов <TH> и </TH>. Встречаются случаи использования элемента TH без закрывающего тега. Элементы TH, TR и TD без закрывающих тегов корректно интерпретируются только в последней версии браузера Internet Explorer.

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

Листинг 3.1. Код простой HTML-таблицы, которая состоит из трех столбцов и трех строк

<html>

<head>

<title>Простая HTML-таблица</title>

</head>

<body>

<table>

<caption>Это заголовок таблицы</caption>

<tr><th>Заголовок 1</th><th>Заголовок 2</th><th>Заголовок 3</th></tr>

<tr><td>Ячейка 2x1 </td><td>Ячейка 2x2 </td><td>Ячейка 2x3 </td></tr>

<tr><td>Ячейка 3x1 </td><td>Ячейка 3x2 </td><td>Ячейка 3x3 </td></tr>

</table>

</body>

</html>

Рис. 3.4. Пример простой HTML-таблицы

Совет

Все браузеры игнорируют любые символы пробела и табуляции и перевод строки вне тегов HTML-документа, поэтому описывать таблицу можно так, чтобы она легко читалась. Я считаю, что использование предложенного варианта описания таблицы позволит вам не упустить ни одного тега HTML-документа.

...

13 14 15

...

Стандарт

4.07

(176 оценок)