Стили браузера по умолчанию отображают таблицу и ее ячейки без видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу. С помощью CSS-стилей можно красиво оформить таблицу в соответствии с ее содержимым.
Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы
Разметка HTML
Стили CSS
table {
border-spacing: 0 10px;
font-family: "Open Sans", sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid;
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
}
Используя такой прием, можно эффектно оформить таблицу при помощи контрастных цветов, которые гармонично впишутся в цветовую гамму вашего сайта.
Разметка HTML
Company | Q1 | Q2 | Q3 | Q4 |
---|---|---|---|---|
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Стили CSS
table {
font-size: 14px;
border-collapse: collapse;
text-align: center;
}
th, td:first-child {
background: #AFCDE7;
color: white;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
td {
background: #D8E6F3;
}
text-align: left;
}
Благодаря добавлению в спецификацию CSS3 свойства border-radius , появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.
Разметка HTML
— аналогично с примером 2.
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
}
th:last-child {
border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}
4. Таблица с раздельными ячейками
Разметка HTML
— аналогично с примером 2.
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: left;
border-collapse: separate;
border-spacing: 5px;
background: #ECE9E0;
color: #656665;
border: 16px solid #ECE9E0;
border-radius: 20px;
}
th {
font-size: 18px;
padding: 10px;
}
td {
background: #F5D7BF;
padding: 10px;
}
Разметка HTML
My working weeks, March 2015 | ||||
---|---|---|---|---|
Monday | Tuesday | Wednesday | Thursday | Friday |
2 | 3 | 4 | 5 | 6 |
9 | 10 | 11 | 12 | 13 |
16 | 17 | 18 | 19 | 20 |
23 | 24 | 25 | 26 | 27 |
30 | 31 |
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
text-align: center;
border-collapse: collapse;
border-spacing: 5px;
background: #E1E3E0;
border-radius: 20px;
}
th {
font-size: 22px;
font-weight: 300;
padding: 12px 10px;
color: #F56433;
}
tbody tr:nth-child(2) {
border-bottom: 2px solid #F56433;
}
td {
padding: 10px;
color: #8D8173;
}
Разметка HTML
Employee | Salary | Bonus | Supervisor |
---|---|---|---|
Stephen C. Cox | $300 | $50 | Bob |
Josephin Tan | $150 | — | Annie |
Joyce Ming | $200 | $35 | Andy |
James A. Pentel | $175 | $25 | Annie |
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
text-align: left;
border-collapse: collapse;
border-radius: 20px;
box-shadow: 0 0 0 10px #F2906B;
color: #452F21;
}
th {
padding: 10px 8px;
background: white;
}
table th:first-child {
border-top-left-radius: 20px;
}
table th:last-child {
border-top-right-radius: 20px;
}
td {
border-top: 10px solid #F2906B;
padding: 8px;
background: white;
}
table td:first-child {
border-bottom-left-radius: 20px;
}
table td:last-child {
border-bottom-right-radius: 20px;
}
Вертикальная зебра в оформлении таблицы позволит сделать акцент на столбцы, а эффект при наведении на строку добавит привлекательности такой таблице.
Разметка HTML
Q1 | Q2 | Q3 | Q4 | |
---|---|---|---|---|
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Стили CSS
table {
border-spacing: 0;
empty-cells: hide;
}
td {
padding: 10px 20px;
text-align: center;
transition: all 0.5s linear;
}
td:first-child {
text-align: left;
color: #3D3511;
font-weight: bold;
}
th {
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) {
background: #F6D27E;
}
td:nth-child(odd) {
background: #D1C7BF;
}
th:nth-child(even) {
background: #F6D27E;
}
th:nth-child(odd) {
background: #D1C7BF;
}
.round-top {
border-top-left-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 5px;
}
tr:hover td{
background: #D1C7BF;
font-weight: bold;
}
Разметка HTML
Стили CSS
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
border-collapse: collapse;
color: #686461;
}
caption {
padding: 10px;
color: white;
background: #8FD4C1;
font-size: 18px;
text-align: left;
font-weight: bold;
}
th {
border-bottom: 3px solid #B9B29F;
padding: 10px;
text-align: left;
}
td {
padding: 10px;
}
tr:nth-child(odd) {
background: white;
}
tr:nth-child(even) {
background: #E8E6D1;
}
Разметка HTML
Comedy | Adventure | Action | Children |
---|---|---|---|
Scary Movie | Indiana Jones | The Punisher | Wall-E |
Epic Movie | Star Wars | Bad Boys | Madagascar |
Spartan | LOTR | Die Hard | Finding Nemo |
Dr. Dolittle | The Mummy | 300 | A Bug"s Life |
Стили CSS
Table_col {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
width: 660px;
background: white;
text-align: left;
border-collapse: collapse;
color: #3E4347;
}
.table_col th:first-child, .table_col td:first-child {
color: #F5F6F6;
border-left: none;
}
.table_col th {
font-weight: normal;
border-bottom: 2px solid #F5E1A6;
padding: 8px 10px;
}
.table_col td {
border-right: 20px solid white;
border-left: 20px solid white;
padding: 12px 10px;
color: #8b8e91;
}
Разметка HTML
Company | Q1 | Q2 | Q3 | Q4 |
---|---|---|---|---|
Microsoft | 20.3 | 30.5 | 23.5 | 40.3 |
50.2 | 40.63 | 45.23 | 39.3 | |
Apple | 25.4 | 30.2 | 33.3 | 36.7 |
IBM | 20.4 | 15.6 | 22.3 | 29.3 |
Стили CSS
Table_blur {
background: #f5ffff;
border-collapse: collapse;
text-align: left;
}
.table_blur th {
border-top: 1px solid #777777;
box-shadow: inset 0 1px 0 #999999, inset 0 -1px 0 #999999;
background: linear-gradient(#9595b6, #5a567f);
color: white;
padding: 10px 15px;
position: relative;
}
.table_blur th:after {
content: "";
display: block;
position: absolute;
left: 0;
top: 25%;
height: 25%;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0), rgba(255,255,255,.08));
}
.table_blur tr:nth-child(odd) {
background: #ebf3f9;
}
.table_blur th:first-child {
border-left: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset 1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur th:last-child {
border-right: 1px solid #777777;
border-bottom: 1px solid #777777;
box-shadow: inset -1px 1px 0 #999999, inset 0 -1px 0 #999999;
}
.table_blur td {
border: 1px solid #e3eef7;
padding: 10px 15px;
position: relative;
transition: all 0.5s ease;
}
.table_blur tbody:hover td {
color: transparent;
text-shadow: 0 0 3px #a09f9d;
}
.table_blur tbody:hover tr:hover td {
color: #444444;
text-shadow: none;
}
Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Добавляя к таблицам всю мощь стилей можно весьма удачно вписать таблицы в дизайн сайта, наглядно и красиво представить табличные данные.
Ширина таблицы
По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.
Пример 1. Ширина таблицы в процентах
Table { width: 100%; } .tbl-medium { width: 60%; } .tbl-small { width: 200px; }
В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу
В данном примере для всех таблиц на странице задано выравнивание по центру.
Цвет фона
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору table . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th , то он и будет установлен в качестве фона (пример 3).
Пример 3. Цвет фона
Вид соединения | ||
---|---|---|
Вал | Втулка | |
Свободное | H9 | D10 |
Нормальное | N9 | Is9 |
Плотное | P9 |
Результат данного примера показан на рис. 1.
Рис. 1. Изменение цвета фона
Если нам требуется сделать зебру - так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child , добавляя его к селектору tr . Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов и
(пример 4).Пример 4. Создание зебры
Интервалы размеров, мм | Допуск IT, мкм, для квалитетов | |||
---|---|---|---|---|
5 | 6 | 7 | 8 | |
До 3 | 4 | 6 | 10 | 14 |
Св. 3 до 6 | 5 | 8 | 12 | 18 |
Св. 6 до 10 | 6 | 9 | 15 | 22 |
Св. 10 до 18 | 8 | 11 | 18 | 27 |
Св. 18 до 30 | 9 | 13 | 21 | 33 |
Св. 30 до 50 | 11 | 16 | 25 | 39 |
Св. 50 до 80 | 13 | 19 | 30 | 46 |
Результат данного примера показан на рис. 2.
Рис. 2. Зебра
Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd , тогда серым цветом будут выделяться нечётные строки.
Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even) .
Поля внутри ячеек
Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding , которое работает с селектором td или th , как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).
Расстояние между ячеек
Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing , добавляя его к селектору table (пример 5).
Пример 5. Использование border-spacing
Table { border-spacing: 3px; /* Расстояние между ячеек */ } thead th { background: #e08156; /* Цвет фона заголовка */ color: #333; /* Цвет текста */ } td, th { padding: 5px; /* Поля в ячейках */ background: #4c715b; /* Цвет фона ячеек */ color: #f5e8d0; /* Цвет текста */ }
Добавляя этот стиль к любой таблице получим результат продемонстрированный на рис. 3.
Рис. 3. Вид таблицы с расстоянием между ячеек
Если к table добавляется свойство border-collapse со значением collapse , то border-spacing игнорируется, потому как расстояния между ячеек уже нет.
Границы и рамки
Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border , которое применяется к элементам (
Пример 6. Применение свойства border-collapse при создании рамок таблицы
O | X | X |
O | O | X |
X | X | O |
Разница между границами таблицы при добавлении свойства border-collapse , а также без него, представлена на рис. 4.
Рис. 4. Вид таблицы при использовании border-collapse
На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).
Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom , border-left и другие подобные. Применять границы к элементам
Пример 7. Линии между строк
Вид соединения | Поля допусков ширины шпоночного паза | |
---|---|---|
Вал | Втулка | |
Свободное | H9 | D10 |
Нормальное | N9 | Is9 |
Плотное | P9 |
Результат данного примера показан на рис. 5.
Рис. 5. Таблица с горизонтальными линиями
По умолчанию текст в ячейке таблицы выравнивается по левому краю и по центру высоты. Исключением служит элемент
Пример 8. Выравнивание содержимого ячеек по горизонтали
Заголовок 1 | Ячейка 1 | Ячейка 2 |
---|---|---|
Заголовок 2 | Ячейка 3 | Ячейка 4 |
В данном примере содержимое
Рис. 6. Выравнивание текста в ячейках
Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align со значением top , как показано в примере 9.
Пример 9. Выравнивание содержимого ячеек по вертикали
Вид соединения | Поля допусков ширины шпоночного паза | |
---|---|---|
Вал | Втулка | |
Свободное | H9 | D10 |
Нормальное | N9 | Is9 |
Плотное | P9 |
В данном примере выравнивание текста происходит по верхнему краю. Результат примера показан на рис. 7.
Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS
Рассмотрим основные CSS свойства таблицы
border
Свойство рассматривается в одном и включает одновременно несколько свойств:
- BORDER-STYLE (СТИЛЬ ГРАНИЦЫ)
- BORDER-WIDTH (ШИРИНА ГРАНИЦЫ)
- BORDER-COLOR (ЦВЕТ ГРАНИЦЫ)
Существует также сборное правило:
table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; }
Результат:
width и height
(высота и ширина таблицы)
Значения:
Пример:
text-align
(выравнивание по горизонтали)
Значения:
- center (по центру)
- left (по левому краю)
- right (по правому краю)
- justify (по ширине)
vertical-align
(выравнивание по вертикали)
Значения:
- baseline (по базовой линии)
- sub (как подиндекс)
- super (как надиндекс)
- top (по верхнему краю)
- middle (посередине)
- bottom (по нижнему краю)
- % (от высоты межстрочного интервала)
Пример:
padding
(внутренние отступы в таблице)
background-color (задний фон)
color (цвет текста)
Табличная верстка CSS
Благодаря большому числу свойств таблиц и вариациям их оформления, таблицы долгое время были некоторым станартом верстки веб-страниц. Если сделать границы таблицы невидимыми, то можно использовать ее отдельные ячейки в качестве отдельных блоков сраницы: шапка, меню, подвал и т.п.
Но это не совсем правильно, ведь каждому тегу есть свое назначение, и таблицы не должны были служить для верстки страниц. Однако отсутствие альтернативы сподвигало дизайнеров именно на такой метод верстки.
Сейчас есть другой способ — использование слоев, которые постепенно заменили таблицы в этом виде работы с веб-страницей. Однако и в наше время некоторые дизайнеры успешно используют табличную верстку.
Табличная верстка из двух колонок
Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части.
Пример: задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя CSS стили ()
Выполнение:
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > ... |
1 | 2 |
Результат:
Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель)
Выполнение:
Добавим новые свойства стилей:
/* для левой ячейки */ td#left{ width:200px; background: #ccc; border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #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 > |
1 | 2 |
Для разделителя была добавлена новая ячейка.
Результат:
Пример: сделать разделитель между колонками таблицы, используя пунктирную линию границы смежных ячеек
Выполнение:
Добавим новые свойства границ для ячеек:
/* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ }
Все вместе:
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > |
1 | 2 |
Результат:
Табличная верстка из трех колонок
Существует понятие фиксированного или «резинового» макета верстки.
Фиксированный макет CSS
- При использовании фиксированного макета ширина всей таблицы задается в пикселях , и тогда, независимо от разрешения монитора и окна браузера, таблица будет всегда иметь одинаковую ширину.
- В таком случае ширину остальных колонок стоит также сделать фиксированной .
- Можно не указать ширину одной ячейки, тогда она будет вычислена автоматически, исходя из размеров остальных ячеек и всей таблицы.
Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:
- левая колонка — 150 пикселей;
- средняя колонка — 400 пикселей;
Выполнение:
</ 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 > |
1 | 2 | 3 |
Результат:
Резиновый макет
- Ширина таблицы при использовании «резинового» дизайна устанавливается в % от ширины окна браузера . Т.о. при изменении окна браузера, изменяются и размеры таблицы.
- Ширина всех ячеек может устанавливаться в процентах .
- Второй вариант, когда ширина некоторых ячеек устанавливается в процентах , а некоторых — в пикселях .
Важно: Сумма ширины всех колонок должна получиться 100%, независимо от ширины таблицы.
Пример:
- левая колонка — 20%;
- средняя колонка — 40%;
- правая колонка — 40%;
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
</ 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 > |
1 | 2 | 3 |
Результат:
Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок:
Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:
- левая колонка — 150 пикселей;
- средняя колонка — 40%;
- правая колонка — 200 пикселей;
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
</ 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 > |
1 | 2 | 3 |
Результат:
Результат будет примерно такой же, только «растягивание» будет происходит за счет центральной колонки.
Использование вложенной таблицы в резиновом макете
Если ширина двух колонок устанавливается в процентах, а третьей - в пикселях, обойтись одной таблицей не получится
. Так, если ширина всей таблицы равна 100 процентов, первой колонки - 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах.
- Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах .
- Для левой ячейки (первой колонки) устанавливается ширина в пикселях .
- Ширина правой ячейки (основа для других колонок) не указывается . Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек.
- У ячеек вложенной таблицы ширина устанавливается в процентах .
- Ширина внутренней таблицы должна быть установлена в 100 процентов , чтобы эта таблица занимала все свободное пространство во внешней таблице.
- Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом.
Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей:
- левая колонка — 150 пикселей;
- средняя колонка — 60%;
- правая колонка — 40%;
Задать фон для колонок.
Выполнение:
Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. Цель урока: Знакомство со свойствами таблицы и с принципами табличной верстки CSS Рассмотрим основные CSS свойства таблицы borderСвойство рассматривается в одном и включает одновременно несколько свойств:
Существует также сборное правило: table.collapse{ border-collapse:collapse; } table.separate{ border-collapse:separate; } Результат: width и height
|
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > ... |
1 | 2 |
Результат:
Пример: задать разный фон ячеек (чтобы разделить две колонки друг от друга) и установить расстояние между колонками (разделитель)
Выполнение:
Добавим новые свойства стилей:
/* для левой ячейки */ td#left{ width:200px; background: #ccc; border:1px solid black; /* временно обозначим границы */ } /* для правой ячейки */ td#right{ background: #fc3; border:1px solid black; /* временно обозначим границы */ } /* для разделителя */ #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 > |
1 | 2 |
Для разделителя была добавлена новая ячейка.
Результат:
Пример: сделать разделитель между колонками таблицы, используя пунктирную линию границы смежных ячеек
Выполнение:
Добавим новые свойства границ для ячеек:
/* для левой ячейки */ td#left{ width:200px; background: #ccc; /* Цвет фона левой колонки */ /* новое */ border-right: 1px dashed #000; /* Параметры правой пунктирной границы */ }
Все вместе:
</ head > <body > <table id = "maket" cellspacing = "0" > <tr > <td id = "left" > 1</ td > <td id = "right" > 2</ td > </ tr > </ table > |
1 | 2 |
Результат:
Табличная верстка из трех колонок
Существует понятие фиксированного или «резинового» макета верстки.
Фиксированный макет CSS
- При использовании фиксированного макета ширина всей таблицы задается в пикселях , и тогда, независимо от разрешения монитора и окна браузера, таблица будет всегда иметь одинаковую ширину.
- В таком случае ширину остальных колонок стоит также сделать фиксированной .
- Можно не указать ширину одной ячейки, тогда она будет вычислена автоматически, исходя из размеров остальных ячеек и всей таблицы.
Пример: создать шаблон страницы из трех колонок. Использовать фиксированный макет табличной верстки:
- левая колонка — 150 пикселей;
- средняя колонка — 400 пикселей;
Выполнение:
</ 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 > |
1 | 2 | 3 |
Результат:
Резиновый макет
- Ширина таблицы при использовании «резинового» дизайна устанавливается в % от ширины окна браузера . Т.о. при изменении окна браузера, изменяются и размеры таблицы.
- Ширина всех ячеек может устанавливаться в процентах .
- Второй вариант, когда ширина некоторых ячеек устанавливается в процентах , а некоторых — в пикселях .
Важно: Сумма ширины всех колонок должна получиться 100%, независимо от ширины таблицы.
Пример:
- левая колонка — 20%;
- средняя колонка — 40%;
- правая колонка — 40%;
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
</ 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 > |
1 | 2 | 3 |
Результат:
Рассмотрим второй вариант, когда ширина центральной колонки автоматически подбирается браузером; примером может служить рисунок:
Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет табличной верстки:
- левая колонка — 150 пикселей;
- средняя колонка — 40%;
- правая колонка — 200 пикселей;
Задать фон для колонок и визуально разделить колонки границей.
Выполнение:
</ 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 > |
1 | 2 | 3 |
Результат:
Результат будет примерно такой же, только «растягивание» будет происходит за счет центральной колонки.
Использование вложенной таблицы в резиновом макете
Если ширина двух колонок устанавливается в процентах, а третьей - в пикселях, обойтись одной таблицей не получится
. Так, если ширина всей таблицы равна 100 процентов, первой колонки - 200 пикселей, а оставшихся колонок по 20 процентов, то простое вычисление показывает, что размер первой колонки получается равным 60 процентов. В таком случае заданное значение в пикселях браузером не воспримется, а размер будет установлен в процентах.
- Исходная таблица создается с двумя ячейками. Ширина таблицы задается в процентах .
- Для левой ячейки (первой колонки) устанавливается ширина в пикселях .
- Ширина правой ячейки (основа для других колонок) не указывается . Внутрь этой ячейки вставляется вторая таблица, тоже состоящая из двух ячеек.
- У ячеек вложенной таблицы ширина устанавливается в процентах .
- Ширина внутренней таблицы должна быть установлена в 100 процентов , чтобы эта таблица занимала все свободное пространство во внешней таблице.
- Ширина центральной и правой колонки вычисляется относительно ширины ячейки, а не внешней таблицы в целом.
Пример: создать шаблон страницы из трех колонок. Использовать резиновый макет с вложенной таблицей:
- левая колонка — 150 пикселей;
- средняя колонка — 60%;
- правая колонка — 40%;
Задать фон для колонок.
Выполнение:
Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. В этой статье вы увидите, как при помощи стилей CSS отформатировать таблицы. На заре интернета дизайнера очень часто использовали таблицы для создания разметки. Сейчас практически все сайты размечаются при помощи CSS, а таблицы используют по их прямому назначению – для отображения данных. Теги для компоновки таблицТаблицу можно сделать при помощи следующих тегов:
|