<table>
Как выровнять содержимое ячеек таблицы по верхнему краю?
Таблицы часто применяются для создания многоколонного макета. Каждая ячейка выступает в роли колонки, при этом высота всех колонок будет одинакова, поскольку ячейки взаимосвязаны. По умолчанию содержимое ячеек выравнивается по центру вертикали, что не всегда удобно, особенно если содержимое близлежащих ячеек различается по объему. При этом получится, что в одной колонке текст начинается от верхнего края, а в другой по середине. Исправить это положение можно с помощью атрибута valign="top" тега <td>.
Как выделить другим цветом первую строку таблицы?
Первая строка таблицы обычно используется для строки заголовка, в которой пишется наименования столбцов. Для акцентирования внимания на заголовке, строку выделяют другим фоном и цветом. С этой целью обычно применяется тег <th>, который по своему действию похож на тег <td>, при этом текст в ячейке выравнивается по ее центру и пишется жирным начертанием. Для селектора TH допустимо задать собственный стиль, определяющий оформления строки заголовка.
Как выровнять таблицу по центру окна браузера?
Выравнивание таблицы работает только в случае, когда явно задана её ширина и она меньше 100%. При соблюдении этих условий для селектора table следует задать свойство margin со значением auto. Оно обозначает, что отступы от таблицы вычисляются автоматически, это как раз и приводит к её центрированию.
Как установить ширину таблицы через стили?
Как известно, ширина таблицы определяется с помощью атрибута width тега <table>. При этом допустимо устанавливать ширину в пикселах (width="400") или в процентах (width="60%"). Через стили ширину таблиц задавать удобнее, поскольку можно сразу же определить ширину нескольких таблиц и менять их в одном месте. К тому же несколько сокращается объем кода.
Для определения ширины таблицы используйте стилевое свойство width, применяя его к селектору TABLE.
Тег <table>
Создает таблицу.
Особенности верстки слоями
К сожалению, табличная верстка наложила довольно сильный отпечаток на манеру верстки веб-страниц. И теперь, когда верстка с помощью слоев прочно входит в моду и завоевывает множество поклонников, предыдущие стереотипы пытаются проявиться с новой силой. Так что рассказ об особенностях верстки слоями придется начинать не со слоев, а с таблиц и того багажа, что они с собой принесли.
Применение таблиц
Таблицы могут использоваться не только для добавления колонок или выравнивания элементов веб-страницы, но и для создания различных дизайнерских изысков вроде декоративной рамки или тени. Благодаря наличию множества параметров, как у самой таблицы, так и у ее ячеек, с помощью сочетания таблиц и рисунков можно формировать практически любые декоративные элементы. Причем их легко можно приспосабливать под любой макет, поскольку ширину таблицы можно устанавливать и в процентах и в пикселах.
Выравнивание элементов
За счет того, что содержимое ячеек таблицы можно одновременно выравнивать по горизонтали и вертикали, расширяются возможности по управлению положением элементов относительно друг друга. Таблицы позволяют задавать выравнивание изображений, текста, полей формы и других элементов относительно друг друга и веб-страницы в целом. Вообще, выравнивание в основном необходимо для установки зрительной связи между разными элементами, а также их группирования.
Макет из трех колонок
Использование трех колонок на страницах сайта обусловлено широтой информации, которую требуется показать посетителю. Обычно одна колонка, самая широкая, отдается под текст основного материала, статьи, например, а остальные колонки применяются для ссылок, рекламы, анонсов и т.д.
Принцип создания трехколонной модульной сетки с помощью таблицы аналогичен созданию двухколонной сетки, поэтому остановимся лишь на некоторых моментах.
Макет из двух колонок
Двухколонная модульная сетка достаточно часто применяется на сайтах, при этом, как правило, в одной колонке располагается основной материал (текст статьи, например), а во второй — ссылки на разделы сайта и другая информация. Для создания подобного макета таблицы достаточно удобны — каждая ячейка выступает в качестве отдельной колонки, что позволяет легко регулировать различные параметры отображения документа.
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.