Содержание

Таблицы в CSS. Границы таблицы

Отображение границ ячеек

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

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

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

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

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

Стиль:

+

7
8
9
10

td
  {
  border: 1px solid Red;
  }

HTML код:

14
15
16
17
18
19
20
21
22

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

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

Теперь установим таблице свойство border-collapse.

11
12
13
14

#t1
  {
  border-collapse: collapse;
  }

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

Расстояние между ячейками

CSS даёт возможность установить конкретное расстояние между ячейками таблицы. Для этого используется свойтсво border-spacing. Значением свойства является расстояние в единицах измерения CSS. Это свойство не работает, если установлено свойство border-collapse со значением collapse.

Создадим ещё одну таблицу и установим расстояние между ячейками:

Стиль:

15
16
17
18

#dis 
  {
  border-spacing: 10px;
  }

HTML код:

31
32

33
34
35
36
37
38
39

<table>
  <tr>
    <td>строка 1 ячейка 1</td>
    <td>строка 1 ячейка 2</td>
  </tr>
  <tr>
    <td>строка 2 ячейка 1</td>
    <td>строка 2 ячейка 2</td>
</tr></table>

Свойству border-spacing можно указать два значения через пробел. При этом, первое значение — это расстояние по горизонтали, а второе — по вертикали.

Укажем созданной таблице разные расстояния. 17 строка будет выглядеть так:

17

border-spacing: 5px 15px;

Положение заголовка таблицы

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

caption-side: top — над таблицей (по умолчанию)

caption-side: bottom — под таблицей

Существуют другие значения, но они поддерживаются не всеми браузерами.

Добавим второй таблице заголовок и расположим его под таблицей:

32

<caption>Заголовок таблицы</caption>

Отображение пустых ячеек

Для пустых ячеек можно запретить отображение фона и рамки. Если ячейка содержит пробел, перевод строки или табуляцию, то она всё равно считается пустой. Отмену отображения пустых ячеек устанавливает свойство empty-cells. Может принимать значения:

empty-cells: show — ячейки видны (по умолчанию)

empty-cells: hide — ячейки не видны

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

Стиль:

19
20
21
22

#hid td
  {
  background-color: #909090;
  }

HTML код:

45
46
47
48
49
50
51
52
53

<table> <tr> <td>строка 1 ячейка 1</td> <td>строка 1 ячейка 2</td> </tr> <tr> <td></td> <td>строка 2 ячейка 2</td> </tr></table>

Пустая ячейка видна, у неё отображаются рамка и фон.

Теперь добавим таблице свойство empty-cells.

19
20
21
22

#hid 
  {
  empty-cells: hide;
  }

Обратите внимание, пустая ячейка не отображается в таблице

HTML, CSS, JavaScript, Perl, PHP, MySQL: Weblibrary.biz

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

‘border-collapse’

Значение: collapse | separate | inherit
Начальное значение: collapse
Область применения: элементы ‘table’ и ‘inline-table’
Наследование: да
Процентные значения: N/A
Устройства: визуальные

Это свойство позволяет выбрать модель границ таблицы. Значение ‘separate’ означает модель с отдельными границами. Значение ‘collapse’ задает модель с пересекающимися границами. Эти модели описаны ниже.

Модель отдельных границ

‘border-spacing’

Значение: <length> <length>? | inherit
Начальное значение: 0
Область применения: элементы ‘table’ и ‘inline-table’
Наследование: да
Процентное задание: не определено
Устройства: визуальные

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

В этой модели каждая ячейка имеет собственные границы. Свойство ‘border-spacing’ определяет расстояние между границами соседних ячеек. Это расстояние заполняется фоном элемента таблицы. У строк, столбцов, групп строк и групп столбцов не может быть границ (т.е. агенты пользователей должны игнорировать свойства границ для данных элементов).

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

TABLE { border: outset 10pt;
border-collapse: separate;
border-spacing: 15pt }
TD { border: inset 5pt }
TD.special { border: inset 10pt } /* Верхняя левая ячейка */

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

Границы вокруг пустых ячеек: свойство ’empty-cells’

’empty-cells’

Значение: show | hide | inherit
Начальное значение: show
Область применения: элементы ‘table-cell’
Наследование: да
Процентное задание: не определено
Устройства: визуальные

В модели с отдельными границами это свойство управляет представлением границ вокруг ячеек, не имеющих видимого содержимого. Считается, что видимого содержимого нет в пустых ячейках и ячейках, для которых свойству ‘visibility’ присвоено значение ‘hidden’. Символы «&nbsp;» и другие символы, представляющие пустое пространство за исключением символов ASCII CR («D»), LF («A»), tab («9») и пробела («20»), считаются видимым содержимым.

Если для этого свойства установлено значение ‘show’, вокруг пустых ячеек отображается граница (как вокруг обычных ячеек).

