Уроки css для таблицы

CSS урок 11. Свойства таблицы и табличная верстка

Свойство рассматривается в одном из предыдущих уроков и включает одновременно несколько свойств:

• BORDER-STYLE (СТИЛЬ ГРАНИЦЫ)
• BORDER-WIDTH (ШИРИНА ГРАНИЦЫ)
• BORDER-COLOR (ЦВЕТ ГРАНИЦЫ)

Существует также сборное правило:

border:border-width border-style border-color; border: 1px solid #000;

border:border-width border-style border-color; border: 1px solid #000;

border-collapse
(слияние границы)

table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; }

width и height
(высота и ширина таблицы)

table{ width:100%; height:100px; }

text-align
(выравнивание по горизонтали)

• center (по центру)
• left (по левому краю)
• right (по правому краю)
• justify (по ширине)

vertical-align
(выравнивание по вертикали)

• baseline (по базовой линии)
• sub (как подиндекс)
• super (как надиндекс)
• top (по верхнему краю)
• middle (посередине)
• bottom (по нижнему краю)
• % (от высоты межстрочного интервала)

table{ text-align:right; height:100px; vertical-align:middle; }

padding
(внутренние отступы в таблице)

Данное свойство полностью соответствует правилам данного свойства для всех элементов. Поэтому рассмотреть его можно в одном из предыдущих уроков.

background-color (задний фон)
color (цвет текста)

Данные свойства соответствуют правилом их определения для всех остальных элементов. Поэтому темы можно рассмотреть из предыдущих уроков: задний фон и цвет.

1. Добавить свойства для следующих тегов (если еще не добавлены):
   • body основная страница
   • p абзац
   • a гиперссылка
   • h1 , h2 , h3 , … заголовки
   • ul , ol , li списки, пункты списков
   • table , tr , td таблица, строка, ячейка строки
   • hr линия
   • span , div строчный тег, блочный тег
2. Добавить комментарий с пояснением к каждому свойству:

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

Благодаря большому числу свойств таблиц и вариациям их оформления, таблицы долгое время были некоторым станартом верстки веб-страниц. Если сделать границы таблицы невидимыми, то можно использовать ее отдельные ячейки в качестве отдельных блоков сраницы: шапка, меню, подвал и т.п.

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

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

Табличная верстка из двух колонок

Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части.

Пример: задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили (метод вложения)

="text/css"> /* для таблицы */ table#maket{ width:100%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:200px; } /* для всех ячеек */ #maket td{ vertical-align:top; border:1px solid black; /* временно обозначим границы */ } >

/head> body> table id="maket" cellspacing="0"> tr> td id="left">1/td> td id="right">2/td> /tr> /table> .

Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель)

Выполнение:
Добавим новые свойства стилей:

/* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; /* Цвет фона правой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ }

="text/css"> /* для таблицы */ table#maket{ width:100%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; /* Цвет фона правой колонки */ border:1px solid black; /* временно обозначим границы */ } /* для всех ячеек */ #maket td{ vertical-align:top; } /* для разделителя */ #razdel{ width: 10px; /* Расстояние между колонками */ } >

/head> body> table id="maket" cellspacing="0"> tr> td id="left">1/td> td id="razdel">/td> td id="right">2/td> /tr> /table>

Для разделителя была добавлена новая ячейка.
Результат:

Пример: сделать разделитель между колонками таблицы, используя пунктирную линию границы смежных ячеек

Выполнение:
Добавим новые свойства границ для ячеек:

/* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ }

="text/css"> /* для таблицы */ table#maket{ width:100%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ } /* для правой ячейки */ td#right{ background: #fc3; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } >

/head> body> table id="maket" cellspacing="0"> tr> td id="left">1/td> td id="right">2/td> /tr> /table>

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

Существует понятие фиксированного или «резинового» макета верстки.

Фиксированный макет CSS

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

Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:

• левая колонка — 150 пикселей;
• средняя колонка — 400 пикселей;
• правая колонка — 200 пикселей;

Задать фон для колонок и визуально разделить колонки границей.

="text/css"> /* для таблицы */ table#maket{ width:750px; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:150px; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для центральной ячейки */ td#central{ width:400px; background: #fc3; /* Цвет фона колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для правой ячейки */ td#right{ width:200px; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } >

/head> body> table id="maket" cellspacing="0"> tr> td id="left">1/td> td id="central">2/td> td id="right">3/td> /tr> /table>

Резиновый макет

• Ширина таблицы при использовании «резинового» дизайна устанавливается в % от ширины окна браузера. Т.о. при изменении окна браузера, изменяются и размеры таблицы.
• Ширина всех ячеек может устанавливаться в процентах.
• Второй вариант, когда ширина некоторых ячеек устанавливается в процентах, а некоторых — в пикселях.

Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:

Задать фон для колонок и визуально разделить колонки границей.

="text/css"> /* для таблицы */ table#maket{ width:90%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:20%; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для центральной ячейки */ td#central{ width:40%; background: #fc3; /* Цвет фона колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для правой ячейки */ td#right{ width:40%; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } >

/head> body> table id="maket" cellspacing="0"> tr> td id="left">1/td> td id="central">2/td> td id="right">3/td> /tr> /table>

Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок:

Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:

• левая колонка — 150 пикселей;
• средняя колонка — 40%;
• правая колонка — 200 пикселей;

Задать фон для колонок и визуально разделить колонки границей.

="text/css"> /* для таблицы */ table#maket{ width:90%; padding:5px; /* внутренние отступы */ border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:150px; background: #ccc; /* Цвет фона левой колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для центральной ячейки */ td#central{ background: #fc3; /* Цвет фона колонки */ border-right: 1px dashed #000; /* граница между колонками */ } /* для правой ячейки */ td#right{ width:200px; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ #maket td{ vertical-align:top; } >

/head> body> table id="maket" cellspacing="0"> tr> td id="left">1/td> td id="central">2/td> td id="right">3/td> /tr> /table>

Результат:
Результат будет примерно такой же, только «растягивание» будет происходит за счет центральной колонки.

Использование вложенной таблицы в резиновом макете

Если ширина двух колонок устанавливается в процентах, а третьей — в пикселях, обойтись одной таблицей не получится. Так, если ширина всей таблицы равна 100 процентов, первой колонки — 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах.

• Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах.
• Для левой ячейки (первой колонки) устанавливается ширина в пикселях.
• Ширина правой ячейки (основа для других колонок) не указывается. Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек.
• У ячеек вложенной таблицы ширина устанавливается в процентах.
• Ширина внутренней таблицы должна быть установлена в 100 процентов, чтобы эта таблица занимала все свободное пространство во внешней таблице.
• Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом.

Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей:

="text/css"> /* для таблицы */ table{ width:100%; border-collapse:collapse; /* убираем двойную границу */ } /* для левой ячейки */ td#left{ width:150px; background: #ccc; /* Цвет фона левой колонки */ } /* для центральной ячейки */ td#central{ width:60%; background: #fc3; /* Цвет фона колонки */ } /* для правой ячейки */ td#right{ width:40%; background: #ccc; /* Цвет фона правой колонки */ } /* для всех ячеек */ td{ vertical-align:top; } #left,#central,#right{ padding:5px; /* внутренние отступы */ }

/style> /head> body> table cellpadding="0" cellspacing="0"> tr> td id="left">1/td> td> table cellpadding="0" cellspacing="0"> td id="central">2/td> td id="right">3/td> /table> /td> /tr> /table>

Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами.
Результат:

Источник