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

Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки 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;
}

Результат:

свойство collapse

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:

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

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

Табличная верстка 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>
    ...

    Результат:

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

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

    /* для левой ячейки */
    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>

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

    табличная верстка css
  • Разделитель между колонками можно также сделать менее выделяющимся. Для этого воспользуемся стилями границ.
  • Пример: сделать разделитель между колонками таблицы, используя пунктирную линию границы смежных ячеек

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

    /* для левой ячейки */
    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 в две колонки

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

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

    Фиксированный макет 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>

    Результат:

    фиксированный макет css табличной верстки

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

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

    Важно: Сумма ширины всех колонок должна получиться 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>

    Результат:

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

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

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

    • левая колонка — 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>

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

    резиновый дизайн css

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

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

    • Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах.
    • Для левой ячейки (первой колонки) устанавливается ширина в пикселях.
    • Ширина правой ячейки (основа для других колонок) не указывается. Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек.
    • У ячеек вложенной таблицы ширина устанавливается в процентах.
    • Ширина внутренней таблицы должна быть установлена в 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 здесь необходимы, для того, чтобы не было «зазора» между таблицами.
    Результат:

    вестка css с вложенной таблицей
    Поделитесь уроком с коллегами и друзьями:

    Добавить комментарий

    Ваш e-mail не будет опубликован. Обязательные поля помечены *

    *
    *

    Вставить формулу как
    Блок
    Строка
    Дополнительные настройки
    Цвет формулы
    Цвет текста
    #333333
    Используйте LaTeX для набора формулы
    Предпросмотр
    \({}\)
    Формула не набрана
    Вставить