css/html граница таблицы

Я хотел бы варианты для создания таблиц в моем css. Один с границей 5px сплошной черный и один с 0px. В настоящее время в CSS у меня есть #contentcolumn table < border: 5px solid black; width:…

Неравномерная пунктирная граница в ячейках таблицы

Я применил CSS border-bottom:1px dashed #494949; к нескольким последовательным ячейкам одной строки таблицы HTML, но граница не является однородной. Тире в конце каждой ячейки кажутся немного…

CSS граница ячейки таблицы перекрывающая границу таблицы

Я едва ли эксперт в css, так что это немного расстраивает. У меня есть сетка, которая была заполнена ретранслятором. Я хочу, чтобы каждая строка имела границу 1px вдоль нижней части, чтобы визуально…

HTML граница таблицы: таблица стилей агента пользователя переопределяет CSS?

У меня есть таблица HTML, которая нуждается в изменении цвета границы. Я не могу этого понять. HTML <table> <thead> <tr> <th>Name</th> <th>Conditions</th>…

Обычная граница таблицы HTML появляется очень странно в Firefox

Я создал таблицу HTML и использовал следующий CSS для стилизации границы, как я хотел: Верхняя строка и столбец должны быть одного цвета, а rest таблицы должен быть stripes альтернативных цветов…

Почему в некоторых таблицах HTML отсутствует граница Firefox

Я использую Firefox 3.5.7, и у меня есть тот же CSS, используемый в нескольких таблицах HTML, но есть некоторые примеры, где части границ не показаны. Что для меня не имеет смысла, так это то, что…

CSS Граница Изображения

Наверное простой вопрос это, но… Я могу применить CSS ко всем изображениям, используя img <> в CSS. Некоторые изображения имеют границу, указанную в html (например, border=1) — из редактора…

Html,css: двойная граница строк таблицы

Я пытаюсь copy http://grooveshark.com/#!/album/Halo+LP/5904939 вот эта таблица. Это моя попытка http://jsfiddle.net/d1zqsayh/25 / Проблема с моим кодом заключается в том, что как-то, когда вы…

Граница таблицы html

Я создаю кучу таблиц сейчас, когда и когда я добавляю заголовок таблицы (<th>) table row <tr> и добавляю к нему границу, появляется несколько границ. Я имею в виду, что у меня есть два…

html для удаления границы из внутренней таблицы

я хотел бы удалить границу с боков и нижней части моего внутреннего стола и растянуть его так, чтобы он стал таким же длинным, как внешний стол. Я пробовал использовать border-right: none; в моем…

2.8. CSS-таблицы

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

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

Форматирование таблиц

• Содержание:

1. Границы таблицы border

Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых границ. Границы таблицы задаются свойством border :

Границы ячеек заголовка каждого столбца задаются для элемента th :

Границы ячеек тела таблицы задаются для элемента td :

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

Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

Границы можно задавать частично:

Подробнее о свойстве border вы можете прочитать здесь.

2. Как задать ширину и высоту таблицы

По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).

Ширина таблицы и столбцов задаётся с помощью свойства width . Если для таблицы задано table , то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.

Ширину таблицы и столбцов обычно задают в px или % , например:

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

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

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

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

• заливка сплошным цветом, , .

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

Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью элемента <tr> . На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:

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

Подробнее про элемент <col> вы можете прочитать здесь.

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

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

Добавить заголовок в таблицу можно с помощью элемента <caption> , а с помощью свойства caption-side его можно поместить перед таблицей или под ней. Для горизонтального выравнивания текста заголовка применяется свойство text-align .

Рис. 1. Пример отображения заголовка под таблицей

6. Как убрать промежуток между рамками ячеек

Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если задать для таблицы border-collapse: collapse , то промежуток уберётся.

Рис. 2. Пример таблиц со сливающимися и раздельными рамками ячеек

7. Как увеличить промежуток между рамками ячеек

С помощью свойства border-spacing можно менять расстояние между рамками ячеек. Данное свойство применяется к таблице в целом.

Рис. 3. Пример таблиц с увеличенными промежутками между рамками ячеек

8. Как скрыть пустые ячейки таблицы

Свойство empty-cells скрывает или показывает пустые ячейки. Действует только на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а для таблицы задано table , то ячейка не будет скрыта.

Рис. 4. Пример скрытия пустой ячейки таблицы

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

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

Свойство не наследуется.

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

По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как сделать границы в таблице css

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

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

, а правую границу между ячейками убираем.

Разметка HTML

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

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;
>

Благодаря добавлению в спецификацию CSS3 свойства border-radius , появилась возможность закругления углов таблицы без использования фоновых изображений. Чтобы добиться такого эффекта, нужно закруглить углы соответствующих ячеек.

Разметка HTML
— аналогично с примером 2.

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 <

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.

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

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

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

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

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

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

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. Ширина таблицы в процентах

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto , как показано в примере 2.