Таблицы в HTML
Любая таблица в HTML представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Создавать таблицы в HTML достаточно просто, необходимо лишь представить себе конечную модель. В языке HTML таблицы используются не только для представления данных, их можно применять для размещения текстовых блоков, изображений и т.д. на web-странице, т.е. с их помощью можно создавать макет самой страницы.
Содержание:
- Элемент TABLE, создаем таблицу.
- Добавляем строку.
- Добавляем ячейки.
- Заголовки таблиц.
- Объединение строк.
- Объединение столбцов.
- Размеры и выравнивание таблицы.
- Фон таблицы.
- В заключение.
Элемент TABLE, создаем таблицу
Для создания таблиц в языке HTML применяется элемент table, а весь код (ее содержимое) таблицы располагается между тегами < table > < /table >. Атрибуты этого элемента задают значения для всей таблицы целиком:
- background – задается изображение (URL), которое может быть фоном для всей таблицы;
- bgcolor – цвет фона таблицы, задается если не задан фон в виде изображения;
- border – толщина линий таблицы, если неободимы видимые границы;
- bordercolor – цвет линий таблицы;
- cellpadding – расстояние от текста внутри ячеек до границ ячеек;
- cellspacing – расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);
- width – задается значение ширины таблицы в px или %.
Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:
<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%"> </table>
Добавляем строку
В каждой таблице должна быть хотя бы одна строка, задается она тегами < tr > < /tr >. В следующем примере смотрим пример добавления строки:
<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%"> <tr> </tr> </table>
Добавляем ячейки
Ячейки образуют вертикальные столбцы таблицы, обозначаются они тегами < td >< /td >. Добавляем к нашей таблице ячейки:
<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%"> <tr> <td>Ячейка №1</td> <td>Ячейка №2</td> <td>Ячейка №3</td> </tr> </table>
В браузере увидим получившуюся таблицу:
| Ячейка №1 | Ячейка №2 | Ячейка №3 |
Заголовки таблиц
Заголовок таблицы обозначает заголовок столбца или строки, определяется так же открывающим и закрывающим тегами < th > < /th >. Посмотрим на примере:
<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%"> <tr> <th>Столбец №1</th> <th>Столбец №2</th> <th>Столбец №3</th> </tr> <tr> <td>Ячейка №1</td> <td>Ячейка №2</td> <td>Ячейка №3</td> </tr> </table>
В браузере будет выглядеть так:
| Столбец №1 | Столбец №2 | Столбец №3 |
|---|---|---|
| Ячейка №1 | Ячейка №2 | Ячейка №3 |
Объединение строк
В некоторых случаях может потребоваться растянуть один столбец на несколько строк, для этого применяется атрибут rowspan, значение которого определяет количество строк, необходимых для объединения. Смотрим пример:
<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%"> <tr> <th rowspan="2">Строки №1 и №2 объединены</th> <td>Ячейка№1</td> <td>Ячейка№2</td> </tr> <tr> <td>Ячейка №3</td> <td>Ячейка №4</td> </tr> <tr> <th>Строка №3</th> <td>Ячейка №5</td> <td>Ячейка №6</td> </tr> </table>
Браузер отобразит:
| Строки №1 и №2 объединены | Ячейка№1 | Ячейка№2 |
|---|---|---|
| Ячейка №3 | Ячейка №4 | |
| Строка №3 | Ячейка №5 | Ячейка №6 |
Объединение столбцов
Столбцы объединяются по такому же принципу, только с использованием атрибута colspan. Смотрим пример:
<table bgcolor="blue" border="1" bordercolor="white" cellpadding="10" cellspacing="2" width="100%"> <tr> <th colspan="2">Столбцы №1 и №2 объединены</th> <th>Столбец №3</th> </tr> <tr> <td>Ячейка №1</td> <td>Ячейка №2</td> <td>Ячейка №3</td> </tr> <tr> <td>Ячейка №4</td> <td>Ячейка №5</td> <td>Ячейка №6</td> </tr> </table>
Браузер отобразит:
| Столбцы №1 и №2 объединены | Столбец №3 | |
|---|---|---|
| Ячейка №1 | Ячейка №2 | Ячейка №3 |
| Строка №4 | Ячейка №5 | Ячейка №6 |
Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:
| Заголовок | Ячейка | |
|---|---|---|
| Ячейка | ||
| Ячейка | Ячейка | Ячейка |
Или вот так:
| Заголовок | ||
|---|---|---|
| Ячейка | Ячейка | Ячейка |
| Ячейка | Ячейка | Ячейка |
А ты попробуй написать код самостоятельно!
Размеры и выравнивание таблицы
Высоту и ширину можно задавать как для всей таблицы в целом, так и для отдельных строк и столбцов делается это с помощью уже знакомых атрибутов width и height, значения задаются как в пикселях, так и в процентах.
Выравнивание таблицы по горизонтали задается атрибутом align, значения тебе уже знакомы: left, center, right. А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td. С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign. Он так же имеет свои значения – вертикальное выравнивание по центру middle, по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).
Фон таблицы
Фоновое изображение или цвет можно так же задать как для всей таблицы, так и для отдельно взятой ячейки, все зависит от того какие цели ты преследуешь. Задается это – для изображения – атрибутом background, в значении которого прописывается путь к необходимому графическому файлу. Для цветового фона – атрибутом bgcolor, здесь значением является наименование цвета.
В заключение
Вот вобщем и все, что необходимо для начального уровня. По окончании раздела о построении таблиц в HTML, заканчивается твое первое знакомство с языком HTML. С помощью таблиц в HTML можно создавать несложные шаблоны web-страниц, так что я предлагаю тебе создать свою первую полноценную web-страницу уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!