Значение ‘hide’ означает, что вокруг пустых ячеек не будет границ. Более того, если у всех ячеек в строке это свойство имеет значение ‘hide’, и ячейки не имеют видимого содержимого, вся строка будет выполняться согласно значению ‘display: none’.

Согласно следующему правилу границы будут иметь все ячейки:

TABLE { empty-cells: show }

Модель с пересекающимися границами

В модели с пересекающимися границами можно указывать границы, которые окружают ячейку, строку, группу строк, столбец или группу столбцов полностью или частично. Таким образом можно установить границы для атрибута HTML «rule».

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

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

ширина_строки = (0.5 * ширина_границы0) + левое_поле_внутри_таблицы1
+ ширина1 + правое_поле_внутри_таблицы1 + ширина_границы1 +
левое_поле_внутри_таблицы2 +...+ правое_поле_внутри_таблицыn +
(0.5 * ширина_границыn)

Здесь n — количество ячеек в строке, а ширина-границыi — граница между ячейками i и i + 1. Обратите внимание, что в ширину таблицы включена только одна из двух внешних границ; другая граница находится в области поля.

Схема ширины ячеек, границ и полей внутри ячеек.

Обратите внимание, что в этой модели ширина таблицы включает половину границы таблицы. Кроме того, в этой модели у таблицы нет полей внутри (но имеются поля).

Разрешение конфликтов между границами

В модели с пересекающимися границами границы с каждого края ячейки могут задаваться свойствами различных элементов, располагающихся у края (ячейки, строки, группы строк, столбцов, группы столбцов и самой таблицы), и эти границы могут различаться по ширине, стилю и цвету. В этом случае для каждого края используется стиль границы, «приковывающий взгляд», за исключением того, что граница не отображается, если используется стиль стиля ‘hidden’.

Какой тип границы «выиграет» в случае конфликта, определяется следующими правилами:

  1. Границы, для свойства ‘border-style’ которых установлено значение ‘hidden’, имеют приоритет над всеми остальными конфликтующим границами. Все другие границы в указанном месте не отображаются.
  2. У границ, имеющих стиль ‘none’, самый низкий приоритет. Только если свойства границ всех элементов, относящихся к этому краю, имеют значение ‘none’, границы не будет (но помните, что значение ‘none’ используется для стиля границы по умолчанию.)
  3. Если ни один из стилей не имеет значение ‘hidden’ и хотя бы один из них имеет значение, отличное от ‘none’, «побеждают» более широкие границы. Если у нескольких границ свойства ‘border-width’ имеют одинаковые значения, стили применяются в следующем порядке: ‘double’, ‘solid’, ‘dashed’, ‘dotted’, ‘ridge’, ‘outset’, ‘groove’ и стиль с самым низким приоритетом ‘inset’.
  4. Если стили границ отличаются только цветом, тогда стиль, заданный для ячейки, имеет приоритет над стилем строки, стиль строки — над стилем группы строк, столбца, группы столбцов и таблицы.

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

TABLE { border-collapse: collapse;
border: 5px solid yellow; }
*#col1 { border: 3px solid black; }
TD { border: 1px solid red; padding: 1em; }
TD.solid-blue { border: 5px dashed blue; }
TD.solid-green { border: 5px solid green; }

к коду HTML:

<P>
<TABLE>
<COL><COL><COL>
<TR>
<TD> 1
<TD> 2
<TD> 3
</TR>
<TR>
<TD> 4
<TD> 5
<TD> 6
</TR>
<TR>
<TD> 7
<TD> 8
<TD> 9
</TR>
<TR>
<TD> 10
<TD> 11
<TD> 12
</TR>
<TR>
<TD> 13
<TD> 14
<TD> 15
</TR>
</TABLE>

будет представлена примерно следующая таблица:

Пример таблицы с пересекающимися границами.

В следующем примере представлена таблица с горизонтальными линиями, разделяющими строки. Для верхней границы таблицы указано значение ‘hidden’, что обеспечивает отсутствие верхней границы первой строки. В результате будет использоваться атрибут «rules» HTML 4.0 (rules=»rows»).

TABLE[rules=rows] TR { border-top: solid }
TABLE[rules=rows] { border-collapse: collapse;
border-top: hidden }

Таблица с горизонтальными линиями, разделяющими строки.

В данном случае такой же результат можно получить, не указывая значения ‘hidden’ для границы всей ТАБЛИЦЫ, а только для первой строки. Можно использовать любой способ.

TR:first-child { border-top: none }
TR { border-top: solid }

Вот еще один пример пересекающихся границ:

Таблица с двумя отсутствующими внутренними границами.

HTML source:

<TABLE>
<TR><TD>foo</TD>
<TD>bar</TD></TR>
<TR><TD>foo</TD>
<TD>bar</TD></TR>
</TABLE>

Стили границ

Смысл некоторых значений свойства ‘border-style’ применительно к таблице и к другим элементам различен. В приведенном ниже списке такие значения помечены звездочкой.

none

Граница отсутствует.

*hidden

Аналогично значению ‘none’, но в модели с пересекающимися границами имеет приоритет над любыми другими границами (см. раздел о конфликтах между границами).

dotted

Граница представляется рядом точек.

dashed

Граница представляется рядом коротких линейных сегментов.

solid

Граница представляется единым сегментом линии.

double

Граница представляется двумя сплошными линиями. Сумма толщины двух линий и

расстояния между ними равно значению ‘border-width’.

groove

Граница выглядит вдавленной.

ridge

В противоположность ‘groove’, граница выглядит выпуклой.

*inset

В модели с отдельными границами весь выглядит вдавленным. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ‘groove’.

*outset

В модели с отдельными границами весь блок выглядит выпуклым. В модели с пересекающимися границами это значение дает тот же эффект, что и значение ‘ridge’.

Html отступ от границы ячейки. Как убрать промежуток между рамками ячеек

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

, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

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

Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:

  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden .

Добавление неразрывного пробела воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).

Пример 2.10. Пустые ячейки

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Использование empty-cells
и .

Table, th, td { border: 1px solid black; } Попробовать »

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

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

  • separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
  • collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
Название документа
ИмяФамилия
ГомерСимпсон
МарджСимпсон

ИмяФамилия
ГомерСимпсон
МарджСимпсон
Попробовать »

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

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

Th, td { padding: 7px; } Попробовать »

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

Table { width: 70%; } th { height: 50px; } Попробовать »

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

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

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

  • top: текст выравнивается по верхней границе ячейки
  • middle: выравнивает текст по центру (значение по умолчанию)
  • bottom: текст выравнивается по нижней границе ячейки
Название документа
ИмяФамилия
ГомерСимпсон
МарджСимпсон
Попробовать »

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

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

Название документа
ИмяФамилияПоложение
ГомерСимпсонотец
МарджСимпсонмать
БартСимпсонсын
ЛизаСимпсондочь
Попробовать »

Добавлять атрибут 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; }

