Пример 12.3. Неверное объединение ячеек

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

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

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере. Ее хорошо видно на рис. 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">< html > < head > < meta http-equiv="Content-Type" content="text/html; charset=utf-8"> < 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 >

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

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

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

Создание таблицы. ПРИМЕР

Постройте таблицу шириной 600 пикселов с двумя колонками, левая колонка занимает ширину 150 пикселов. Содержимое колонок должно выравниваться по верхнему краю, а сама таблица располагается по центру веб-страницы. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<title> Таблица </title>

</head>

<body>

<table width="600" align="center" cellpadding="4" cellspacing="0" border="1" >

<tr>

<td width="150" valign="top" > Левая колонка </td>

<td valign="top" > Правая колонка </td>

</tr>

</table>

</body>

</html>

Табличная верстка

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

Благодаря универсальности таблиц и большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но наметилась четкая тенденция — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.