Рейтинг@Mail.ru

Создание таблиц

Для чего нужны таблицы

Конечно же для сортировки данных, - ответите Вы. В конце концов, чем до этого XHTML так сильно отличался от того же Microsoft Word'а? Ничем. Те же списки, символы, редактирование, слегка уменьшенный функционал...Немногие сразу понимают, что в XHTML таблицы в основном используют для разметки страниц.

В основном это делается, чтобы придать сайту строгий, красивый, стильный вид. В конце концов, если он таковым не будет, то его никто не будет посещать. Кроме того, в XHTML нет системы автоматической разметки, присущей Word'у, где вы можете разметить страницу несколькими щелчками мыши. Впрочем, это ограничение убирается уже упомянутыми редакторами web-страниц. Но, прежде чем пользоваться ими, Вы обещали (прежде всего себе) досконально изучить XHTML вручную. В XHTML с таблицами можно делать практически все, а применение всех остальных средств вместе с таблицами уберет и эту планку, ничем вас не ограничивая.

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

Как строить таблицы в Web

Вначале необходимо обозначить саму таблицу. Это делают теги <table> и </table>. Все остальные теги таблицы вставляются между ними. Следует запомнить, что тег <table> является тегом разметки, т.е. он разделяет страницу до и после себя и заключать таблицу в параграф не нужно. Единственное возможное исключение - вставка таблицы на отдельный слой, но об этом будет сказано гораздо поздней, в отдельном уроке, уже после изучение более сложных технологий.

<table> и </table> - создает таблицу

Таблица составляется по следующему правилу: в таблицу записывается какое-либо (неограниченное) количество тегов строки. В каждый из тегов строки вставляется одинаковое количество соответствующих друг другу тегов столбцов.

Тегами строки являются <tr> и </tr>, тегами столбцов - <td> и </td>.

<tr> и </tr> - создает строку в таблице
<td> и </td> - создает столбец

Пример:

<table>
<tr>
<td>1 строка 1 столбец</td>
<td>1 строка 2 столбец</td>
<td>1 строка 3 столбец</td>
</tr>
<tr>
<td>2 строка 1 столбец</td>
<td>2 строка 2 столбец</td>
<td>2 строка 3 столбец</td>
</tr>
<tr>
<td>3 строка 1 столбец</td>
<td>3 строка 2 столбец</td>
<td>3 строка 3 столбец</td>
</tr>
</table>

Мы нарисовали такую таблицу

1 строка 1 столбец 1 строка 2 столбец 1 строка 3 столбец
2 строка 1 столбец 2 строка 2 столбец 2 строка 3 столбец
2 строка 1 столбец 2 строка 2 столбец 2 строка 3 столбец

Во многих таблицах верхняя строка или боковой столбец выделяются жирным шрифтом, как заголовки. Здесь такую работу выполняют теги <th> и </th>, ставящиеся вместо <td> и </td>. Теги заголовка также выравнивают текст в ячейке по центру.

Обычным таблицам также пригодится заглавие, которое вставляют теги <caption> и </caption>. Они пишутся сразу после тега <table>, вне зависимости от того, где вы хотите расположить название. Эту работу выполняет атрибут align, принимающий значения (для тега <caption>) top (вверху таблицы) и bottom (внизу таблицы).

У тега <td> также есть атрибут align, позволяющий ему выровнять текст по горизонтали. Он принимает значения left | center | right.

Некоторые браузеры также поддерживают атрибут valign, выравнивающий текст по вертикали. Он принимает значения top(сверху) | middle(центр) | bottom(снизу).

Все атрибуты тега <td> применимы и к тегу <th>.

Собираем ячейки

Если бы для разметки страниц применяли такие таблицы, как мы изучили сейчас, то это было бы утомительным делом. Поэтому из текстовых редакторов в Web перекочевала очень полезная вещь - объединение, или стягивание (англ. span), ячеек.

Атрибуты тега <td> для собирания нескольких ячеек в одну:

Атрибут colspan стягивает несколько ячеек в одну по горизонтали (т.е. объединяет столбцы). Значение атрибута - то число столбцов, которые вы хотите объединить.

Пример:

