День 10. Юбилей? Нет, день рождения.
Сегодня я продолжал, а как к
вечеру выяснилось и заканчивал, учится работать с таблицами. Если кто не
помнит, то с таблицами я начал работать т.к.
это является основным средством проектирования дизайна страницы.
Сегодня я рассмотрел три важных
возможности в работе с таблицами.
Объединения ячеек.
Представьте себе страницу, скажем
SportBox'а. Там ведь есть элементы разные по своим размерам, расположены они в
разных местах страницы и потому предположить, что эти элементы вписаны в ячейки
обычной, неизмененной таблицы, было бы просто неразумно.
Для создания таких страниц, если
использовать для этого таблицы, необходимо сделать так, чтобы ячейки таблицы,
в зависимости от нашего желания, были
разного размера. Для этого в HTML предусмотрена возможность их объединения.
Для объединения ячеек
используются атрибуты rowspan для объединения ячеек по вертикали, colspan – для объединения
ячеек по горизонтали. Эти атрибуты следует применять к элементам TR и TH, в
зависимости от того, какого типа ячейки нам нужно объединять. В качестве значений для этих атрибутов
указывают количество объединяемых ячеек.
Прежде чем переходить к примеру, одно замечание: когда вы будете проектировать
и создавать собственные таблицы, нарисуйте их сначала на бумаге, по крайней
мере мне с визуальной картинки «перерисовывать» таблицу кодом, гораздо проще и
нагляднее.
Вот код таблицы, в которой
некоторые ячейки были объединены:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
<head>
<title>Объединение ячеек таблицы</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table style="color:blue" border="3" bordercolor="blue" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th colspan=3>Ячейка во всю длину</th></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка22</td><td>Ячейка23</td>
<tr><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка42</td><td>Ячейка43</td>
<tr><td>Ячейка52</td><td>Ячейка53</td></tr>
</table>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
<head>
<title>Объединение ячеек таблицы</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table style="color:blue" border="3" bordercolor="blue" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th colspan=3>Ячейка во всю длину</th></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка22</td><td>Ячейка23</td>
<tr><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка42</td><td>Ячейка43</td>
<tr><td>Ячейка52</td><td>Ячейка53</td></tr>
</table>
</body>
</html>
И результат работы кода:
Анализ кода даст вам ответы на все ваши вопросы.
Установка фона ячеек.
Так как в каждой ячейке таблицы располагается
свой элемент, может возникать необходимость изменения фона от ячейке к ячейке.
Более того, к каждой ячейке может применятся своя фоновая картинка. А так как
мы с вами хотим быть как про, нужно освоить и эту возможность.
Цвет фона задается атрибутом
bgcolor элементов TR,
TH, и TD. Значение атрибута bgcolor задается обычным уже для
нас(ЕЕЕЕЕЕЕЕЕ!)способом.
С помощью же атрибута background можно задать фоновую
картинку ячейки, указав в качестве её значения адрес к картинке на вашем
компьютере. Только учтите, что размер картинки должна совпадать с размером ячейки.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
<head>
<title>Объединение ячеек таблицы с фоном</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table style="color:blue" border="3" bordercolor="blue" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th colspan=3 bgcolor="red">Ячейка во всю длину</th></tr>
<tr><td rowspan=2 bgcolor="grey">Ячейка на две строки</td><td>Ячейка22</td><td>Ячейка23</td>
<tr><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка42</td><td>Ячейка43</td>
<tr><td>Ячейка52</td><td>Ячейка53</td></tr>
</table>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
<head>
<title>Объединение ячеек таблицы с фоном</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table style="color:blue" border="3" bordercolor="blue" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th colspan=3 bgcolor="red">Ячейка во всю длину</th></tr>
<tr><td rowspan=2 bgcolor="grey">Ячейка на две строки</td><td>Ячейка22</td><td>Ячейка23</td>
<tr><td>Ячейка32</td><td>Ячейка33</td></tr>
<tr><td rowspan=2>Ячейка на две строки</td><td>Ячейка42</td><td>Ячейка43</td>
<tr><td>Ячейка52</td><td>Ячейка53</td></tr>
</table>
</body>
</html>
Результат:
Понятно? Не слышу. Понятно? Вот
так то.
Вложенные таблицы.
Элементы в языке HTML можно
вкладывать друг в друга в любом порядке(ну кроме главных элементов, я надеюсь,
это понятно) в зависимости от того что нужно то нам.
То же самое касается и элементов
таблицы, а это значит, что мы можем создавать «таблицы в таблице», так
называемые вложенные таблицы.
Вот вам пример такой таблицы:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
<head>
<title>Вложенные таблицы</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table border="3" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><td>Ячейка 11</td><td>Ячейка12</td><td>Ячейка13</td><td>Ячейка14</td></tr>
<tr><td colspan=4>
<table border="3" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th>Заголовок 1</th><th>Заголовок2</th><th>Заголовок3</th>
<tr><td>Ячейка1</td><td>Ячейка2</td><td>Ячейка3</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
<head>
<title>Вложенные таблицы</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
</head>
<body>
<table border="3" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><td>Ячейка 11</td><td>Ячейка12</td><td>Ячейка13</td><td>Ячейка14</td></tr>
<tr><td colspan=4>
<table border="3" cellspacing="0" cellpadding="5" align="center" valign="middle">
<tr><th>Заголовок 1</th><th>Заголовок2</th><th>Заголовок3</th>
<tr><td>Ячейка1</td><td>Ячейка2</td><td>Ячейка3</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Такая вот вещчь:
Здесь нет никаких новых элементов
или атрибутов, просто внутрь одной таблицы «вложили» другую мы.
Домашняя работа.
Я сегодня рассказал вам про создание фона ячейки. А попробуйте-ка вы дома
сформировать шахматную доску, а?
До встречи, друзья.
До встречи, друзья.
Комментариев нет:
Отправить комментарий