В закладки
КонтактыО сайте

Отступ между ячейками css. Выравнивание содержимого ячеек

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

Для того, чтобы сделать отступы в ячейке следует использовать атрибут cellpadding для тега

. Однако, есть и другой, более предпочтительный вариант: CSS .

В таком случае отступы задаются с помощью свойства padding . С его помощью не составит труда сделать отступ там, где надо, то есть – сверху, справа, снизу или слева, используя, соответственно, одно из данных свойств: padding-top , padding-right , padding-bottom и padding-left .

Можно задать, на сколько именно пикселей должен осуществляться отступ. Приведем пример, в котором нижний отступ будет составлять 20 пикселей, а все остальные будут по 10 . Такой CSS -код будет выглядеть вот так:

Td { padding: 10px; padding-bottom: 20px; }

А полный код стилей на данном этапе:

Table { border: solid 1px blue; border-collapse: collapse; } td { border: solid 1px blue; padding: 10px; padding-bottom: 20px; }

Результат в браузере:

Отступы между ячейками

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

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

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

  1. с использованием атрибута cellspacing для тега
.
  • с использованием CSS -свойства border-spacing .

    • Надо подчеркнуть, что border-spacing прописывается для таблицы в целом, в то время как свойство padding прописывается непосредственно для ячеек.

    Давайте глянем на пример:

    Table { border: solid 1px blue; border-collapse: separate; border-spacing: 5px; } td { border: solid 1px blue; padding: 10px; padding-bottom: 20px; }

    И на получившийся результат:

    Сразу оговорим, что не надо пытаться сделать такие отступы с помощью border-collapse: collapse . Ведь при использовании этой опции ячейки «липнут» друг к другу.

    А чтобы они находились отдельно друг от друга, следует использовать border-collapse: separate . Важно понимать, что данное значение является значением по умолчанию. И применяется оно только для того, чтобы наглядно показать, как решается эта задача. Если мы удалим эту строку, то результат в виде отдельно расположенных друг от друга ячеек будет сохранен.

    CSS позволяет установть не только стиль границы таблицы, но и стиль границ отдельных ячеек. Так как у каждой ячейки свои границы, то между соседними ячейками граница получается сдвоенная. Но существует возможность объединить границы соседних ячеек в одну. Для этого есть свойство border-collapse . Оно принимает значения:

    border-collapse: separate - у каждой ячейки своя граница (по умолчанию)

    border-collapse: collapse - общая граница

    border-collapse: inherit - значение принимается от родительского элемента

    Для примера создадим таблицу и зададим рамку ячейкам всех таблиц, которые будут на странице. Сначала не будем ничего менять, чтобы посмотреть, как таблица будет выглядеть:

    Стиль:

    1
    2
    3
    4
    5
    6

    		 Страница

    Домашнее задание.

    В этом уроке я тоже не буду все подробно описывать - только общие моменты. Для полноты картины посмотрите результат примера.

    1. Создайте три таблицы, каждая должны состоять из одной строки и трех столбцов (колонок).
    2. В первой таблице разместите Header или «шапку» страницы (не путать с «шапкой» HTML-документа), во второй - левое и правое меню, а также основное содержимое (контент), в третьей - Footer или «подвал» страницы.
    3. Пусть ширина первого и последнего столбца каждой таблицы будет фиксированная.
    4. Важно. Используйте тег только для создания четырех кнопок горизонтального меню в «шапке» страницы. В остальных случаях пусть изображения идут фоном, а во вторых ячейках таблиц вообще используются только цвета, причем в первой и последней таблице это #99FF99.
    5. Пусть текст контента страницы будет выровнен по обеим сторонам ячейки таблицы, а заголовок располагается по центру.
    6. Что касается расстояний между ячейками таблиц, а также отступов ячеек, то думайте сами, где их надо совсем убрать, а где - увеличить.

    Задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse .

    Синтаксис

    border-spacing: значение [значение]

    Аргументы

    Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если аргументов два, то первое определяет горизонтальное расстояние, а второе - вертикальное.





    border-spacing










    12
    34


    Результат данного примера показан ни рис. 1.

    Рис. 1. Применение параметра border-spacing

    Примечание

    Если к тегу

    добавлен параметр cellspacing , то при использовании стилевого атрибута border-spacing он не принимается во внимание и значение cellspacing игнорируется. Исключением из этого правила является браузер Internet Explorer, который вообще не понимает свойство border-spacing .

    Таблицы

  • border-collapse устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии.
  • table-layout определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом.
  • border-spacing задает расстояние между границами ячеек в таблице. Атрибут border-spacing не работает в случае, когда для таблицы установлен параметр border-collapse со значением collapse.

    • Спецификация 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 или % , например:

    Table {width: 600px;} th {width: 20%;} td:first-child {width: 30%;}

    Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов

    . На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:

    с помощью тега

    Можно задать фон для любого количества столбцов;

    с помощью селектора table td:first-child , table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);

    с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.

    Подробнее про CSS-селекторы вы сможете прочитать .

    5. Как добавить таблице заголовок

    Добавить заголовок в таблицу можно с помощью тега

    и . Фиксировать высоту с помощью свойства height не рекомендуется.

    Th, td {padding: 10px 15px;}

    3. Как задать фон таблицы

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

    4. Столбцы таблицы

    Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега

     , а с помощью свойства 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;} , то ячейка не будет скрыта. Наследуется.

    Company Q1 Q2 Q3
    Microsoft 20.3 30.5
    Google 50.2 40.63 45.23
    table { border: 1px solid #69c; border-collapse: separate; empty-cells: hide; } th, td {border: 2px solid #69c;} Рис. 5. Пример скрытия пустой ячейки таблицы

    9. Компоновка макета таблицы с помощью свойства table-layout

    Компоновка макета таблицы определяется одним из двух подходов: фиксированный макет или автоматический макет. Под компоновкой в данном случае подразумевается как распределяется ширина таблицы между шириной ячеек. Свойство не наследуется.

    Синтаксис

    Table {table-layout: fixed;}

    10. Лучшие макеты таблиц

    1. Горизонтальный минимализм

    Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали. Каждая сущность представляет собой отдельную строку. Вы можете оформить подобные таблицы в минималистском стиле, поместив двухпиксельную границу под заголовком th .

    EmployeeSalaryBonusSupervisor
    Stephen C. Cox$300$50Bob
    Josephin Tan$150-Annie
    Joyce Ming$200$35Andy
    James A. Pentel$175$25Annie
    table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text-align: left; } th { font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; } td { color: #669; padding: 9px 8px; transition: .3s linear; } tr:hover td {color: #6699ff;}

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

    Td { border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; }/*остальной код - как в примере выше*/

    Добавление эффекта:hover для элемента tr облегчит чтение таблиц, оформленных в минималистском стиле. При наведении курсора мыши на ячейку, остальные ячейки той же строки выделяются одновременно, что упрощает процесс отслеживания информации, если таблицы имеют несколько столбцов.

    Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:hover td {background: #e8edff;}

    2. Вертикальный минимализм

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

    Th { font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; } td { border-right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px; }

    3. «Коробочный» стиль

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

    Th { font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; } td { background: #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px; } tr:hover td {background: #ccddff;}

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

    Table { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse; border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; } th { font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border-left: 1px solid #9baff1; color: #039; padding: 8px; } td { background: #e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: #669; padding: 8px; }

    4. Горизонтальная зебра

    Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный цвет фона может служить в качестве визуальной подсказки для людей при чтении таблицы.

    Th { font-weight: normal; color: #039; padding: 10px 15px; } td { color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; } tr:nth-child(2n) {background: #e8edff;}

    5. Газетный стиль

    Для достижения так называемого газетного эффекта, можно применить границы для элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы, отступы, разные фоны, и эффект:hover при наведении на строку.

    Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; } td { color: #669; padding: 7px 17px; } tr:hover td {background: #ccddff;}

    Table {border: 1px solid #69c;} th { font-weight: normal; color: #039; padding: 10px; } td { color: #669; border-top: 1px dashed #fff; padding: 10px; background:#ccddff; } tr:hover td {background: #99bcff;}

    Table {border: 1px solid #6cf;} th { font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; } td { color: #669; border-right: 1px dashed #6cf; padding: 10px 20px; }

    6. Фон таблицы

    Если вы ищете быстрый и уникальный способ оформления таблицы, выберите привлекательное изображение или фото, относящиеся к теме таблицы и установите ее фоном таблицы.

    Png") 98% 86% no-repeat; } th { font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; } td { color: #669; border-top: 1px solid white; padding: 10px 12px; background: rgba(51, 51, 153, .2); transition: .3s; } tr:hover td { background: rgba(51, 51, 153, .1); }



    1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд 5,00 / 3
    Главная →D-link →Отступ между ячейками css. Выравнивание содержимого ячеек →
    Статьи по теме: