Глава V. Таблицы. Применение таблиц для разметки сайта.

Автор: Администратор Сайта вкл. 27 января 2018.

Структура таблицы. Основные теги

Описание таблицы очень напоминает описание стандартного здания. Вы говорите - здание, и возникает образ в виде прямоугольной коробки. Таки таблица. Она всегда прямоугольная. Только другой и быть не может, в отличие от здания. Таблица задается парным тегом:
<table> </table>

Но это далеко не все. Как в здании нельзя жить, так и в таблицу нельзя помещать информацию. Здание состоит из этажей, а таблица - из строк. Они задаются другими парными тегами TR, заключенными внутрь первых тегов:
<table>
<tr>...</tr>
<tr>...</tr>
<table>
Здесь указано, что таблица имеет две строки.
Нормальные люди на этажах не живут, они живут в квартирах, которые расположены на этажах. Так и информация. Она помещается только в ячейках, которые можно расположить на каждой строке. Вне ячейки информация отображаться не будет. Ячейки задаются парными тегами TD, расположенными внутри тегов строк. Ячейки, как и таблица, могут иметь только прямоугольную форму.
Задание 5.1.1. Создайте веб-страницу с таблицей.
Создайте в Блокноте файл table.htm. Создайте в нем HTML-документ и в тело документа вставьте код с рисунка 5.1. Сохраните файл и откройте его в окне браузера.

Рис. 5.1.

В примере на рис. 5.1. показан код и вид таблицы, состоящей из двух строк и трех ячеек на каждой строке. Информация для наглядности состоит из номера строка и номера ячейки, разделенных дефисом. Чтобы границы ячеек стали видными, в теге TABLE для атрибута BORDER (граница) задано значение толщины 1рх. А серый цвет фона задан атрибутом BGCOLOR.
Для таблиц есть важное требование. Количество условных ячеек на каждой строке должно быть одинаковым, как и квартир на этаже в том прямоугольном здании. Они могут быть разными по ширине на одной строке, но должны быть одинаковыми по ширине в одном столбце - то есть их вертикальные границы (стены) всегда должны совпадать. Сами вертикальные границы можно перемещать в любом направлении, но только сразу для всех ячеек столбца. Проверим, как выполняется это требование.