|
Окт
27
|
Создаем таблицу |
Таблицы очень часто встречаются на всевозможных сайтах в виде прайс листов, сравнительных списков и т.д.
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
Давайте создадим небольшую таблицу, на примере которой изучим необходимые теги и их параметры. Определимся, что выглядеть она будет следующим образом:
| Класс | Ученик | Посещение Веб-студии |
| 10 | Смирнов А.В. | Да |
| Петров С.С. | Нет | |
| Иванов В.П. | Да | |
| Игото посещают: | 2 человека | |
 |
||
HTML код будет выглядеть следующим образом:
<table width="400px" border="2" align="center" bordercolor="#0000FF" cellspacing="0" cellpadding="10"><tr><td width="321">Класс</td><td width="169"> Ученик</td><td width="188">Посещение Веб-студии</td></tr><tr>
<td rowspan="3">10</td><td>Смирнов А.В.</td><td>Да</td>
</tr><tr>
<td>Петров С.С.</td>
<td>Нет</td>
</tr><tr>
<td>Иванов В.П.</td>
<td>Да</td>
</tr><tr><td colspan="2">Игото посещают:</td>
<td>2 человека</td>
</tr><td colspan="3" bgcolor="#99FF99"><div align="center"><img src="globe1.gif" width="54" height="60"></div></td>
</table>
тега <TABLE>
Синтаксис
<table> ... </table>
Параметры:
Align — Определяет выравнивание таблицы.
Background — Задает фоновый рисунок в таблице.
Bgcolor — Цвет фона таблицы.
Border — Толщина рамки в пикселах.
Bordercolor — Цвет рамки.
Cellpadding — Отступ от рамки до содержимого ячейки.
Cellspacing — Расстояние между ячейками.
Height — Высота таблицы.
Width — Ширина таблицы.
Закрывающий тег
Обязателен.
Параметр ALIGN
Описание
Задает выравнивание таблицы по краю окна браузера.
Синтаксис
<table align="left | center | right">...</table>
Аргументы:
Left — Выравнивание таблицы по левому краю.
Center — Выравнивание таблицы по центру.
Right — Выравнивание по правому краю.
Значение по умолчанию
left
Параметр BACKGROUND
Описание
Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Синтаксис
<table background="URL">...</table>
Аргументы
Любой допустимый адрес изображения — можно использовать относительный или абсолютный путь.
Значение по умолчанию
Нет.
Параметр BGCOLOR
Описание
Устанавливает цвет фона таблицы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку
Синтаксис
<table bgcolor="цвет">...</table>
Значение по умолчанию
Зависит от браузера и его версии, обычно используется белый цвет фона.
Параметр BORDER
Описание
Устанавливает толщину рамки в пикселах. По умолчанию рамка изображается трехмерной, но если используется параметр bordercolor тега <TABLE>, то вид рамки меняется в зависимости от браузера. Когда в теге <TABLE> используется параметр border без аргументов (<table border>), то браузер отображает рамку толщиной один пиксел.
Синтаксис
<table border="толщина">...</table>
Аргументы
Любое положительное целое число.
Значение по умолчанию
0
Параметр BORDERCOLOR
Описание
Устанавливает цвет рамки таблицы. Рамка обычно рисуется как трехмерная, добавление параметров bordercolor и border к тегу <TABLE> создают однотонную линию.
Синтаксис
<table bordercolor="цвет">...</table>
Аргументы
См. параметр BGCOLOR.
Значение по умолчанию
Зависит от браузера и операционной системы.
Параметр CELLPADDING
Описание
Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.
Синтаксис
<table cellpadding="значение">...</table>
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
0
Параметр CELLSPACING
Описание
Задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет.
Синтаксис
<table cellspacing="значение">...</table>
Аргументы
Любое целое положительное число.
Значение по умолчанию
0 (когда нет параметра border) 2 (когда параметра border установлен)
Параметр HEIGHT
Описание
Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если не установлен <!DOCTYPE>. В том случае, когда в документе задан <!DOCTYPE>, браузеры высоту таблицы, заданную через параметр height, игнорируют.
Синтаксис
<table height="значение">...</table>
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
Значение по умолчанию
Высота вычисляется на основе содержимого таблицы.
Параметр WIDTH
Описание
Задает ширину таблицы. Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.
Синтаксис
<table width="значение">...</table>
Аргументы
Любое целое значение в пикселах или процентах от доступного пространства.
И так, мы разабрали основные параметры, для создания таблиц с помощью HTML.
Возможно, Вам будет полезна эта информация:
Новые комментарии