html tr border color

Зависит от браузера и операционной системы.

HTML 4.01 IE Cr Op Sa Fx

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

Рис. 1. Вид рамки, созданной с помощью bordercolor, в браузере Internet Explorer

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

Содержание

[править] Пример простой таблицы

• — тег, который открывает и завершает (

  ) описание таблицы.

• border=»1″ — параметр, который включает отображение рамки (если этого параметра нет, и не назначен стиль CSS, то рамка у таблицы не отображается). [1]
• — описывает заголовок таблицы (необязателен). [2]
• — описывает строку (row) таблицы, внутри которой находятся ячейки ( и
  ).
• — описывает ячейку-заголовок таблицы. По умолчанию такие ячейки выделяются жирным шрифтом и центровкой.
• — описывает значение ячейки таблицы.
• border=»1″ — установка толщины рамки. [3]
• cellpadding=»5″ — отступы от рамки до текста внутри таблицы. [4]
• border-collapse: collapse; — стиль CSS, который убирает задвоенность рамки.
• border: 1px sol >[5] Для этой же цели можно использовать атрибут HTML bgcolor. [6]
• align=»bottom» — перемещение заголовка таблицы вниз (стиль «caption-s >[7] не отрабатывает в IE). [8]

Пример правильно отрабатывает в MediaWiki и в LiveJournal.

[править] Использование класса CSS

fpm_start( "true" );

Технология CSS позволяет приписать определенный стиль сразу всем таблицам документа (тег ), всего сайта (тег ), либо только для некоторых таблиц, указав для них имя класса (атрибут >[9]

Например, в CSS-описаниях движка MediaWiki, начиная с версии r48842, есть готовый стиль для таблиц. [10] Его можно использовать следующим образом:

[править] Назначение внешнего вида рамки

За это отвечают атрибуты HTML для тега :

Аналогично работает стиль border-width, однако рамка не отображается, если не установлен отличный от нуля атрибут border или стиль border-style. При одновременной установке толщины при помощи border-width и border, приоритет имеет border-width.

Можно указать от 1 до 4 значений толщины. [16]

[править] Цвет рамки

Цвет рамки можно установить при помощи атрибута bordercolor тега (отсутствует в стандарте HTML 4.01 и не поддерживается браузером Opera). [17] [18]

Для назначения цвета рамке имеется CSS-стиль border-color.

Это можно сделать также в одном выражении border-color, перечислив цвета через пробел (сверху по часовой стрелке):

Для указания цветов можно использовать шестнадцатеричные значения наподобие #aabbcc, см. wr:Цвета в HTML.

[править] Стиль рамки

Для назначения стиля рамки используется CSS-атрибут border-style.

При единичной толщине рамки в Internet Explorer версий 6 и ниже имеется ошибка для стиля dotted (он отображается как dashed): [19]

Для назначения разных стилей четырём сторонам рамки можно перечислить стили через пробел (сверху по часовой стрелке) в выражении border-style или использовать свойства border-bottom-style, border-top-style, border-left-style, border-right-style.

[править] Внутренняя и внешняя рамки

У таблицы, в общем случае, есть несколько рамок: это внешняя рамка таблицы и внутренние рамки ячеек. Их можно слить в одну рамку при помощи параметра CSS border-collapse (см. ниже), но если этого не сделано, то таблица и ее описание выглядят следующим образом:

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

[править] Расстояние между ячейками

Расстоянием между ячейками в показанном выше случае можно управлять при помощи атрибута тега cellspacing или атрибута стиля border-spacing (не работает в IE). [20]

При замере оказывается, что эти расстояния действительно составляют указанное число пикселей, причём, во всех трех браузерах (IE, Opera, Firefox).

[править] Объединённая рамка

Чтобы объединить смежные линии, используют атрибут стиля CSS border-collapse: collapse.

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

Однако, если внешнюю линию (прописанную для тега ) сделать более толстой, то картина меняется на следующую:

[править] Проблемы с назначением стиля внутренней рамки

Предположим, что мы хотим прописать чёрную тонкую рамку всем ячейкам таблицы, используя стиль border: 1px solid black к тегу .

К сожалению, разные браузеры «понимают» под этим разное: либо стиль внешней рамки (не включая внутренние линии таблицы), либо стиль вообще всех линий. Для назначения точного стиля внутренних рамок, который работает во всех браузерах, требуется описать его для внутренних ячеек ( и ). Это удобнее всего сделать в CSS-описании, при условии, что есть доступ к стилям CSS.

[править] Таблицы без рамки

Возможны таблицы совсем без рамки, с назначением только цвета фона у ячеек.

Пример правильно работает в MediaWiki и LiveJournal.

[править] Отрисовка рамок таблицы только вокруг групп

При помощи атрибута rules=»groups» тега можно нарисовать рамки вокруг групп, заданных тегами , , , или . Значение rules=»cols» или rules=»rows» тега позволяет отобразить рамку, соответственно, только вокруг колонок или строк.

[править] Расстояние от текста внутри таблицы до рамки

Для этого служит параметр CSS padding для содержимого ячейки , например: [21]

Для всей таблицы ( ) этот атрибут стиля «отдаляет» внешнюю рамку от внутренних ячеек (для IE это не работает).

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

I am trying to make the border for a table look something like the picture attached however it does not implement the border colors or anything. It might be something to do with the Bootstrap ‘table’ class.

Here is my code:
HTML:

4 Answers 4

Well, I don’t see any image attached. But am hoping this is what your in search off ! Try giving separate ID for each of TR and TD, then define their color in CSS ! Like shown in below example,

You have not specified the border-type as solid in your css. Without type, border styles never work.