Тег colspan - объединение столбцов




Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:

 

шапка сайта
меню контент
низ сайта

 

Если наложить на этот рисунок таблицу, то мы увидим, что она состоит из трех строк и двух столбцов фиксированной ширины.

 

шапка сайта  
меню контент
низ сайта  

 

Получается, что нам нужно, чтобы в первой и третьей строках было по одному столбцу. Это достигается при помощи параметра colspan тега <td>. Этот параметр указывает браузеру объединить несколько столбцов в один. Значением этого параметра является число, указывающее сколько столбцов будет объединено.

Например,

 

<td colspan="2">

 

Этот столбец включает в себя два столбца.

Для нашего примера:

 

 

<html>

 

<head>

<title>Заголовок документа</title>

</head>

 

<body>

 

<table width="715" border="1"

align="center" cellspacing="0" cellpadding="10">

 

<tr bgcolor="darkred">

<td colspan="2" height="100">шапка сайта</td>

</tr>

 

<tr bgcolor="oldlace">

<td width="190" height="300">меню</td>

<td>контент</td>

</tr>

 

<tr bgcolor="darkred">

<td colspan="2" height="30">низ сайта</td>

</tr>

 

</table>

 

</body>

 

</html>

 

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

Рассмотрим другой пример разметки web-страницы:

 

шапка сайта
меню меню меню меню меню меню
новости контент

 

Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов.

Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:

 

 

<tr bgcolor="darkred">

<td colspan="6" height="60">шапка сайта</td>

</tr>

 

 

Вторая строка состоит из шести столбцов:

 

 

<tr bgcolor="oldlace">

<td height="30">меню</td>

<td height="30">меню</td>

<td height="30">меню</td>

<td height="30">меню</td>

<td height="30">меню</td>

<td height="30">меню</td>

</tr>

 

 

Третья строка состоит из двух столбцов, причем, первый включает в себя два столбца, а второй - четыре:

 

 

<tr>

<td colspan="2" height="190" bgcolor="darkred">новости</td>

<td colspan="4" bgcolor="#FFFFFF">контент</td>

</tr>

 

 

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

Тег rowspan - объединение строк

А если нам понадобится вот такая разметка?

 

меню шапка
контент

 

Наложим зрительно сетку, получается две строки и два столбца. Но первый столбец первой строки объединяет две строки.

Для такого случая есть параметр rowspan тега <td>. Этот параметр указывает браузеру объединить несколько строк в одну. Значением этого параметра является число, указывающее сколько строк будет объединено.

Например,

 

<td rowspan="2">

 

Здесь столбец включает в себя две строки.

Для нашего рисунка:

 

 

<html>

 

<head>

<title>Заголовок документа</title>

</head>

 

<body>

 

<table width="715" border="1"

align="center" cellspacing="0" cellpadding="10">

 

<tr bgcolor="darkred">

<td rowspan="2" width="30%">меню</td>

<td height="60">шапка</td>

</tr>

 

<tr bgcolor="oldlace">

<td height="200">контент</td>

</tr>

 

</table>

 

</body>

 

</html>

 

 

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

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

Рассмотрим еще один пример:

 

шапка меню
контент
низ сайта

 

Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:

 

<tr bgcolor="darkred">

<td width="70%" height="60">шапка</td>

<td rowspan="2">меню</td>

</tr>

 

Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):

 

<tr bgcolor="oldlace">

<td height="200">контент</td>

</tr>

 

Наконец, третья строка - это один столбец, включающий в себя три столбца:

 

<tr bgcolor="darkred">

<td colspan="2" height="30">низ сайта</td>

</tr>

 

 

Используя эти два параметра rowspan и colspan можно создавать таблицы любой сложности. Потренируйтесь.

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

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

Итак, у нас есть вот такой код:

 

 

<html>

 

<head>

<title>Заголовок документа</title>

</head>

 

<body>

 

<table width="715" border="1"

align="center" cellspacing="0" cellpadding="10">

 

<tr bgcolor="darkred">

<td width="70%" height="60">шапка</td>

<td rowspan="2">меню</td>

</tr>

 

<tr bgcolor="oldlace">

<td height="200">контент</td>

</tr>

<tr bgcolor="darkred">

<td colspan="2" height="30">низ сайта</td>

</tr>

 

</table>

 

</body>

 

</html>

 

 

Давайте внутрь нашего контента поместим во такую таблицу:

 

Картинки для нее подберите сами. Код этой таблицы простой - три строки и два столбца:

 

 

<table width="470" border="1"

align="center" cellspacing="0" cellpadding="10">

 

<tr>

<td width="100"><img src="f1.jpg" width="100" height="70"></td>

<td>Здесь текст о ромашках</td>

</tr>

 

<tr>

<td width="100"><img src="f2.jpg" width="100" height="70"></td>

<td>Здесь текст о тюльпанах</td>

</tr>

 

<tr>

<td width="100"><img src="f3.jpg" width="100" height="70"></td>

<td>Здесь текст о герберах</td>

</tr>

 

</table>

 

 

Теперь возьмем код этой таблицы и поместим его вместо слова "контент" в код нашей разметки:

 

 

<html>

 

<head>

<title>Заголовок документа</title>

</head>

 

<body>

 

<table width="715" border="1"

align="center" cellspacing="0" cellpadding="10">

 

<tr bgcolor="darkred">

<td width="70%" height="60">шапка</td>

<td rowspan="2">меню</td>

</tr>

 

<tr bgcolor="oldlace">

<td height="200">

 

<table width="470" border="1"

align="center" cellspacing="0" cellpadding="10">

 

<tr>

<td width="100"><img src="f1.jpg" width="100" height="70"></td>

<td>Здесь текст о ромашках</td>

</tr>

 

<tr>

<td width="100"><img src="f2.jpg" width="100" height="70"></td>

<td>Здесь текст о тюльпанах</td>

</tr>

 

<tr>

<td width="100"><img src="f3.jpg" width="100" height="70"></td>

<td>Здесь текст о герберах</td>

</tr>

 

</table>

 

 

</td>

</tr>

<tr bgcolor="darkred">

<td colspan="2" height="30">низ сайта</td>

</tr>

 

</table>

 

</body>

 

</html>

 

 

Результат:

 

Теперь уберем все границы у вложенной таблицы. Для этого в теге <table> этой таблицы зададим параметр <border="0">

 

 

<table width="470" border="0"

align="center" cellspacing="0" cellpadding="10" >

 

 

Результат:

 

Именно так оформляется контент при табличной верстке сайтов.

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

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2019-08-04 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: