Войти
» » » Создаём таблицы в HTML

Создаём таблицы в HTML

Создаём таблицы в HTML

Таблицы являются очень важной, а для каких-то целей даже неотъемлемой часть HTML сайта, они могут понадобиться не только для эффектного представления статьи, но и для структуры и дизайна самого сайта.

Вот пример стандартного табличного сайта:

Ну давайте разбираться со всем по порядку.

TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. Сама по себе таблица будет иметь прозрачные рамки (границы) и будет иметь минимальную высоту и ширины, если необходимы определённые параметры, то необходимо использовать атрибуты. Состоит таблица из:

TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

Пример самой простой таблицы:

<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Из примера видно, что начинается и закрывается таблица элементом <table>, элемент <tr> обозначает строки, а элемент <td> разделяет строки на ячейки. Для более понятного примера мы так же использовали атрибут border, который задавал толщину рамки.

COLSPAN

COLSPAN – предназначен для объединения ячеек в одной строке, по умолчанию задаёт значение «1».

Пример:

<table border="1">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

ROWSPAN

ROWSPAN – предназначен для объединения ячеек в одном столбце, по умолчанию задаёт значение «1».

Пример:

<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>

CELLPADDING

CELLPADDING – задаёт расстояние в пикселях границами ячейки и содержанием внутри них.

Пример:

<table border="1" cellpadding="10">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

cellspacing

cellspacing – задаёт расстояние в пикселях между ячейками.

Пример:

<table border="1" cellspacing="10">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

WIDTH и HEIGHT

WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине блока в котором расположена таблица. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте блока в котором расположена таблица. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

Пример:

<table border="1" width="400" height="200">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

ALIGN

ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left.

VALIGN

VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы .Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу,и установить посередине).

BGCOLOR

BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND

BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать адрес рисунка.
Всё эти значения можно применять как ко всей таблице целиком, для этого атрибут прописывается к элементу table, так и к отдельным строкам(tr) или ячейкам (td).

Пример:

<table width="400" height="200" border="1" align="center" bgcolor="#FFF8D2">
<tr>
<td>ряд 1 ячейка1</td>
<td align="center" valign="top">ряд1 ячейка2</td>
</tr>
<tr>
<td align="center" valign="bottom" BACKGROUND ="fon.jpg">ряд 2 ячейка 1</td>
<td align="right" valign="middle" bgcolor="#33FF99">ряд 2 ячейка 2</td>
</tr>
</table>

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


Все статьи по теме HTML:

- Введение и основы HTML
- Структура WEB документа
- Синтаксис в HTML
- Пробуем создать первую страничку
- Оформление текста в HTML (часть 1)
- Оформление текста в HTML (часть 2)
- Создание списков в HTML
- Ссылки в HTML
- Вставляем изображения в HTML документ
- Цвет теста и фона в HTML
- Создаём таблицы в HTML
- Что и для чего прописывать в HEAD
- Заключение и подведение итогов по всем пройденным элементам и атрибутам