Расстояние между столбцами в таблице цсс. Отступы между ячейками
Всем привет! Итак, теперь вы умеете создавать элементарные таблицы, состоящие из такого количества строк и столбцов, которое необходимо. Неплохо, неплохо. А теперь давайте поговорим про оформление этих таблиц.
В прошлом уроке таблицы отображались без границ. И, согласитесь, выглядит так себе, даже и табличкой-то не назовёшь. Чтобы сделать границы таблицы в HTML, следует добавить к тегу
атрибут border
, придав ему значение отличное от нуля.
Итак, давайте сделаем границы для таблицы. Например, для уже имеющейся у нас:
Верхняя левая ячейка
Верхняя правая ячейка
Нижняя левая ячейка
Нижняя правая ячейка
Результат в браузере:
Как убрать границы таблицы
В свою очередь, чтобы убрать границы таблицы HTML, или ещё можно сказать, сделать их невидимыми, нужно атрибуту border
задать значение 0
. После этих нехитрых действий рамка уберётся.
Атрибут позволяет создать, но не управлять границами. Он позволяет лишь изменять их толщину.
Поэтому, сейчас речь пойдет о CSS
, свойства которого делают возможным с помощью border
создавать различные границы, как внутри каждой ячейки, так и внешние, вокруг таблицы в целом.
Давайте посмотрим как применять CSS для создания внешних и внутренних границ таблицы.
Для этого удалим у нашей таблицы атрибут border и добавим стили:
Пример таблицы
Верхняя левая ячейка
Верхняя правая ячейка
Нижняя левая ячейка
Нижняя правая ячейка
Результат в браузере:
Теперь давайте добавим границы и для каждой ячейки. Для этого просто дополним стили:
Результат в браузере:
Как убрать отступы между ячейками в таблице HTML
Согласитесь, что граница, заданная с помощью CSS, имеет не такой внешний вид, как хотелось бы. Бесспорно, с точки зрения эстетики, есть над чем работать. На странице браузера можно увидеть, что по умолчанию он отображает границы таблиц и ячеек раздельно. Пример это явно демонстрирует.
Однако, от таких вот границ, которые именуются двойными, вполне можно избавиться, если использовать CSS-свойство border-collapse. На практике это выглядит вот так:
Как результат - убирается расстояние между ячейками:
Значение collapse, приписанное атрибуту border, позволяет убрать двойные рамки. Как можно увидеть, результатом является "схлопывание" границ ячеек, расположенных рядом, а также рамок ячеек и внешней рамки таблицы. Что касается последней, то она может удалиться и вовсе. И если есть необходимость в ее отображении, необходимо увеличивать ее ширину. Таким образом мы избавились от разделителей в таблице. А в следующем уроке мы поговорим о том, как можно задавать вертикальные и горизонтальные границы. Всем удачи!
Спецификация CSS даёт неограниченные возможности для оформления таблиц. По умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом ячейки внутри таблицы не прилегают вплотную друг к другу.
Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и определяется высотой самой высокой ячейки.
Форматирование таблиц
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы
задаются свойством border:
Table {
border-collapse: collapse; /*убираем пустые промежутки между ячейками*/
border: 1px solid grey; /*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}
Границы ячеек заголовка
каждого столбца задаются для элемента th:
Th {border: 1px solid grey;}
Границы ячеек
тела таблицы задаются для элемента td:
Td {border: 1px solid grey;}
Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей таблицы можно следующим способом:
Th, td {border: 1px solid grey;}
Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:
Table {border: 3px solid grey;}
Границы можно задавать частично:
/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */
table {border-top: 3px solid grey; }
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {border-bottom: 1px solid grey;}
Подробнее о свойстве border вы можете прочитать .
2. Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы
определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов
задаётся с помощью свойства width . Если для таблицы задано table {width: 100%;} , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в px или % , например:
Высота таблицы
не задается. Высотой рядов
таблицы можно управлять, добавив верхний и нижний padding для элементов
и
. Фиксировать высоту с помощью свойства height не рекомендуется.
Th, td {padding: 10px 15px;}
3. Как задать фон таблицы
По умолчанию фон таблицы
и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать:
заливка , , .
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега
. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:
с
помощью тега
Можно задать фон для любого количества столбцов;
с
помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с
помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.
Подробнее про CSS-селекторы вы сможете прочитать .
5. Как добавить таблице заголовок
Добавить заголовок в таблицу можно с помощью тега
, а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align . Наследуется.
Таблица № 1
Company
Q1
Q2
Q3
Q4
...
caption {
caption-side: bottom;
text-align: right;
padding: 10px 0;
font-size: 14px;
}
Рис. 2. Пример отображения заголовка под таблицей
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся. Свойство наследуется.
Синтаксис
Table {border-collapse: collapse;}
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
7. Как увеличить промежуток между рамками ячеек
С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом. Наследуется.
Синтаксис
Table {border-collapse: separate; border-spacing: 10px 20px;}
table {border-collapse: separate; border-spacing: 10px;}
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
8. Как скрыть пустые ячейки таблицы
Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table {border-collapse: collapse;} , то ячейка не будет скрыта. Наследуется.
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.
Синтаксис
Table {table-layout: fixed;}
10. Лучшие макеты таблиц
1. Горизонтальный минимализм
Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для решения этой проблемы можно добавить однопиксельную границу под всеми элементами td .
Td {
border-bottom: 1px solid #ccc;
color: #669;
padding: 9px 8px;
transition: .3s linear;
}/*остальной код - как в примере выше*/
Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.
Несмотря на то, что подобные таблицы используются редко, тем не менее, вертикально ориентированные таблицы полезны для категоризации или сравнения описания объектов, представленных колонкой. Можно оформить их в минималистском стиле, добавив пробел, разделяющий столбцы.
Наиболее надежным стилем для оформления таблиц всех типов, является так называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между строками, установив границы в качестве разделителя.
Самое сложное — найти ту цветовую гамму, которая будет гармонично сочетаться с вашим сайтом. Если сайт нагружен по графике и дизайну, то вам будет довольно трудно использовать этот стиль.
Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.
Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.
Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.
Задает расстояние между границами ячеек в таблице. Атрибут border-spacing
не работает в случае, когда для таблицы установлен параметр border-collapse
со значением collapse
.
Синтаксис
border-spacing: значение [значение]
Аргументы
Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если аргументов два, то первое определяет горизонтальное расстояние, а второе - вертикальное.
border-spacing
1
2
3
4
Результат данного примера показан ни рис. 1.
Рис. 1. Применение параметра border-spacing
Примечание
Если к тегу
добавлен параметр cellspacing
, то при использовании стилевого атрибута border-spacing
он не принимается во внимание и значение cellspacing
игнорируется. Исключением из этого правила является браузер Internet Explorer, который вообще не понимает свойство border-spacing
.
Таблицы
border-collapse устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.
table-layout определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
border-spacing задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.
Мы уже выяснили с вами, что у HTML-таблиц есть рамки
, хотя по умолчанию их браузеры и не показывают. Но это еще не все, у каждой ячейки таблицы тоже есть рамка, которая называется граница ячейки
. Но и это еще не все, используя специальные атрибуты тега
можно изменять расстояния между ячейками и от ячеек до рамки таблицы, а также внутренние отступы от границ ячеек до их содержимого.
Рамка HTML-таблицы, границы ячеек, расстояния между ними и внутренние отступы.
Итак, для создания рамки
HTML-таблицы и границ ее ячеек
используется всего один атрибут тега
- border
. Значением атрибута являются целые неотрицательные числа (ноль по умолчанию), которые означают размер в пикселях. Но, внимание, размер изменяется только у рамки таблицы, у границ ячеек он всегда неизменен.
...
Для изменения расстояния между ячейками
(их границами) и от ячеек до рамки
таблицы в теге
применяется атрибут cellspacing
. Его значениями тоже могут быть только числа, отмеряющие расстояния в пикселях.
...
Чтобы установить внутренние отступы от границ ячеек до их содержимого
необходимо в теге
использовать атрибут cellpadding
. И его значения это числа, означающие пиксельные размеры.
...
Обратите внимание, что браузеры по умолчанию устанавливают небольшие (в два пикселя) значения cellspacing
и cellpadding
, поэтому чтобы убрать расстояния вовсе - установите у атрибутов значения ноль (0).
Пример границ, рамок и отступов HTML-таблиц
Границы, рамки и отступы таблиц
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3
Таблица только с установленными рамкой и границами ячеек:
Ячейка 1.1
Ячейка 1.2
Ячейка 1.3
Ячейка 2.1
Ячейка 2.2
Ячейка 2.3
Ячейка 3.1
Ячейка 3.2
Ячейка 3.3
Результат в браузере
Таблица с измененными отступами и расстояниями:
Естественно не обязательно рисовать у таблицы рамку и границы ячеек, чтобы изменять внутренние отступы и расстояния между ячейками.
Согласно синтаксиса HTML, браузеры прибавляют значения cellspacing
и cellpadding
к размерам таблицы и ее ячеек. Например, если вы установите ширину ячейки в 100 пикселей и cellpadding=
"10"
- браузеры прибавят к ширине 20 пикселей (по 10 слева и справа) и она станет равна 120 пикселей. В общем, по ходу дела разберетесь.
Отступление от темы или как убрать отступы по краям страницы
Изначально все браузеры устанавливают небольшие отступы по краям HTML-страницы, которые часто бывают не нужны, поэтому сейчас вы научитесь их убирать. Вообще, эту информацию следовало бы поместить в начало учебника, но там бы она вряд ли вам пригодилась.
В свое время у тега
существовало четыре атрибута, которые устанавливали размер этих отступов для каждой стороны страницы: topmargin
(сверху), rightmargin
(справа), bottommargin
(снизу) и leftmargin
(слева). Сейчас эти атрибуты устарели, поэтому будем применять стили (CSS). Итак, изменить расстояния отступов по краям страницы можно несколькими способами, я покажу вам два, а о третьем узнаете, если решите изучать CSS.
Способ первый. B теге
указать атрибут style
со следующими значениями:
style=
"margin:0"
>...
- убирает отступы сразу со всех сторон HTML-страницы.
style=
"margin:сверху справа снизу слева"
>...
- регулирует размер отступов для каждой стороны по часовой стрелке. Как правило используются размеры в пикселях, например: style=
"margin:5px 3px 4px 5px"
>...
Второй и более удобный способ. В теге
Домашнее задание.
В этом уроке я тоже не буду все подробно описывать - только общие моменты. Для полноты картины посмотрите результат примера.
Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй - левое и правое меню, а также основное содержимое (контент), в третьей - Footer или «подвал» страницы.
Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
Важно. Используйте тег
только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где - увеличить.
Цель урока:
Знакомство со свойствами таблицы и с принципами табличной верстки CSS
Рассмотрим основные CSS свойства таблицы
border
Свойство рассматривается в одном и включает одновременно несколько свойств:
Благодаря большому числу свойств таблиц и вариациям их оформления, таблицы долгое время были некоторым станартом верстки веб-страниц. Если сделать границы таблицы невидимыми, то можно использовать ее отдельные ячейки в качестве отдельных блоков сраницы: шапка, меню, подвал и т.п.
Но это не совсем правильно, ведь каждому тегу есть свое назначение, и таблицы не должны были служить для верстки страниц. Однако отсутствие альтернативы сподвигало дизайнеров именно на такой метод верстки.
Сейчас есть другой способ — использование слоев, которые постепенно заменили таблицы в этом виде работы с веб-страницей. Однако и в наше время некоторые дизайнеры успешно используют табличную верстку.
Табличная верстка из двух колонок
Один из самых распространённых способов верстки — две колонки, т.е. страница делится на две части.
Обычно левая часть — меню и дополнительные элементы, а правая часть — основная, для главного контента.
В таком случае ширина левой части задается определенным значением, т.е. жестко, а правая часть занимает оставшуюся область страницы.
В таком случае необходимо задать общую ширину всей таблицы (тега table) в процентах через свойство width (100%), а для первой ячейки (тега td) установить ширину (также свойство width) в пикселах или процентах.
Пример:
задать основной каркас страницы из двух колонок: первая — с фиксированным размером, вторая — на оставшуюся область браузера. Выполнить задание используя 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
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%;
Задать фон для колонок.
Выполнение:
1
2
3
Атрибуты тегов cellpadding и cellspacing здесь необходимы, для того, чтобы не было «зазора» между таблицами. Результат:
Рис. 2. Пример отображения заголовка под таблицей
Рис. 3. Пример таблиц со сливающимися и раздельными рамками ячеек
Рис. 4. Пример таблиц с увеличенными промежутками между рамками ячеек
Рис. 5. Пример скрытия пустой ячейки таблицы
Загрузка...