Содержание

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом </tr>.

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

table, th, td { border: 1px solid black; }

Попробовать »

Теперь и таблица и ячейки имеют рамки, при этом и каждая ячейка и таблица имеют свои собственные рамки. В результате между рамками появилось пустое пространство, управлять размером этого пространства позволяет свойство border-spacing, которое задается для всей таблицы целиком. Другими словами, нельзя управлять промежутками между различными ячейками индивидуально.

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

  • separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.

  • collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Размер таблицы

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

th, td { padding: 7px; }

Попробовать »

Размер таблицы зависит от ее содержимого, но часто возникают ситуации, когда таблица оказывается слишком узкой и появляется необходимость ее растянуть. Ширину и высоту таблицы можно изменять с помощью свойств width и height, задавая нужные размеры или самой таблице или ячейкам:

table { width: 70%; }
th { height: 50px; }

Попробовать »

Выравнивание текста

По умолчанию текст в заголовочных ячейках таблицы выравнивается по центру, а в обычных ячейках текст выровнен по левому краю, используя свойство text-align можно управлять выравниванием текста по горизонтали.

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:

  • top: текст выравнивается по верхней границе ячейки

  • middle: выравнивает текст по центру (значение по умолчанию)

  • bottom: текст выравнивается по нижней границе ячейки

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      .test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>

Попробовать »

Чередование фонового цвета строк таблицы

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      .alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>

Попробовать »

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }

Попробовать »

Изменение фона строки при наведении курсора

Еще одним способом повышения удобочитаемости табличных данных является изменение фонового цвета строки при наведении на нее курсора мыши. Это поможет выделить нужное содержимое таблицы и повысит визуальное восприятие данных.

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

tr:hover { background-color: #E0E0FF; }

Попробовать »

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

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

table { margin: 10px auto; }

Попробовать »

Если вам нужны разные отступы сверху и снизу таблицы, то можно задать свойству margin три значения: первое будет отвечать за отступ сверху, второе за выравнивание по горизонтали, а третье за отступ снизу:

table { margin: 10px auto 30px; }

CSS-рамка

CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding. Рамка задаётся с помощью краткого свойства border. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.

Оформление рамок HTML-элементов с помощью CSS-свойств

1. Стиль рамки border-style

border_styleПо умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)
Значения:
noneЗначение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hiddenЭквивалентно none.
dotted
dotted
dashed
dashed
solid
solid
double
double
groove
groove
ridge
ridge
inset
inset
outset
outset
{1,4}
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style:
{border-style: solid dotted none dotted;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-style: solid;}
p {border-top-style: solid;}

2. Цвет рамки border-color

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

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparentУстанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цветЦвет рамок задается при помощи значений свойства color.

