Таблицы в HTML

Тэги для таблиц, строк и ячеек

Таблица заключается в тэг <table>. Этот тэг контейнерный, т.е. закрывается тэгом </table>.

Внутри тэга <table> для каждой строки таблицы ставится тэг <tr> (англ. table row – строка таблицы). В свою очередь, внутри тэга <tr> каждая ячейка таблицы задаётся тэгом <td> (англ. table data – табличные данные). Тэги <tr> и <td> также контейнерные.

Основное правило: таблицы в HTML описываются по строкам. Сначала идут все данные (текст и тэги), описывающие все ячейки первой строки, затем второй и т.д. Таким образом, число строк в таблице определяется числом тэгов <tr>.

Атрибуты тэга <table>:

border – задаёт границу таблицы. По умолчанию 0, т.е. таблица не разлинована.

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

cellpadding – задаёт «внутренние поля» ячеек таблицы, т.е. расстояние от границы ячейки до текста.

width – задаёт ширину таблицы в пикселах или в процентах от ширины окна браузера. По умолчанию 100%, т. е. таблица занимает всю ширину окна браузера.

height – задаёт высоту таблицы. Обычно не нужен, так как таблица автоматически растягивается по вертикали, чтобы вместить всё содержимое.

Атрибуты width и height могут быть также указаны у тэгов <tr> и <td> для указания ширины или высоты отдельного ряда или ячейки.

Если ячейка пуста, браузеры по умолчанию не выводят её внутреннюю границу. Чтобы изменить это поведение, в пустые ячейки следует ввести символ неразрывного пробела – «&nbsp;».

2.4.2. Таблицы с объединёнными ячейками

Можно объединить несколько ячеек таблицы по вертикали и горизонтали в одну. Для этого служат атрибуты colspan и rowspan тэга <td>. Они указываются в первой (самой верхней левой) из объединяемых ячеек; тэги <td>, соответствующие остальным ячейкам, просто удаляются.

Пример. Создадим следующую таблицу с объединёнными ячейками:

Эта таблица создаётся с помощью следующего HTML-кода:

<table border="1">

<tr>

<td rowspan="2" colspan="3">1</td>

<td>2</td>

</tr>

<tr>

<td>3</td>

</tr>

<tr>

<td>4</td>

<td>5</td>

<td>6</td>

<td>7</td>

</tr>

</table>

Первая строка содержит две ячейки. Первая ячейка (с цифрой 1) занимает две строки и три столбца. Вторая ячейка (2) – обычная. Затем идёт описание второй строки таблицы. Так как первая ячейка была задана при описании первой строки, то повторно мы её не определяем. Поэтому второй ряд будет содержать описание только одной ячейки (3). Третья строка состоит из четырёх обычных ячеек (4–7).

Каскадные таблицы стилей (CSS)

Вводные замечания о таблицах стилей

Опытные пользователи редактора Microsoft Word очень ценят такую его особенность, как стили. Например, можно создать стиль для заголовков глав и параграфов, задавая определённый шрифт, расположение, другие характеристики текста и далее применить созданное описание к конкретным фрагментам текста. Если впоследствии вас что-то не устраивает в описании стиля (например, заголовки параграфов необходимо оформить по-другому), вы можете изменить параметры стиля, что мгновенно отразится на всём тексте, а не будете исправлять каждый заголовок параграфа по отдельности. Итак, стиль – это правило, определяющее внешний вид того или иного элемента в документе.

То же самое справедливо и для веб-страниц. Как известно, элементом веб-страницы является тэг. Используя технологию каскадных стилевых таблиц (англ. cascading style sheets – CSS), вы сможете задавать стиль для тэгов. Иными словами, в стилевых таблицах вы определяете, как будет выглядеть веб-страница в браузере.

Преимущества стилевых таблиц:

1. Таблицы стилей позволяют отделить логическую структуру страниц от визуального представления (оформления), ведь язык HTML изначально был разработан для разметки структуры документа.

2. Созданная таблица стилей может применяться ко всем страницам сайта, благодаря чему соблюдается единство его оформления.

3. Если сайт оформлен с помощью единой стилевой таблицы, то в случае внесения изменений в оформление тэгов в одном месте (в стилевой таблице) эти изменения вступят в силу на всех страницах сайта и вам не придётся открывать и редактировать все страницы, где встречаются эти тэги. Тем самым технология CSS позволяет гибко управлять внешним представлением страниц на экране.

Повторим пример нашей первой веб-страницы, добавив в него простейшую таблицу стилей. Она будет располагаться в новом тэге <style>, вложенном в тэг <head>:

<html>

<head>

<title>Моя первая веб-страница</title>

<style>

h1 {color: red; font-weight: normal}

</style>

</head>

<body>

<h1>Добро пожаловать!</h1>

<p>Это моя первая веб-страница. </p>

</body>

</html>

Открыв полученный файл в браузере, увидим, что заголовок «Добро пожаловать!» стал красного цвета и нежирного начертания. Мы создали определение стиля для тэга <h1>.

Дата добавления: 2015-07-26