Таблицы в HTML

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

Содержание:


Для создания таблиц в языке 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-страницу уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *