После покорения ссылок переходим к таблицам.

Таблицы в HTML — это очень важная тема. Таблицы с невидимой границей долгое время использовались для верстки сайтов, позволяя разделять документ на модульные блоки. Сейчас все больше применяется дивный способ верстки (теги <div> + CSS), однако таблицы в той или иной степени все равно применяются очень широко.

Теги TABLE, TR и TD

Самый главный элемент для создания таблицы — это тег <table>. Но таблица — это совокупность строк и ячеек. Поэтому для создания любой таблицы нужны как минимум три тега:
<table> — является контейнером для других элементов, определяющих содержимое таблицы;
<tr> — создает строку таблицы;
<td> — создает ячейку таблицы.
Для все трех закрывающий тег обязателен.

Содержимое таблицы нужно писать внутри тега <td>.

По умолчанию браузеры показывают таблицы без рамок. Для того, чтобы видеть саму таблицу, пропишем таблице атрибут border со значением 1. Это означает, что рамка нашей таблицы будет толщиной в один пиксель.

Давайте создадим таблицу с двумя рядами (или строками) по две ячейки в каждом. В контейнере <table> создаем два контейнера, определяющих строки (<tr>), внутри которых создаем по две ячейки (<td>):

Не забывайте закрывать теги. Не забывайте сохранять документ и обновлять страницу в браузере. И вот как таблица должна выглядеть:

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

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

Атрибут, задающий толщину рамки, мы уже знаем. Цвет рамки задается при помощи атрибута bordercolor.

Чтобы выровнять таблицу по горизонтали, применяется знакомый атрибут align. Возможные значения: left, center, right.

Ширина таблицы определяется атрибутом width. Задается либо в пикселях, либо в процентах по отношению к ширине окно браузера.

cellpadding — определяет отступ от рамки до содержимого ячейки. Задается в пикселях.

cellspacing — определяет отступ между соседними ячейками (так же в пикселях).

А теперь подкоректируем нашу таблицу. Сделаем красную рамку, зададим ширину в 500 пикселей и выроняем по центру. Растояние от рамки ячеек сделаем 10 пикселей, а растояние между ячейками пусть будет 15 пикселей. Содержимое первой строки выровняем по середине:

В браузере должно получиться:

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

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

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

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

valign — определяет способ вертикального выравнивания содержимого ячейки. Возможные значения:
top — по верхнему краю;
middle — по середине;
bottom — по нижнему краю. По умолчанию middle.

bgcolor — задает цвет фона. Указывается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Таблица основных цветов находится здесь.

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

Пример:

Результат в браузере:

Как видете, моя картинка меньшего размера, чем получилась ячейка. Изображение стало просто дублироваться. А если картинка будет больше ячейки, то отобразится только то, что поместится.

Еще раз повторю, что для лучшего усвоения необходимо эксперементировать с атрибутами и их значениями. Не забывайте сохранять документ и обновлять окно в браузере.

На этой странице закончим.
А на следующей научимся объединять ячейки и встраивать таблицу в таблицу >>