<table>
<tr>
<td>1 строка 1 столбец</td>
<td colspan="2">1 строка, 2 и 3 столбцы объединены</td>
</tr>
<tr>
<td>2 строка 1 столбец</td>
<td>2 строка 2 столбец</td>
<td>2 строка 3 столбец</td>
</tr>
<tr>
<td>3 строка 1 столбец</td>
<td>3 строка 2 столбец</td>
<td>3 строка 3 столбец</td>
</tr>
</table>

1 строка 1 столбец 1 строка, 2 и 3 столбцы объединены
2 строка 1 столбец 2 строка 2 столбец 2 строка 3 столбец
2 строка 1 столбец 2 строка 2 столбец 2 строка 3 столбец

Обратим внимание, что тег 3 столбца был удален, поскольку тег 2 столба уже содержит в себе 2 ячейки.

Атрибут для объединения ячеек по вертикали (объединение строк) - rowspan.

Пример:

<table>
<tr>
<td>1 строка 1 столбец</td>
<td rowspan="3">1,2,3 строки 2 столбец</td>
<td>1 строка 3 столбец</td>
</tr>
<tr>
<td>2 строка 1 столбец</td>
<td>2 строка 3 столбец</td>
</tr>
<tr>
<td>3 строка 1 столбец</td>
<td>3 строка 3 столбец</td>
</tr>
</table>

1 строка 1 столбец 1,2,3 строки, 2 столбец 1 строка 3 столбец
2 строка 1 столбец 2 строка 3 столбец
2 строка 1 столбец 2 строка 3 столбец

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

Никто не запрещает добропорядочным веб-дизайнерам использовать оба метода сразу, например так:

1,2 строки 1,2 столбцы 1-5 строки 3 столбец 1 строка 4,5 столбцы
2 строка 4 столбец 2 строка 5 столбец
3 строка 1,2 столбцы 3 строка 4,5 столбцы
4 строка 1,2 столбцы 4,5 строка 4,5 столбцы
5 строка 1 столбец 5 строка 2 столбец

Подумайте о том, как сделана эта таблица.

У таблиц есть множество полезных атрибутов. Вот самые главные:
width(ширина) и height(высота). Эти атрибуты применяются к тегам <table>, <td>, но не <tr>.

Значениями атрибутов могут становиться количество пикселей или процентов, для высоты используют как правило только пиксели, для ширины - в зависимости от обстоятельств, но как правило также пиксели. Следует заметить, что если Вы, например, обозначите ширину какой-либо ячейки, то эту ширину автоматически примет весь столбец. Например вы создали таблицу шириной в 1000 пикселей, которая будет отображаться посередине экрана. Если вы разметите её так, как на рисунке, вы можете сделать левую верхнюю ячейку по ширине 200-250 пикселям, при этом весь столбик подойдет под эту ширину. Кстати, под навигацию обычно оставляют как раз 170-250 пикселей слева (иногда справа).

Основы разметки

Применим полученные знания на практике.

Откройте свою страницу. Страницу обычно размечают так: 3 больших строки: 1 строка - логотип и название, 2 строка - навигация и основное содержание, 3 строка - дополнительная информация. Иногда вводят дополнительную строку (между 1 и 2, иногда также между 2 и 3), на которой размещается основная навигация - ссылки на другие страницы. Разумеется, возможны и другие варианты, но эта разметка является классической.

Вот самая классическая разметка:

Логотип как правило - уникальная картинка вашего сайта. Как добавлять изображения, мы изучим позднее. Названием может служить как текст, так и картинка. Более подробно о правильной разметке страницы мы прочитаем в поздних уроках. Содержание - текст вашей страницы. Навигация - ссылки на другие страницы вашего сайта. В поле "Дополнительная информация" можно вписать информацию о себе (компании), такую как телефон, e-mail и т.п. Впрочем, компании обычно создают отдельную страницу для этой информации.

Т.к. мы еще не изучали ссылки, создание нескольких страниц еще за пределами нашего понимания. Пока достаточно лишь запомнить этот урок. Более подробно выбирать разметку для страницы мы будем на уроках, посвященных таблицам стилей, а сейчас мы переходим к новому разделу "Контент" и изучим тему Гиперссылки.

 

 

uroki.webservis.ru        Рейтинг@Mail.ru