Лариса

Интересные сайты

Посетители

Календарь

<
Апрель 2014
>
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
282930
Подписка

E-mail: 
Другие сайты

gankov-nnov MARIO
need-for-fly NEED FOR FLIGHT
zubrova-ivanka СЕМЕЙНЫЙ НУДИЗМ + !!!
dj-snek DJ_SNEK
saiya Saiya Ritsuka
Вернуться на главнуюЛариса / С**** / Справочник по HTML / Создание сложных таблиц (продолжение)

Создание сложных таблиц (продолжение)

4.00 (3)

Создание сложных таблиц

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

Объединение ячеек

Для объединения двух и более ячеек в одну используется параметр colspan тега <TD>. Он устанавливает, сколько ячеек следует объединить по горизонтали. Аналогично работает и параметр rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan="3"> заменяет три ячейки, поэтому в следующей строке должно быть три тега <TD> или конструкция вида <td colspan="2">...</td><td>...</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В листинге 3 приведен неверный код, в котором как раз проявляется подобная ошибка.

Листинг 3. Неверное объединение ячеек

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Неправильное использование параметра colspan</title>
</head>
<body>

<table border="1" cellpadding="5">
<tr>
<td colspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</table>

</body>
</html>

Результат данного примера показан на рис. 5.

Рис. 5. Появление дополнительной ячейки в таблице

В первой строке примера задано три ячейки, две из них объединены с помощью параметра colpsan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 5.

Правильное использование параметров colspan и rowspan продемонстрировано в листинге 4.

Листинг 4. Объединение ячеек по вертикали и горизонтали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Объединение ячеек</title>
</head>
<body>

<table border="1" cellpadding="4" cellspacing="0">
<tr>
 <td rowspan="2">Браузер</td>
 <th colspan="2">Internet Explorer</th>
 <th colspan="3">Opera</th>
 <th colspan="2">Firefox</th>
</tr>
<tr>
 <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
</tr>
<tr align="center">
 <td>Поддерживается</td>
 <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
</tr>
</table>

</body>
</html>

Результат данного примера показан на рис. 6.

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

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer», «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

Вложенные таблицы

Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно. Для примера рассмотрим листинг 5, где задается высота ячейки с помощью параметра height.

Листинг 5. Явно заданная высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Объединение ячеек</title>
</head>
<body>
<table width="100%" border="1" cellpadding="4" cellspacing="0">
<tr>
<td width="100" valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</td>
<td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.</td>
</tr>
<tr>
<td height="40">Lorem ipsum</td>
</tr>
</table>
</body>
</html>

Результат данного примера показан на рис. 7.

Рис. 7. Высота ячеек в браузере Opera 9

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что параметр height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.

В листинге 6 показан пример использования вложенных таблиц для создания двух колонок и навигации.

Листинг 6. Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Вложенные таблицы</title>
</head>
<body>

<table width="100%" border="0" cellpadding="5" cellspacing="0">
<tr>
<td width="150" valign="top" bgcolor="#f0f0f0">
 <table width="100%" cellpadding="2" cellspacing="1">
  <tr><td bgcolor="#ffffff">Lorem</td></tr>
  <tr><td bgcolor="#ffffff">Ipsum</td></tr>
  <tr><td bgcolor="#ffffff">Dolor</td></tr>
  <tr><td bgcolor="#ffffff">Sit</td></tr>
  <tr><td bgcolor="#ffffff">Amet</td></tr>
 </table>
</td>
<td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td>
</tr>
</table>

</body>
</html>


Результат данного примера показан на рис. 8.

Рис. 8. Вид вложенных таблиц

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

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

Задание

1. Постройте таблицу шириной 600 пикселов с двумя колонками, левая колонка занимает ширину 150 пикселов. Содержимое колонок должно выравниваться по верхнему краю, а сама таблица располагаться по центру веб-страницы.

2. Создайте таблицу приведенную на рис. 9.

Рис. 9

3. Исправьте ошибки в приведенном коде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<table border="0" celpadding="0" celspacing="0" border="2">
<tr>
<td valign="top">Ut aliquip ex ea commodo.</td>
<td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
<td valign="botom" colspan="2">Lobortis nisl.</td>
<td valign="top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td>
</tr>
</table>
</body>
</html>

Рецепты 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">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Ширина таблицы</title>
<style type="text/css">
TABLE {
width: 100%; /* Ширина таблицы в процентах */
}
TD.col1 {
width: 25%; /* Ширина ячейки */
}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="col1">Колонка 1</td>
<td class="col2">Колонка 2</td>
</tr>
</table>
</body>
</html>

В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 25%. Это достигается за счет добавления атрибута width к селектору TD с именем определенного класса (<td class="col1">).

При использовании стилей для изменения ширины таблицы допустимо применять любые допустимые единицы измерения, а не только пикселы и проценты.



subscr12_5.png
Скачать Удалить

subscr12_6.png
Скачать Удалить

subscr12_7.png
Скачать Удалить

subscr12_8.png
Скачать Удалить

subscr12_9.png
Скачать Удалить


Комментарии: 0 Просмотров: 3070 [История изменений] Размер:28416 байт
Последние изменения сделаны: dupan58 Лариса 2187 дней назад 28.04.2008 22:30:49
ДобавилТекст

Имя Пароль
расширенный... ( / Регистрация )

Тема

В тексте можно использовать Wiki или HTML теги




Кто на сайте?

Анонимные: 4, Зарегистрированные: 0 (?)
Жалоба | Размещено на MyLivePage | | Design by Ivan | © Kolobok smiles, Aiwan