Итак, мы изучили с вами наиболее простые действия, которые можно осуществлять с границами таблиц. И теперь таблица выглядит куда более эстетично. Однако, наполнение ячеек прямо таки упирается в границы. Это легко можно исправить, достаточно лишь сделать отступы в ячейках в таблице 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 . Важно понимать, что данное значение является значением по умолчанию. И применяется оно только для того, чтобы наглядно показать, как решается эта задача. Если мы удалим эту строку, то результат в виде отдельно расположенных друг от друга ячеек будет сохранен.

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

    Цвет фона ячеек

    Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

    Пример 2.3. Цвет фона

    Таблицы
    Заголовок 1Заголовок 2
    Ячейка 3Ячейка 4

    В данном примере получим синий цвет фона у ячеек (тег

    ) и красный у заголовка (тег ). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE . А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

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

    Рис. 2.4. Изменение цвета фона

    Поля внутри ячеек

    Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега

    . Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding , добавляя его к селектору TD , как показано в примере 2.4.

    Пример 2.4. Поля в таблицах

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблицы
    Заголовок 1Заголовок 2
    Ячейка 3Ячейка 4

    В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.

    Рис. 2.5. Поля в ячейках

    Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега

    игнорируется.

    Расстояние между ячейками

    Для изменения расстояния между ячейками применяется атрибут cellspacing тега

    . Влияние этого атрибута хорошо заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. В качестве замены cellspacing выступает стилевое свойство border-spacing , оно устанавливает расстояние между границами ячеек. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений у этого свойства два, то первое определяет горизонтальное расстояние (т.е. слева и справа от ячейки), а второе — вертикальное (сверху и снизу).

    Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).

    Пример 2.5. Расстояние между границами ячеек

    XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

    Замена cellspacing
    Леонардо58
    Рафаэль411
    Микеланджело249
    Донателло213

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

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

    Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).

    При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

    Границы и рамки

    По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега

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

    Использование атрибута cellspacing

    Известно, что атрибут cellspacing тега

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

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

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

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

    Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 2.6).

    Пример 2.6. Добавление двойной рамки

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблицы
    Заголовок 1Заголовок 2
    Ячейка 3Ячейка 4

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

    Рис. 2.7. Граница вокруг таблицы и ячеек

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

    . Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать
    , то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse , которое добавляется к селектору TABLE (пример 2.7).

    Пример 2.7. Создание одинарной рамки

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблицы
    Заголовок 1Заголовок 2
    Ячейка 3Ячейка 4

    В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8.

    Рис. 2.8. Граница вокруг таблицы

    Выравнивание содержимого ячеек

    По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег

    , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 2.8).

    Пример 2.8. Выравнивание содержимого ячеек по горизонтали

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблицы
    Заголовок 1Ячейка 1Ячейка 2
    Заголовок 2Ячейка 3Ячейка 4

    В данном примере содержимое тега

    выравнивается по левому краю, а содержимое тега — по центру. Результат примера показан ниже (рис. 2.9).

    Рис. 2.9. Выравнивание текста в ячейках

    Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9.

    Пример 2.9. Выравнивание содержимого ячеек по вертикали

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Таблицы
    Заголовок 1Заголовок 2
    Ячейка 1Ячейка 2

    В данном примере устанавливается высота заголовка

    как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10.

    Рис. 2.10. Выравнивание текста в ячейках

    Пустые ячейки

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

    Старые браузеры не отображали цвет фона пустых ячеек вида

    Леонардо58
    Рафаэль 11
    Микеланджело24
    Донателло 13

    Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.

    а. В браузере Safari, Firefox, Opera, IE8, IE9

    б. В браузере IE7

    Рис. 2.11. Вид таблицы с пустыми ячейками

    Поля и отступы являются очень важными стилями при построении HTML-страницы. Они позволяют более точно спозиционировать элементы, создать каркас с необходимыми зазорами и т.п. Оба стиля очень похожи и выполняют схожие функции. Но отличия все же есть.

    Элементы могут быть вложенными, могут находиться по соседству друг от друга. Давайте рассмотрим следующий пример:

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

    Поля задаются стилем padding . Этот стиль применим только к элементам-контейнерам, которые могут содержать в себе другие элементы. Стиль позволяет задать значение полей между краями элемента и его содержимым. Стиль margin позволяет задать отступы от элемента до ближайших границ другого элемента. Границами другого элемента могут быть границы родительского контейнера, а также края самой страницы.

    Существует несколько способов задания этих стилей. Например, непосредственно указать размер всех полей или отступов одним аргументом в какой-нибудь единице измерения (px, ex, em, pt, cm и так далее):

    padding : 3px ; margin : 3px ;

    В этом случае поля и отступы будут со всех четырех сторон одинаковы. При задании двух аргументов через пробел:

    padding : 3px 5px ; margin : 3px 5px ;

    первый будет определять величину полей/отступов сверху и снизу, второй — слева и справа. При задании трех аргументов:

    padding : 3px 5px 2px ; margin : 3px 5px 2px ;

    первый — поле/отступ сверху, второй — одновременно слева и справа, третий — снизу. При четырех аргументах:

    padding : 3px 5px 2px 6px ; margin : 3px 5px 2px 6px ;

    первый — поле/отступ сверху, второй — справа, третий — снизу, четвертый — слева. Легко запомнить: первый — сверху, далее по часовой стрелке. Кроме того, можно задавать поля и отступы для конкретного края отдельно, с помощью соответствующих стилей: padding-top , padding-right , padding-bottom , padding-left , margin-top , margin-right , margin-bottom , margin-left . Значением этих стилей может быть только один аргумент, задающий величину поля/отступа для данной стороны.

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

    padding : 5px ;

    В результате страница изменит вид к следующему:

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

    margin-top : 5px ;

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

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

    HTML-код подопытной страницы:

    html > head > title > Тест/ title > meta http-equiv = «Content-Type» content = «text/html;charset=utf-8» > / head > body > style > table {width: 200px; height: 150px; border: 1px solid #555; border-collapse: collapse} td {vertical-align: top; padding: 0px} div {width: 100px; height: 100px; background: red} / style > table style = «background: lime» > tr > td style = «padding: 5px» > div style = «margin: 0px» > / div > / td > / tr > / table > table style = «background: skyblue; margin-top: 5px» > tr > td > / td > / tr > / table > / body > / html >

    Facebook

    Twitter

    Вконтакте

    Одноклассники

    Google+

    Статьи по теме

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

    Таблицы и стили

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

    Цвет фона ячеек

    Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background , которое применяется к селектору TABLE . При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent , т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH , то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

    Пример 2.3. Цвет фона

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    В данном примере получим синий цвет фона у ячеек (тег <td> ) и красный у заголовка (тег <th> ). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE . А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

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

    Рис. 2.4. Изменение цвета фона

    Поля внутри ячеек

    Полем называется расстояние между краем содержимого ячейки и её границей. Обычно для этой цели применяется атрибут cellpadding тега <table> . Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding , добавляя его к селектору TD , как показано в примере 2.4.

    Пример 2.4. Поля в таблицах

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    В данном примере с помощью группирования селекторов поля установлены одновременно для селектора TD и TH . Результат примера показан на рис. 2.5.

    Рис. 2.5. Поля в ячейках

    Если применяется стилевое свойство padding для ячеек таблицы, то действие атрибута cellpadding тега <table> игнорируется.

    Расстояние между ячейками

    Для изменения расстояния между ячейками применяется атрибут cellspacing тега <table> . Влияние этого атрибута хорошо заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. В качестве замены cellspacing выступает стилевое свойство border-spacing , оно устанавливает расстояние между границами ячеек. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений у этого свойства два, то первое определяет горизонтальное расстояние (т.е. слева и справа от ячейки), а второе — вертикальное (сверху и снизу).

    Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).

    Пример 2.5. Расстояние между границами ячеек

    XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

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

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

    Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing , поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).

    При добавлении к селектору TABLE свойства border-collapse со значением collapse , атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

    Границы и рамки

    По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега <table> . Браузеры по-разному отображают такую границу, поэтому лучше не указывать этот атрибут вообще, а рисование границ возложить на стили. Рассмотрим два метода, непосредственно связанных со стилями.

    Использование атрибута cellspacing

    Известно, что атрибут cellspacing тега <table> задаёт расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном выше примере 2.3 этот эффект показан, поэтому повторять его не буду.

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

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

    Стилевое свойство border одновременно устанавливает цвет границы, её стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать производные &#8212; border-left , border-right , border-top и border-bottom , эти свойства соответственно определяют границу слева, справа, сверху и снизу.

    Применяя свойство border к селектору TABLE , мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH &#8212; рамку вокруг ячеек (пример 2.6).

    Пример 2.6. Добавление двойной рамки

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

    Рис. 2.7. Граница вокруг таблицы и ячеек

    Обратите внимание, что в месте состыковки ячеек образуются двойные линии. Они получаются опять же за счет действия атрибута cellspacing тега <table> . Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать <table cellspacing=»0″> , то получим не двойные, а одинарные линии, но удвоенной толщины. Для изменения указанной особенности применяется стилевое свойство border-collapse со значением collapse , которое добавляется к селектору TABLE (пример 2.7).

    Пример 2.7. Создание одинарной рамки

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    В данном примере создается сплошная линия зеленого цвета между ячейками и черная вокруг таблицы. Все границы внутри таблицы имеют одинаковую толщину. Результат примера показан на рис. 2.8.

    Рис. 2.8. Граница вокруг таблицы

    Выравнивание содержимого ячеек

    По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег <th> , он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 2.8).

    Пример 2.8. Выравнивание содержимого ячеек по горизонтали

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    В данном примере содержимое тега <th> выравнивается по левому краю, а содержимое тега <td> &#8212; по центру. Результат примера показан ниже (рис. 2.9).

    Рис. 2.9. Выравнивание текста в ячейках

    Выравнивание по вертикали в ячейке всегда происходит по её центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align , как показано в примере 2.9.

    Пример 2.9. Выравнивание содержимого ячеек по вертикали

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    В данном примере устанавливается высота заголовка <th> как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10.

    Рис. 2.10. Выравнивание текста в ячейках

    Пустые ячейки

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

    Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor=»#ffcc00″></td> , поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел ( &nbsp; ). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

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

    Для управления видом пустых ячеек используется свойство empty-cells , при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:

    • нет вообще никаких символов;
    • в ячейке содержится только перевод строки, символ табуляции или пробел;
    • значение visibility установлено как hidden .

    Добавление неразрывного пробела &nbsp; воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).

    Пример 2.10. Пустые ячейки

    XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

    Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.

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

    Границы таблицы html – они бывают разными! Граница может иметь различные свойства, например начертание.

    Как обозначается граница таблицы!?

    Возьмем для примера совсем простую структуру таблицы 2 строки + 2 столбца.

    Для того, чтобы мы смогли увидеть границы таблицы их нужно как-то обозначить!

    Граница таблицы обозначается атрибутом «border». У котрого должно быть свойство — толщина и цвет.

    1. Если используется такая конструкция как в ниже идущей таблице — цвет указывать необязательно -по умолчанию это черный + начертание -по умолчанию линия.
    2. Если требуется изменить цвет, то следует добавить свойство цвета.

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

    Что мы здесь можем наблюдать!? Что таблица имеет двойные границы.

    Как обозначается граница таблицы!?

    Видео как сделать границу таблицы

    Видео сделано еще на старом оборудовании и качество не очень, если смотреть в разрешении 1920×1080, но как говорится, что есть, то есть. дл общего понимания вполне годится!

    Не забываем сказать спасибо! Я старался для вас!

    Как сделать одинарную границу у таблицы!?

    Вообще — такая двойная линия границы смотрится, по-моему мнению очень некрасиво, давайте попытаемся сделать её в одну линию.

    Добавляем в таблицу border-collapse:collapse;

    2.a. Либо в таблицу записываем атрибуты таким образом:
    <table border=»1″> 2.b. Либо через стили css:

    В таблице надо прописать класс:

    Результат будет в двух случаях аналогичный:

    Привет Привет
    Текст Текст

    Как сделать границу таблицы точками?

    Для того, чтобы сделать границу таблицы точками вместо solid ставим dotted.

    Сделать границу таблицы пунктирной линией.

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

    Для того, чтобы сделать границу таблицы пунктирной линией заменяем solid на dashed

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

    Скрыть наружную границу таблицы html

    Ну и напоследок. бывает такая ситуация, что требуется скрыть наружные границы таблицы — как это сделать!?

    Таблицы в HTML

    В этом уроке мы с вами научимся работать с таблицами в HTML.

    Для создания любой таблицы в HTML нужно всего 3 тега. Тег <table> создаёт саму таблицу. Тег <tr> создаёт одну строку внутри таблицы. Тег <td> создаёт одну ячейку внутри строки.

    Давайте создадим простейшую таблицу на новой страничке table.html:

    В браузере результат будет выглядеть так:

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

    По-умолчанию границы таблицы не отображаются. Чтобы сделать это добавим на страничку стили:

    CSS-свойство border позволяет задать стиль самой границы, а свойство border-collapse: collapse позволяет «схлопнуть» границы между ячейками. Если этого не сделать, табличка будет иметь довольно криповый вид — попробуйте и убедитесь сами.

    Чтобы добавить отступы внутри ячеек добавим к ним свойство padding:

    Объединение ячеек в HTML

    Зачастую несколько ячеек нужно объединить в одну. Объединять их можно как в строках, так и в столбах.

    Объединение ячеек по горизонтали

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

    Попробуем создать вот такую таблицу:

    Для этого добавляем в первой строке одну простую ячейку, потом вторую с атрибутом colspan=»2″, чтобы она заняла 2 ячейки. А после этого переходим на следующую строку и добавляем 3 простых ячейки:

    Объединение ячеек по вертикали

    Чтобы объединить ячейки по вертикали нужно воспользоваться атрибутом rowspan. Работает аналогично атрибуту colspan.

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

    Одновременное объединение по вертикали и горизонтали в одной таблице

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

    Что? Читаете дальше, даже не попытавшись? А ну давайте пробуйте!

    Если всё же не получилось, то вот ответ:

    Как выровнять таблицу по центру в HTML

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

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

    Как изменить размер таблицы в HTML

    Чтобы задать ширину и высоту таблицы можно воспользоваться CSS-свойствами width и height соответственно. Ими можно задать как абсолютные значения в пикселях, так и относительные в процентах (относительно размеров окна браузера). Эти же свойства можно применить отдельно к каждой ячейке/столбцу/строке.

    Результат:

    Границы ячеек таблицы не отображаются



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

    У меня есть класс invalid для ячеек таблицы, который имеет следующий CSS:

    th.invalid, td.invalid {
        border: 1px double #b8202a;
    }
    

    Используя отладчик Chrome, я вижу класс, примененный к ячейке, и я также вижу, что макет утверждает, что ячейка должна иметь указанную границу, но она не всегда имеет красные границы. Увеличение размера или типа границы между double и solid, по-видимому, не имеет никакого эффекта. Парение над ячейкой показывает, что границы существуют без цвета.

    Что я, вероятно, делаю не так? 🙂

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

    html css google-chrome
    Поделиться Источник vogomatix     23 июля 2014 в 10:12

    3 ответа




    5

    SOLVED

    Привет,

    У меня был такой же случай при использовании bootstrap 3.

    Проблема, которую я обнаружил, заключалась в свойстве css начальной загрузки:

    table {    
        border-spacing: 0;
        border-collapse: collapse; /* here is the devil */  
    }
    

    Я переписал его в своем собственном css by:

    table,
    table td {
        font-weight: bold;
        background-color: #fff;
        border-collapse: separate; /* This line */
    }
    

    Тогда это сработало..!

    Поделиться Amit Shah     07 сентября 2017 в 11:41



    1

    У вас, вероятно, есть какая-то ошибка в CSS, вот краткий пример FIDDLE

    <table>
      <tr>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
        <th>Text</th>
      </tr>
      <tr>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
        <td>Text</td>
      </tr>
    </table>
    

    table,
    th,
    td {
      border: 1px solid #666;
      border-collapse: collapse;
    }
    th.invalid,
    td.invalid {
      border: 1px double #b8202a;
    }
    

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

    th.invalid,
    td.invalid {
      border: 1px solid #b8202a;
    }
    

    Поделиться mdesdev     23 июля 2014 в 10:28



    -1

    попробуйте добавить !важно ниже кода

    th.invalid, td.invalid {
    border: 1px double #b8202a !important;
    }
    table.invalid
     border: 1px double #b8202a !important; 
    }
    tr.invalid
    {
    border: 1px double #b8202a !important;
    }
    

    Смотрите ссылку ниже для Fiddle

    Спасибо Маха

    Поделиться user3820621     23 июля 2014 в 10:23


    Похожие вопросы:


    Удаление границы из ячеек таблицы

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


    Не удается получить линии вокруг границ таблицы/ячеек

    У меня есть несколько веб-страниц, содержащих таблицы, для которых я хотел бы иметь линейные границы вокруг таблиц и ячеек. На самом деле некоторые из этих страниц существовали уже несколько лет и…


    Границы относительно расположенных ячеек таблицы. IE проблема отображения

    У меня есть проблема с установкой границ для ячеек таблицы, которые имеют стиль относительного положения: fiddle пример table { border-collapse: collapse; } td { border: 1px solid green; position:…


    Элемент управления веб-браузером не показывает границы ячеек HTMLTable

    У меня есть эта проблема weired с использованием webBrowserControl в C# (проверено с обоими VS 2005 и VS 2012, как я думал, более поздняя версия будет работать, но это не так). У меня есть…


    Границы таблиц не отображаются в Интернете Explorer

    У меня есть следующие css для тонких границ моих таблиц. Он работает в Хроне и Firefox, но не в IE8. table.list { border-width: 0 0 1px 1px; border-spacing: 0; border-collapse: collapse;…


    границы ячеек не отображаются в firefox

    У меня есть довольно простая таблица, в которой должны отображаться как границы таблицы, так и границы ячеек. Это прекрасно работает в Chrome и IE, но Firefox отображает только границу таблицы, а не…


    Границы ячеек в excel с PHP

    Я использую clean php для рисования таблицы excel: $xls .= Field\t\Cell1\t\Cell2\tCell3\r\n $xls .= chr(hexdec(‘FF’)) . chr(hexdec(‘FE’)) . $xls; //headers echo $xls; Есть ли какой-нибудь способ…


    Как полностью удалить границы таблиц для IE8

    У меня есть сайт, на котором есть много ячеек таблицы. Таким образом, границы таблицы должны быть удалены из таблицы. Мне действительно удалось удалить границы таблицы для FireFox и Chrome. Но на…


    Границы таблицы не отображаются должным образом, когда td равен position:relative

    У меня возникли проблемы с границами таблиц, которые не всегда правильно отображаются при выполнении следующих условий: Таблица содержится в div с overflow-y:scroll Границы свернуты на столе…


    границы ячеек не копируются с помощью специальной вставки

    Полный новичок в VB скриптов. Мой вопрос состоит из 2 частей: Мне нужно скопировать заголовок столбца 450 с одного листа excel на другой лист excel с данными. Заголовок имеет границы таблицы и…

    33. Таблицы · Неожиданный HTML

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

    Рассмотрим простейшую таблицу с одной строчкой и трема ячейками.

    <table>
    <tr>
        <td>Первая ячейка</td>
        <td>Вторая ячейка</td>
        <td>Третья ячейка</td>
    </tr>
    </table>
    

    За таблицу в целом отвечает тег <table> . Далее мы строим таблицу по строкам. За строку или ряд отвечает тег tr (table row). Внутри рядка мы можем добавлять ячейки, тег td.

    атрибуты rowspan, colspan

    Но иногда нам нужно сделать таблицу с более сложной структурой. Допустим мы хотим сделать следующую таблицу

    Для этого нам понадобится такой атрибут как rowspan. rowspan=2 означает, что ячейка вместо одно рядка будет занимать два, т.е. свой и тот что снизу от нее. Ячейка, на которое происходит распространение из html-кода таблицы убирается.

    <table>
    <tr>
        <td rowspan=2>
        
        </td>
    
        <td>
        
        </td>
    </tr>
    
    <tr>
        <td>
        
        </td>
    </tr>
    </table>
    

    border-collapse

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

    border-collapse:collapse — объединение границ ячеек и таблицы

    border-collapse:separate — границы ячеек и таблицы разделяются

    border-spacing

    Мы можем наладить отступ между границами таблицы и ячеек.

    border-collapse: separate;
    border-spacing: 15px;
    

    Использование свойства display

    Верстка таблицами — это очень, очень плохой тон, но никто не запрещает использовать нам display:table и table-cell для DIV’ов

    display:table;
    display:table-column;
    display:table-cell;
    

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

    Что нам это дает? В DIV’е c display:table-cell — начинает таки да работать выравнивание по вертикали vertical-align:middle. Таким образом, мы можем выровнять многострочный текст.

    Резиновые колонки с фиксированными полями

    1. http://colintoh.com/blog/display-table-anti-hero

    2. In Search of the Holy Grail

    3. http://www.mattboldt.com/kicking-ass-with-display-table/

    4. Проблемы с длинными словами в таблицах https://css-tricks.com/fixing-tables-long-strings/

    Верстка писем

    1. Основы верстки писем https://habrahabr.ru/post/180013/

    2. Проблемы с версткой писем https://spark.ru/startup/yorb/blog/30074/html-pisma-kak-ne-popastsya-na-obeschaniya-i-bistro-proverit-verstalschika

    3. 60 полезных ресурсов по емейл рассылкам https://habrahabr.ru/company/pechkin/blog/273677

    4. Примеры писем с оригинальным оформлением http://reallygoodemails.com/

    Практика:

    1. Сделать выравнивание многострочного текста по вертикали
    2. Сделать таблицу — вверху хедер и три колонки под ним

    3. Есть несколько строчек текста внутри div’a. Нужно выровнять их внутри блоков по центру по вертикали и горизонтали.
    4. Сделать колонки с фиксированными отступами между ними. Весь шаблон должен быть резиновым.
    5. Сделать резиновое меню. Меню растягивается на всю ширину. Отступы между всеми пунктами меню одинаковые.
    6. Делаем трехблочный шаблон — резиновый контент и два сайдбара по бокам.

    html — Как скрыть границу между двумя ячейками, сохранив при этом их разделение?

    Как я могу скрыть границу между этими двумя ячейками, сохраняя при этом их раздельные в коде HTML (т.е. без объединения ячеек с помощью colspan="2")? Смысл использования двух отдельных ячеек вместо одной объединенной ячейки состоит в том, чтобы иметь атрибут user-select: none только для первой ячейки.

    По возможности следует сохранить вид границ по умолчанию (см. Изображение).

    <table border=1>
      <tr>
        <td>1)</td>
        <td>Javascript</td>
      </tr>
    </table>

    Ожидаемый результат:

    Я использую Chrome .

    0

    oleedd 11 Ноя 2020 в 13:03

    3 ответа

    Лучший ответ

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

    table {
      border-collapse: collapse;
      border: double;
    }
    
    tr:first-child>td:first-child {
      border-right: none;
    }
    
    tr:first-child>td:nth-child(2) {
      border-left: none;
    }
    <table border=1>
      <tr>
        <td>1)</td>
        <td>Javascript</td>
      </tr>
    </table>

    Версия 2: границы по умолчанию — возможно только с перерывами на внутренних границах:

    tr:first-child>td:first-child {
      border-right: none;
    }
    
    tr:first-child>td:nth-child(2) {
      border-left: none;
    }
    <table border=1>
      <tr>
        <td>1)</td>
        <td>Javascript</td>
      </tr>
    </table>

    Версия 3: вложенная таблица в объединенной ячейке:

    table table {
      border: none;
    }
    <table border=1>
      <tr>
        <td colspan="2">
          <table>
            <tr>
              <td>1)</td>
              <td>Javascript</td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    2

    Johannes 11 Ноя 2020 в 10:57

    td {
      border: none;
    }
    table {
      border: double;
    }
    <table border=0>
      <tr>
        <td>1)</td>
        <td>Javascript</td>
      </tr>
    </table>

    Также вы можете просто указать border = 0 без атрибута стиля. Проверьте этот фрагмент.

    0

    Nirali Akabari 11 Ноя 2020 в 10:25

    Вы можете настроить стиль границы table. Замените цвета red и blue, как хотите.

    table {
      border: 1px solid red;
      padding: 4px;
      position: relative;
    }
    
    table:before {
      border: 1px solid blue;
      content: "";
      display: block;
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
    }
    
    td {
      border: none;
    }
    <table border=1>
      <tr>
        <td>1)</td>
        <td>Javascript</td>
      </tr>
    </table>

    1

    William Wang 11 Ноя 2020 в 10:35

    html — Применение границ ячеек таблицы

    html — Применение границ ячеек таблицы – 1 Ответ

    спросил

    Просмотрено 83k раз

    У меня есть таблица HTML с классом «productsTable».Я хочу дать каждой ячейке в таблице границу. Теперь я попробовал следующее в своей таблице стилей, но ни один из двух не работает. Что я делаю неправильно? Спасибо

      тд.продукцияТаблица
    {
        граница: 1px с точкой #999999;
    }
    
    .productsTable тд
    {
        граница: 1px с точкой #999999;
    }
      

    HTML:

      
    
    Мы предлагаем:
    электронный телефон БЕСПЛАТНО
    Личное
    Профессиональная АТС
    
    
    Цены
    БЕСПЛАТНО
    3 фунта стерлингов в месяц
    От 5 фунтов стерлингов в месяц
    
    
      

    спросил 28 мая 2012 в 10:57

    ЛовкийДэйвЛовкийДэйв

    6,2533333 золотых знака8282 серебряных знака130130 бронзовых знаков

    2

    тд.productsTable не будет работать , потому что у вас нет элементов с классом productsTable .

    Однако ваше второе правило CSS, .productsTable td , это будет работать , потому что у вас есть элементов , у которых есть родительский элемент с классом productsTable .

    Я быстро сделал это, и вы видите, что он работает правильно:

      тд {
      граница: 1 пиксель с точкой #999;
    }  
      
      
        Мы предлагаем:
        электронный телефон БЕСПЛАТНО
        Личное
        Профессиональная АТС
      
      
        Цены
        БЕСПЛАТНО
        3 фунта стерлингов в месяц
        От 5 фунтов стерлингов в месяц
      
      

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