CSS свойства таблицы и принципы табличной верстки

Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS

К оглавлению

Содержание:

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

Свойства таблицы

Рассмотрим основные CSS свойства таблицы

border

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

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

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

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

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

Значения:

collapse (слитая граница)
separate (вокруг каждой ячейки — своя собственная рамка)

Пример:

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

Результат:

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

Значения:

px
%

Пример:

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 (цвет текста)

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

Задание:
Открыть/создть файл style.css:

Добавить свойства для следующих тегов (если еще не добавлены):

body основная страница
p абзац
a гиперссылка
h1, h2, h3, … заголовки
ul, ol, li списки, пункты списков
table, tr, td таблица, строка, ячейка строки
hr линия
span, div строчный тег, блочный тег

Добавить комментарий с пояснением к каждому свойству:

Прикрепите стилевой файл к какой-либо готовой веб-странице

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

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

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

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

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

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

Обычно левая часть — меню и дополнительные элементы, а правая часть — основная, для главного контента.

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

В таком случае необходимо задать общую ширину всей таблицы (тега table) в процентах через свойство width (100%), а для первой ячейки (тега td) установить ширину (также свойство width) в пикселах или процентах.

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

Выполнение:

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

</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; /* Расстояние между колонками */
   }

Все вместе:

<style type="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; /* Расстояние между колонками */
   }
</style>

</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; /* Параметры правой пунктирной границы */
}

Все вместе:

<style type="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;
}
</style>

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

Результат:

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

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

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

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

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

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

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

Выполнение:

<style type="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;
}
</style>

</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%, независимо от ширины таблицы.

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

левая колонка — 20%;
средняя колонка — 40%;
правая колонка — 40%;

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

Выполнение:

<style type="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;
}
</style>

</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 пикселей;

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

Выполнение:

<style type="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;
}
</style>

</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 процентов, чтобы эта таблица занимала все свободное пространство во внешней таблице.
Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом.

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

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

Задать фон для колонок.

Выполнение:

<style type="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 здесь необходимы, для того, чтобы не было «зазора» между таблицами.
Результат:

К оглавлению

Свойства таблицы

border

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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