HTML: Табличная верстка
Верстка - процесс создания и структурирования HTML-документов.
Для того, чтобы ваш сайт хорошо выглядел, нужно тщательно проработать дизайн макета страницы. Для начала нужно определиться, будет ли содержимое сайта находиться в общем блоке или будет поделено на несколько столбцов.
Самым простым способом для создания макета сайта является тег <table>. С его помощью можно быстро разделить страницу на нужное вам количество строк и столбцов.
В следующем примере используется таблица, состоящая из 3 строк и 2 столбцов, первая и последняя строки объединяют оба столбца с помощью атрибута colspan:
<html> <body> <table style="width: 500px;border:0px;"> <tr> <td colspan="2" style="background-color:#85C2FF;"> <h1 style="color: black;">Верхняя часть сайта</h1> </td> </tr> <tr style="vertical-align: top;"> <td style="background-color:#C2EBFF;width:100px;text-align:top;"> <b>Меню</b><br> пункт 1<br> пункт 2<br> пункт 3 </td> <td style="background-color:#fff;height:200px;width:400px;text-align:top;"> Место для контента</td> </tr> <tr> <td colspan="2" style="background-color:#85C2FF;text-align:center;"> Copyright © 2012 www.puzzleweb.ru</td> </tr> </table> </body> </html>
Результат данного примера в окне браузера:
Верхняя часть сайта |
|
Меню пункт 1 пункт 2 пункт 3 |
Место для контента |
Copyright © 2012 www.puzzleweb.ru |
Несмотря на то, что с помощью таблиц можно создавать красивый дизайн и удобные макеты страниц, в первую очередь таблицы были разработаны для добавления на страницы табличных данных, а не в качестве инструмента для разметки.
Примечание: для уменьшения объема кода и удобства редактирования css стилей, сразу для нескольких страниц, сделанных по одному шаблону, рекомендуем вам выносить весь css-код в отдельный файл.
С этой темой смотрят: