Результат данного примера показан на рис. 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 определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но наметилась четкая тенденция — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.