{border-color: #cacd58;}
{1,4}
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color:
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-color: #cacd58;}

3. Ширина рамки border-width

Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none, и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.

border-width
(border-top-width, border-right-width, border-bottom-width, border-left-width)
Значения:
thin / medium / thickКлючевые слова, устанавливают ширину рамки относительно друг друга. Первое значение уже, чем второе, второе — тоньше третьего. Значение по умолчанию — medium
width (px, em)
{border-width: 5px;}
{1,4}
Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width:
{border-width: 5px 10px 15px 3px;}
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Синтаксис

p {border-width: 2px;}

4. Задание рамки одним свойством

Свойство border позволяет объединить в себе следующие свойства: border-width, border-style, border-color, например:

div {
width: 100px; 
height: 100px; 
border: 2px solid grey;
}

При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.

5. Задание рамки для одной границы элемента

В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width, border-style и border-color. Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.

Стиль верхней границы задается с помощью свойства border-top, нижней — border-bottom, левой — border-left, правой — border-right.

Синтаксис

p {border-top: 2px solid grey;}

border | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюЗависит от использования
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/box.html#propdef-border

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг
элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер
сам определит, какое из них соответствует нужному свойству. Для установки границы
только на определенных сторонах элемента, воспользуйтесь свойствами border-top,
border-bottom, border-left,
border-right.

Синтаксис

border: [border-width || border-style || border-color] | inherit

Значения

Значение border-width определяет толщину границы.
Для управления ее видом предоставляется несколько значений border-style.
Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение
может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border</title>
  <style>
   .brd {
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy 
    nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis 
    enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat.
   </div>
 </body>
</html>

В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

[window.]document.getElementById(«elementID»).style.border

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

border-collapse | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюseparate
НаследуетсяНет
ПрименяетсяК тегу <table> или к элементам, у которых значение display установлено как table или inline-table
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/tables.html#propdef-border-collapse

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство
играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится
линия двойной толщины (рис. 1а). Значение collapse
заставляет браузер анализировать подобные места в таблице и убирать в ней двойные
линии (рис. 1б). При этом между ячейками остается только одна граница, одновременно принадлежащая
обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг
самой таблицы добавляется рамка.

аб

Рис. 1. Вид таблицы при использовании свойства border-collapse

Синтаксис

border-collapse: collapse | separate | inherit

Значения

collapse
Линия между ячейками отображается только одна, также игнорируется значение атрибута cellspacing.
separate
Вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения
ячеек показываются сразу две линии.
inherit
Наследует значение родителя.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-collapse</title>
  <style>
   table { 
    width: 100%; /* Ширина таблицы */
    border: 4px double black; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Отображать только одинарные линии */
   }
   th { 
    text-align: left; /* Выравнивание по левому краю */
    background: #ccc; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
   td { 
    padding: 5px; /* Поля вокруг содержимого ячеек */
    border: 1px solid black; /* Граница вокруг ячеек */
   }
  </style>
 </head>
 <body>   
  <table>
   <tr> 
    <th>&nbsp;</th><th>2013</th>
    <th>2014</th><th>2015</th>
   </tr>
   <tr> 
    <td>Нефть</td><td>43</td>
    <td>51</td><td>79</td>
   </tr>
   <tr> 
    <td>Золото</td><td>29</td>
    <td>34</td><td>48</td>
   </tr>
   <tr> 
    <td>Дерево</td><td>38</td>
    <td>57</td><td>36</td>
   </tr>
  </table> 
 </body>
</html>

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

Рис. 2. Вид таблицы при использовании свойства border-collapse

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.
В IE6 и IE7 не отменяется действие атрибута cellspacing.

border-style | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+8.0+1.0+3.5+1.0+1.0+1.0+1.0+

Краткая информация

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные
стили для разных сторон элемента.

Синтаксис

border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Значения

Для управления видом границы предоставляется несколько значений свойства border-style.
Вид зависит от используемого браузера и заданной толщины границы. В табл. 1
приведены названия стилей и получаемая рамка при разных значениях толщины —
1, 3, 5 и 7 пикселов.

Табл. 1. Вид рамки в зависимости от стиля и толщины границы элемента
1 пиксел3 пиксела5 пикселов7 пикселов

dotted

dotted

dotted

dotted

dashed

dashed

dashed

dashed

solid

solid

solid

solid

double

double

double

double

groove

groove

groove

groove

ridge

ridge

ridge

ridge

inset

inset

inset

inset

outset

outset

outset

outset

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

none
Не отображает границу и ее толщина (border-width) задается нулевой.
hidden
Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
inherit
Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между
собой пробелом. Эффект зависит от количества и указан в табл. 2.

Табл. 2. Зависимость результата использования от числа значений
Число значенийРезультат
1Стиль границы будет задан для всех сторон элемента.
2Первое значение устанавливает стиль верхней и нижней границы,
второе — левой и правой.
3Первое значение задает стиль верхней границы, второе —
одновременно левой и правой границы, а третье — нижней границы.
4Поочередно устанавливается стиль верхней, правой, нижней
и левой границы.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-style</title>
  <style>
   p { 
    border-style: double; /* Стиль линии вокруг параграфа */
    padding: 5px; /* Поля вокруг текста */
   }
  </style> 
 </head> 
 <body> 
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem 
  nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body> 
</html>

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

Рис. 1. Применение свойства border-style

Объектная модель

[window.]document.getElementById(«elementID»).style.borderStyle

Браузеры

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed. При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed.

Internet Explorer до версии 7.0 включительно не поддерживает значения hidden и inherit.

Стиль границы в разных браузерах может несколько различаться при использовании значений groove, ridge, inset или outset.

Рамка и отступы таблицы (свойства border-spacing, empty-cells, border-collapse)


Как сделать рамку для таблицы

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

Ячейка Ячейка
Ячейка Ячейка 

<table style="border: 1px solid red;">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Установить рамку каждой ячейке также можно с помощью атрибута style. Но предпочтительней стиль вынести в тег style или файл .css: кода меньше, возможности шире, удобства больше (чтобы изменить цвет рамки у всех ячеек, достаточно поменять значение один раз).

Ячейка Ячейка
Ячейка Ячейка 

<table style="border: 1px solid red;">
  <tr>
    <td style="border: 1px solid red;">Ячейка
    <td style="border: 1px solid red;">Ячейка
  <tr>
    <td style="border: 1px solid red;">Ячейка
    <td style="border: 1px solid red;">Ячейка
</table>



<style>
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table class="raz">
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>




Убрать промежутки от ячеек до краёв таблицы

Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка
Ячейка Ячейка Ячейка 

<style>



.raz {
  border-spacing: 0;
  padding: 0 2em 3em 0;  
}
.raz,
.raz td {
  position: relative;
  border: 1px solid red;
}
.raz td:nth-child(2) {
  left: 1em;
}
.raz td:nth-child(3) {
  left: 2em;  
}
.raz tr:nth-child(2) td {
  top: 1em;
}
.raz tr:nth-child(3) td {
  top: 2em;
}
.raz tr:nth-child(4) td {
  top: 3em;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
    <td>Ячейка
</table>




Скрыть пустые ячейки в таблице c border-collapse: collapse; можно с помощью псевдоклассов :empty или :blank.

border-collapse: схлопывание границ ячеек

separate
у каждой ячейки и таблицы в целом своя граница, игнорируется свойство border у thead, tfoot, tbody и tr
collapse
между ячейками и контейнером единая граница, отсутствуют двойные рамки таблицы, игнорируются свойства border-spacing, empty-cells, padding у table
initial
separate
inherit
наследует значение родителя
unset
наследует значение родителя

Ячейка Ячейка
Ячейка Ячейка 
<style>
.raz {
  border-collapse: collapse; 
}
.raz,
.raz td {
  border: 1px solid red;
}
.raz tbody,
.raz tr,
.raz td {
  margin: 1em; 
}
.raz tbody,
.raz tr {
  padding: 1em; 
}
</style>

<table>
  <tbody>
    <tr>
      <td>Ячейка
      <td>Ячейка
    <tr>
      <td>Ячейка
      <td>Ячейка
</table>

Жирные внешние границы таблицы

Ячейка Ячейка
Ячейка Ячейка 

<style>
.raz {
  border-collapse: collapse;
  border: 4px solid red;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Таблица без границ аки сетка без внешней рамки

Ячейка Ячейка
Ячейка Ячейка 

<style>
.raz {
  border-collapse: collapse;
  border-style: hidden;
}
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство border у tr

Заголовок Заголовок
Ячейка Ячейка
Ячейка Ячейка 

<style>
.raz {
  border-collapse: collapse;
}
.raz tr:first-child {
  border-bottom: 1px solid red;
}
.raz th+th,
.raz td+td {
  padding-left: 1em;  
}
</style>

<table>
  <tr>
    <th>Заголовок
    <th>Заголовок
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство padding у table при border-collapse: collapse;

Ячейка Ячейка
Ячейка Ячейка 

<style>
.raz {
  border-collapse: collapse;
  outline: 1px solid red;  
  outline-offset: 2px;
  margin: 3px;  
}
.raz,
.raz td {
  border: 1px solid red;
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>



Отступы внутри ячейки таблицы

Расстояние от содержимого до края ячейки определяет свойство padding.

Ячейка Ячейка
Ячейка Ячейка 

<style>
.raz {
  border-collapse: collapse;
}
.raz td {
  border: 1px solid red;
  padding: .3em 1em;  
}
</style>

<table>
  <tr>
    <td>Ячейка
    <td>Ячейка
  <tr>
    <td>Ячейка
    <td>Ячейка
</table>

Свойство border-style — стиль границы

Свойство border-style задает стиль границы
для всех сторон одновременно или отдельно для каждой стороны.
Является свойством-сокращением для следующих свойств:
border-left-style,
border-right-style,
border-top-style,
border-bottom-style.

Синтаксис

селектор {
border-style: значение;
}

Значения

ЗначениеОписание
solidСплошная линия.
dottedГраница в виде точек.
dashedГраница в виде тире.
ridgeГраница в виде выпуклой линии.
double Граница в виде двойной линии.
Чтобы увидеть эффект толщина границы должна быть минимум 3px.
grooveВогнутая граница.
insetВдавленная граница.
outsetВыпуклая граница.
noneОтсутствие границы.

Значение по умолчанию: none.

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых
через пробел:

КоличествоОписание
1Тип для всех сторон одновременно.
2Первое значение для верха и низа, второе — для левой и правой границ.
3Первое значение для верха, второе — для левой и правой границ, третье — для нижней.
4 Первое значение для верхней границы, второе — для правой,
третье — для нижней, четвертое — для левой границы.

Пример . Значение solid

<div></div>
#elem {
border-width: 1px;
border-style: solid;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример . Значение dotted

<div></div>
#elem {
border-width: 1px;
border-style: dotted;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример . Значение dashed

<div></div>
#elem {
border-width: 1px;
border-style: dashed;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример . Значение ridge

<div></div>
#elem {
border-width: 3px;
border-style: ridge;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример . Значение double

<div></div>
#elem {
border-width: 3px;
border-style: double;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример . Значение groove

<div></div>
#elem {
border-width: 3px;
border-style: groove;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример . Значение inset

<div></div>
#elem {
border-width: 3px;
border-style: inset;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример . Значение outset

<div></div>
#elem {
border-width: 3px;
border-style: outset;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример

В данном примере заданы различные типы границы для разных сторон элементов:

<div></div>
#elem {
border-width: 1px;
border-style: solid dotted dashed dotted;
border-color: black;
width: 300px;
height: 100px;
}

:

Пример

А сейчас для разных сторон элемента также задана различная толщина границы
и ее цвет:

<div></div>
#elem {
border-width: 1px 2px 3px 4px;
border-style: dashed dotted solid double;
border-color: red blue green black;
width: 300px;
height: 100px;
}

:

Пример

Сейчас для верхней и нижней границы задан тип solid,
а для правой и левой — dotted:

<div></div>
#elem {
border-width: 1px;
border-style: solid dotted;
border-color: black;
width: 300px;
height: 100px;
}

:

Смотрите также

  • свойство border-color,
    которое задает цвет границы
  • свойство border-style,
    которое задает внешний вид границы
  • свойство border,
    которое является свойством-сокращением для границы

таблиц стилей CSS

Внешний вид таблицы HTML можно значительно улучшить с помощью CSS:

Компания Контакт Страна
Альфредс Футтеркисте Мария Андерс Германия
Berglunds snabbköp Кристина Берглунд Швеция
Торговый центр Moctezuma Франциско Чанг Мексика
Эрнст Гендель Роланд Мендель Австрия
Island Trading Хелен Беннет Великобритания
Кениглих Эссен Филип Крамер Германия
Винные погреба Смеющегося Вакха Йоши Таннамури Канада
Magazzini Alimentari Riuniti Джованни Ровелли Италия

Попробуй сам »

Границы стола

Чтобы указать границы таблицы в CSS, используйте свойство border .

В приведенном ниже примере указана черная рамка для элементов

,

, чтобы выделить строки таблицы с помощью мыши
больше:

и

:

Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это
потому что и таблица, и элементы

 и

 имеют отдельные границы.

Свернуть границы таблицы

Свойство border-collapse устанавливает, будут ли границы таблицы
должен быть свернут в единую рамку:

Пример

стол
{
граница-коллапс: коллапс;
}

стол, тыс, тд
{
граница: сплошной черный 1px;
}

Попробуй сам »

Если вам нужна только рамка вокруг стола, укажите только свойство border для
<таблица>:

Ширина и высота стола

Ширина и высота таблицы определяются свойствами ширина и высота .

В приведенном ниже примере ширина таблицы устанавливается равной 100%, а высота

 элементов до 50 пикселей:

Горизонтальное выравнивание

Свойство text-align устанавливает горизонтальное выравнивание (например, по левому, правому или центру)
содержимого в

 или

.

По умолчанию содержимое элементов

 выравнивается по центру, а
содержимое элементов

 выравнивается по левому краю.

В следующем примере текст в элементах

 выравнивается по левому краю:

Вертикальное выравнивание

Свойство vertical-align устанавливает вертикальное выравнивание (например, по верхнему, нижнему или среднему)
содержимого в

 или

.

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

 и

 элементы).

В следующем примере устанавливается вертикальное выравнивание текста по низу для элементов

:

Обивка стола

Чтобы контролировать расстояние между границей и содержимым таблицы, используйте
обивка свойство на
Элементы

 и

:

Разделители горизонтальные

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Добавьте свойство border-bottom в

 и

 для горизонтальных разделителей:

Подъемный стол

Используйте селектор : hover на

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Столы в полоску

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Для таблиц с полосками зебры используйте селектор nth-child () и добавьте цвет фона ко всем четным (или нечетным) строкам таблицы:

Цвет стола

В примере ниже указан цвет фона.
и цвет текста

элементы:

Имя Фамилия Экономия
Питер Грифон $ 100
Lois Грифон $ 150
Джо Swanson $ 300

Адаптивный стол

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

Имя Фамилия Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки Очки
Джилл Смит 50 50 50 50 50 50 50 50 50 50 50 50
Ева Джексон 94 94 94 94 94 94 94 94 94 94 94 94
Адам Джонсон 67 67 67 67 67 67 67 67 67 67 67 67

Добавьте элемент контейнера (например,

) с overflow-x: auto вокруг элемента

, чтобы сделать его отзывчивым:

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если задано «overflow: scroll»).

Другие примеры

Сделать красивый стол
Этот пример демонстрирует, как создать красивую таблицу.

Установить позицию заголовка таблицы
В этом примере показано, как разместить заголовок таблицы.

Проверьте себя упражнениями!

Свойства таблицы CSS

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

,

html — Проблемы с получением границы 1px на таблице с использованием CSS

.

Переполнение стека

  1. Около

  2. Товары

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. работы
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

  2. Авторизоваться
    зарегистрироваться

  3. текущее сообщество

    • Переполнение стека

      Помогите
      чат

.

Вложенные таблицы: граница 1px с CSS

Переполнение стека

  1. Около

  2. Товары

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. работы
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

Загрузка…

.

Html Table — Добавить границу в таблицу с помощью css

Переполнение стека

  1. Около

  2. Товары

  3. Для команд

  1. Переполнение стека
    Общественные вопросы и ответы

  2. Переполнение стека для команд
    Где разработчики и технологи делятся частными знаниями с коллегами

  3. работы
    Программирование и связанные с ним технические возможности карьерного роста

  4. Талант
    Нанимайте технических специалистов и создавайте свой бренд работодателя

  5. реклама
    Обратитесь к разработчикам и технологам со всего мира

  6. О компании

,

Разное

Previous post
Обучение программированию php: Обучение на PHP разработчика, PHP developer — обучение от профессионалов | GeekBrains — образовательный портал | GeekBrains
Next post
Вконтакте как найти группу по id: Как найти группу в ВК

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

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