Реальный пиарHTMLОбщее представление → Таблица в HTML. Создание таблиц

Таблица в HTML. Создание таблиц

html теги

Таблица состоит из строк и столбцов, которые могут содержать текст и рисунки. С помощью таблиц удобно верстать макеты страниц, расположив фрагменты текста и изображений нужным образом. Для добавления таблицы на веб-страницу используется тег TABLE.

Любая таблица состоит из строк и столбцов, которые задаются с помощью тегов TR и TD соответственно. Таблица должна содержать хотя бы один столбец.

Вместо тега TD допускается использовать тег TH. Текст в такой ячейке обычно отображается браузером жирным шрифтом и выравнивается по центру. Пример:

<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table border="1" width="100%" cellpadding="10">
<tr>
<th width="50%">Ячейка 1</th>
<th width="50%">Ячейка 2</th>
</tr>
<tr>
<td width="50%">Ячейка 3</td>
<td width="50%">Ячейка 4</td>
</tr>
</table>
</body>
</html>

К тэгу TABLE могут применяться параметры:
Width - Задает ширину таблицы.
Height - Устанавливает высоту таблицы.
Border - Устанавливает толщину рамки в пикселах.
Bgcolor - Устанавливает цвет фона таблицы.
Cellpadding - Определяет расстояние между границей ячейки и ее содержимым. Без этого параметра текст в таблице "налипает" на рамку, ухудшая тем самым его восприятие.
Cellspacing - Задает расстояние между внешними границами ячеек.
И так далее.

Например, для получения таблицы вида:

Пишем:

<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table border="2" bordercolor="black" width="100%" cellpadding="10" cellspacing="40" bgcolor="#CC00FF">
<tr>
<th width="50%" bgcolor="white">Ячейка 1</th>
<th width="50%" bgcolor="white">Ячейка 2</th>
</tr>
<tr>
<td width="50%" bgcolor="white">Ячейка 3</td>
<td width="50%" bgcolor="white">Ячейка 4</td>
</tr>
</table>
</body>
</html>

Как вы поняли, каждая ячейка таблицы, задаваемая через тег TD, тоже имеет свои параметры, часть из которых совпадает с параметрами тега TABLE.

Как правило, при верстке сайта применяются фиксированные по размеру таблицы. Это значит, что вместо процентов в качестве ширины и высоты таблицы указываются конкретные значения в пикселях:

<table border="1" width="500" height="200">

В примере я указал, что ширина таблицы должна быть равна 500 пикселям, а высота – 200 пикселей.

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

<html>
<head>
<title>Таблицы</title>
</head>
<body>
<table border="1" width="500" height="200" align="center">
<tr>
<td width="300">&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td width="300" height="150">&nbsp;</td>
<td height="150">&nbsp;</td>
</tr>
</table>
</body>
</html>

В примере мы выровняли таблицу по центру.

Для объединения ячеек таблицы используются параметры rowspan и colspan тэга TD.

Для объединения ячеек по вертикали:

<table border="1" bordercolor="black" width="400" cellpadding="10" cellspacing="0">
<tr>
<td width="192">&nbsp;</td>
<td width="192" rowspan="2">&nbsp;</td>
</tr>
<tr>
<td width="192">&nbsp;</td>
</tr>
</table>

Чтобы объединить ячейки по горизонтали

пишем:

<table border="1" bordercolor="black" width="400" cellpadding="10" cellspacing="0">
<tr>
<td width="376" colspan="2">&nbsp;< /td>
</tr>
<tr>
<td width="192">&nbsp;</td>
<td width="192">&nbsp;</td>
</tr>
</table>

Для выравнивания текста внутри ячейки используются параметры:

- ALIGN. Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left, center, right.

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

Пример:

<table border="1" bordercolor="blue" width="400" cellpadding="10" cellspacing="0">
<tr>
<td width="192" align="center" valign="middle">Ячейка1</td>
<td width="192" align="right" valign="bottom">Ячейка2</td>
</tr>
</table>

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

<table border="1" width="411" height="119">
<tr>
<td width=113 height=113 background="image1.jpg">ФОН 1</td>
<td width=282 height=113 background="image2.jpg">ФОН 2</td>
</tr>
</table>

В примере использованы изображения 113*113 пикселей. На рисунке видно, как разнится результат в зависимости от размера ячейки.

Более лучшего способа для верстки веб-страницы чем таблицы еще не придумали. Конечно, писать постоянно HTML код очень неудобно и трудоемко. Но если воспользоваться Namo WebEditor 8, то никаких сложностей не будет.


Источник: http://www.greenlight5.com

Рекомендуем



Основы HTML, добавление изображений Для встраивания изображения в документ используется тег IMG, имеющий единственный обязательный параметр src, который определяет адрес файла с картинкой


Ссылки в HTML, закладки, изображение-ссылка Особенность ссылки состоит в том, что она может указывать не только на html-файл, но и на файл любого типа, причем этот файл может размешаться совсем на другом сайте


Основы HTML и CSS, работа с текстом Cтили позволяют создать не только отступ, но и выступ, при котором первая строка выдвигается влево, а остальной текст остается на месте