Рассылка закрыта
При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.
Вы можете найти рассылки сходной тематики в Каталоге рассылок.
| ← Октябрь 2007 → | ||||||
|
1
|
2
|
3
|
4
|
5
|
6
|
|
|---|---|---|---|---|---|---|
|
8
|
9
|
10
|
11
|
12
|
13
|
|
|
15
|
16
|
17
|
18
|
19
|
20
|
21
|
|
22
|
23
|
24
|
25
|
26
|
27
|
|
|
29
|
30
|
31
|
||||
Статистика
-7 за неделю
Самоучитель по HTML и CSS - 17
Самоучитель по HTML и CSS
12. Создание сложных таблицПо умолчанию таблица формируется в виде сетки, при этом в каждой строке таблицы содержится одинаковое количество ячеек. Такой вариант вполне подходит для формирования простых таблиц, но совершенно не годится для тех случаев, когда предстоит сделать сложную таблицу. В подобных ситуациях применяются два основных метода: объединение ячеек и вложенные таблицы. Объединение ячеекДля объединения двух и более ячеек в одну используется параметр colspan тега <TD>. Он устанавливает, сколько ячеек следует объединить по горизонтали. Аналогично работает и параметр rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan="3"> заменяет три ячейки, поэтому в следующей строке должно быть три тега <TD> или конструкция вида <td colspan="2">...</td><td>...</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В листинге 12.3 приведен неверный код, в котором как раз проявляется подобная ошибка. Листинг 12.3. Неверное объединение ячеек <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Результат данного примера показан на рис. 12.5.
Рис. 12.5. Появление дополнительной ячейки в таблице В первой строке примера задано три ячейки, две из них объединены с помощью параметра colpsan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 12.5. Правильное использование параметров colspan и rowspan продемонстрировано в листинге 12.4. Листинг 12.4. Объединение ячеек по вертикали и горизонтали <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Результат данного примера показан на рис. 12.6.
Рис. 12.6. Таблица с объединенными ячейками В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer», «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали. Вложенные таблицыОбъединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно. Для примера рассмотрим листинг 12.5, где задается высота ячейки с помощью параметра height. Листинг 12.5. Явно заданная высота ячейки <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Результат данного примера показан на рис. 12.7.
Рис. 12.7. Высота ячеек в браузере Opera 9 Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что параметр height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами. Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%. В листинге 12.6 показан пример использования вложенных таблиц для создания двух колонок и навигации. Листинг 12.6. Вложенные таблицы <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Рис. 12.8. Вид вложенных таблиц В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%. Как видно из рис. 12.8, если не задавать границы, то определить наличие таблиц по виду веб-страницы довольно сложно. По этой причине таблицы до сих пор активно применяются для верстки сложных макетов. Задание1. Постройте таблицу шириной 600 пикселов с двумя колонками, левая колонка занимает ширину 150 пикселов. Содержимое колонок должно выравниваться по верхнему краю, а сама таблица располагаться по центру веб-страницы. 2. Создайте таблицу приведенную на рис. 12.9.
Рис. 12.9 3. Исправьте ошибки в приведенном коде. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd"> Рецепты CSSКак установить ширину таблицы через стили?Как известно, ширина таблицы определяется с помощью параметра width тега <TABLE>. При этом допустимо устанавливать ширину в пикселах (width="400") или в процентах (width="60%"). Через стили ширину таблиц задавать удобнее, поскольку можно сразу же определить ширину нескольких таблиц и менять их в одном месте — файле со стилями. К тому же несколько сокращается объем кода. Для определения ширины таблицы используйте стилевой атрибут width, применяя его к селектору TABLE, как показано в примере 1. Пример 1. Ширина таблицы <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd"> В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 25%. Это достигается за счет добавления атрибута width к селектору TD с именем определенного класса (<td class="col1">). При использовании стилей для изменения ширины таблицы допустимо применять любые допустимые единицы измерения, а не только пикселы и проценты.
Copyright 2007 Влад Мержевич. По всем вопросам пишите по адресу vlad@htmlbook.ru
|
| В избранное | ||
