Цвет границ таблицы html: Атрибут bordercolor | htmlbook.ru

Html
1 Июл, 1976
0

Содержание

Как поменять цвет в таблице html

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

Не меняется цвет рамки таблицы
не могу понять почему не меняется на красный цвет <html> <head> <title> Товары и цены.

не получается задать размер и цвет рамки таблицы
что не так? пишу: <table style="border-color: black; border-width: 2px;"> но почему-то не.

Как изменить цвет границы таблицы в Опере?
Всем приве! Мне надо сделать чтобы граница таблицы была вот такого цвета: (205,255,254) Я написал.

Изменить цвет ячейки таблицы
Здравствуйте, подскажите пожалуйста, как изменить цвет ячейки таблицы в html при нажатии? Есть.

Стиль рамки таблицы в HTML и CSS

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

Содержание

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

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

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

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

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

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

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

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

border [11]
bordercolor [12]
cellspacing [13]
frame [14]
rules [15]

[править] Толщина рамки

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

Для border-width указывается числовое значение или синоним: thin (1-2 пиксела), medium (3-4 пиксела) и thick (5-6 пикселов), значения отличаются для разных браузеров. [16]

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

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

Цвет рамки можно установить при помощи атрибута bordercolor тега <table> (отсутствует в стандарте 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 (см. ниже), но если этого не сделано, то таблица и ее описание выглядят следующим образом:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стилизация таблиц

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

Необходимые знания:	Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS).
Цель:	Научиться эффективно стилизовать HTML таблицы.

Типичная HTML таблица

Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:

Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как scope (en-US) , <caption> , <thead> (en-US), <tbody> (en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):

Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.

Активное обучение: Стилизация таблицы

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

В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
Следующее, это создать новый файл style. css и сохранить его в той же папке вместе с другими файлами.
Подключить CSS в HTML для этого разместить следующую строку в HTML внутри <head> :

Отступы и разметка

Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш style.css файл:

Наиболее важные части следующие:

n-ый

На этом этапе наша таблица выглядит уже гораздо лучше:

Немного простой типографики

Теперь мы ещё кое-что изменим.

Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный <link> элемент и изменить объявление font-family на выбранный вами Google Fonts шрифт.

Добавьте элемент <link> в блок head вашего HTML, на строчку выше существующего элемента <link> :

Затем добавьте следующий CSS в ваш style.css файл, ниже предыдущего кода:

Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:

Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов <thead> (en-US) и <tfoot> , который подходит нам по тематике панков.
Мы добавили немного letter-spacing в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
Мы выравниваем по центру текст ячейках внутри <tbody> (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство text-align имеет значение left , а заголовки значение center , но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
Мы выровняли заголовок справа внутри <tfoot> так чтобы он визуально ассоциировался с соответствующими ему данными.

В результате таблица выглядит немного аккуратнее:

Графика и цвета

И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.

Следующий шаг это добавить следующий CSS в ваш style.css файл в самом низу:

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

Мы добавили background-image в <thead> (en-US), <tfoot> и изменили color (en-US) для всего текста внутри header и footer на белый (и ещё text-shadow ) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.

Также мы добавили линейный градиент для <th> (en-US) и <td> элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на <thead> (en-US) и <tfoot> элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают несколько фоновых изображений и линейные градиенты.

Полосатая зебра

Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать полосы зебры — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш style.css файл:

Ранее вы видели как :nth-child селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even , которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.
Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child .

Этот взрыв цвета выглядит следующим образом:

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

Стилизация заголовка

Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл style.css :

Здесь нет ничего особенного, кроме свойства caption-side (en-US) , которое имеет значение bottom . В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):

Активное обучение: Стилизация вашей собственной таблицы

Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.

Стилизация таблицы быстрые советы

Короткий список наиболее полезных вещей рассмотренных выше:

Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
Используйте table-layout (en-US) : fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину width для заголовков таблицы (<th> (en-US)).
Используйте border-collapse (en-US) : collapse , которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
Используйте <thead> (en-US), <tbody> (en-US) и <tfoot> чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
Используйте полоски зебры, чтобы облегчить чтение между строк.
Используйте text-align чтобы выровнять текст в <th> (en-US) и <td> для более аккуратного и удобного оформления.

Заключение

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

Как поменять цвет таблицы в html

Создание таблиц в HTML — фон таблицы — рамка таблицы — объединение ячеек

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

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

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

За создание таблиц в HTML отвечает тег <table> и закрывающий тег </table>. Но вам наверняка уже известно, что таблицы состоят из строчек и ячеек. Поэтому для того, чтобы создать таблицу, нам необходимы еще два тега: это тег <tr></tr> который отвечает за создание строк, и тег, <td></td> отвечающий за создание ячеек.

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

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

У вас должно получиться следующее:

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

Вначале мы рассмотрим атрибуты, которые присущи тегам <table></table>. Для того, чтобы видеть как будет меняться наша таблица, вы можете добавлять эти атрибуты к тегам <table></table> и, обновляя страницу, смотреть как будет выглядеть таблица в браузере. Для удобства я не буду приводить весь код страницы, а только код касающийся тега <table> т. е. то что мы будем изменять.

И так тег <table> имеет следующие атрибуты:

border — задает ширину рамки таблицы в пикселях, записывается так: <table border=»2″> </table>.

bordercolor – цвет рамки таблицы, данный атрибут поддерживает не все браузеры, поэтому вы можете и не увидеть заданный цвет рамки: <table border=»2″ bordercolor=»#548DD4″> </table>

Мы задали ширину рамки 2 пикселя, синего цвета, таблица примет следующий вид:

width – задает ширину таблицы в пикселях или процентах:

height – высота таблицы в пикселях или процентах: <table border=»2″ bordercolor=»#548DD4″> </table>

Ширина таблицы будет 250 пикселей, а высота 150 пикселей, таблица будет выглядеть так:

align – выравнивание таблицы;

align=left – таблицы будет выровнена по левому краю;

align=right – таблица будет выровнена по правому краю:

Наша таблица должна выровняться по правому краю.

bgcolor – цвет фона таблицы, bgcolor=#FFC000 – цвет фона таблицы будет желтый:

Таблица получит следующий вид:

background – при помощи данного атрибута можно задать изображение, которое будет фоном таблицы.

В качестве примера сохраните маленькое изображение, которое вы видите в скобках () в ту папку, где у вас находится страница с таблицей, а к тегу <table> добавьте background=»fon.gif » весь код:

Таблица примет следующий вид:

сellpadding – атрибут, задающий левый, правый, верхний и нижний отступы внутри ячейки. Например, если к нашему тегу <table> добавить сellpadding=10, то текст, написанный внутри ячеек, получит отступ.

cellspacing – задает отступ между ячейками таблицы.

Если вы присмотритесь к нашей таблице, то увидите, что между рамками ячеек имеется небольшое пространство, это и есть отступ между ячейками, он задается по умолчанию. Для того, чтобы его убрать, достаточно в теге <table> прописать cellspacing=0. Весь код:

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

hspace — задает промежуток от таблицы в лево и в право в пикселях, записывается так: hspace=20

nowrap – запрещает перенос слов в ячейке, записывается просто nowrap

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

Теперь рассмотрим атрибуты тега <td>, некоторые из них такие же, как и атрибуты тега <table>

width — ширина ячейки в пикселях или в процентах.

height – высота ячейки в пикселях или процентах.

Например, зададим ширину первой ячейки первой строки в 30% — width=30% , а высоту первой ячейки второй строки в 100px. Код будет таким:

Наша таблица примет следующий вид:

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

align – выравнивает содержимое ячеек, имеет следующие значения:

align=»lef» – содержимое ячейки будет выровнено по левому краю;

align=»right» – содержимое будет выровнено по правому краю;

align=»center» – содержимое будет выровнено по центру ячейки.

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

bgcolor – при помощи данного атрибута можно задать цвет ячейки.

background – устанавливает изображение в виде фона ячейки.

С данными атрибутами мы уже встречались, рассматривая атрибуты тега <table>. Работают они одинаково, только в этом случае ими задается фон ячейки. Например, зададим цвет фона 2-й ячейки желтым, а в качестве фона 4-й ячейки установим следующее изображение ().

Для этого в наш код добавим необходимые атрибуты, для наших ячеек bgcolor=»#FFFF00″ для 2-й ячейки и background= «fon. jpg» для 4-й ячейки. В результате наша таблица станет выглядеть так:

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

bordercolor – задает цвет рамки ячейки.

C этим атрибутом мы так же встречались, рассматривая атрибуты тега <table>. Напоминаю, что он работает не во всех браузерах. Обратите внимание на то, что у тега <td> нет атрибута border обозначающего рамку ячейки. Зададим цвет рамки 2 – й ячейки красным для этого ко второй ячейке добавим атрибут bordercolor=»#FF0000″

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

valign – он производит выравнивание содержимое ячеек по вертикали.

Имеет следующие значения:

valign=»top» – выравнивание содержимого ячейки по верхнему краю;

valign=»bottom» – выравнивание содержимого ячейки по нижнему краю;

valign=»middle» – выравнивание посередине ячейки;

valign=»baseline» – выравнивание содержимого ячейки по базовой линии.

Добавим эти атрибуты к каждой из наших 4-х ячеек.

Наша таблица примет следующий вид:

Последнее что нам необходимо рассмотреть в этом уроке, это объединение ячеек таблицы. Для того чтобы объединить несколько ячеек в строке, существует атрибут colspan=»» где в кавычках указывается количество ячеек которое необходимо объединить.

Чтобы объединить ячейки по вертикали т. е. в столбце, необходимо использовать атрибут rowspan=»» где в кавычках указывается количество ячеек, которое необходимо объединить.

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

Теперь объединим 1-ю и 2-ю ячейку в строке и 3-ю, 6-ю и 7-ю ячейку в ряду. Код нашей таблицы будет следующий:

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

Это были последние атрибуты ячеек. Как вы можете видеть атрибутов у тегов <table> и <td> множество. Это позволяет размещать в таблицах различное содержимое, позиционируя его и оформляя необходимым образом.

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

Как поменять цвет таблицы в html

Мы привыкли, что таблица состоит из строк и столбцов и, вставляя таблицу в Word, мы указываем 3 столбца на 2 строки. Вставляя таблицу на HTML-страницу, сначала мы должны показать что сейчас будет таблица. Для этого воспользуемся тэгом <TABLE>. Далее указываем, что сейчас будет строка, используя тэг <TR>. А в этой строке будет три ячейки, и мы пишем три раза <TD>…</TD>.

Получим:

Строка закончилась и мы должны ее закрыть </TR>.

Теперь начинается новая строка, открываем <TR>. Опять три ячейки — <TD>…</TD> записываем трижды. Строка закончилась </TR>. Таблица закончилась </TABLE>.

Получаем:

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

Пример

Результат

Как задать границу таблицы

Добавим границу. Для этого в <TABLE&gt; нужно указать border (граница) и ее толщину = 1.

Результат

Как изменить цвет границы

Изменим теперь цвет границы. Для этого в тэг <TABLE> нужно внести атрибут BORDERCOLOR и указать значение цвета.

Зададим цвет для границы зеленый.

Смотрим результат:

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

Как задать ширину таблицы

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

Замечание. Размер таблицы можно указывать в точках

или в процентах (в процентах от размера окна браузера)

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

Просмотрим результат в браузере:

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

Не всегда таблица должна располагаться по левому краю. Давайте расположим наш справочник по центру, для этого перед таблицей установим тэг <P ALIGN=”CENTER”>, а после таблицы его закроем:

Как закрасить таблицу

Давайте закрасим нашу таблицу желтым цветом. Для этого в тэге <TABLE> пропишем BGCOLOR и укажем цвет.

Наша страница будет иметь код:

А в браузере

Как закрасить строку

Теперь закрасим верхнюю строку (шапку) в зеленый. Мы хотим закрасить строку, поэтому и атрибут BGCOLOR должны указать в тэге TR.

Результат

Как закрасить ячейку

Дополним нашу таблицу данными еще нескольких человек

Результат

Теперь давайте закрасим столбец с нумерацией. Так как в HTML нет понятия столбец, то на первый взгляд это выглядит затруднительно. Но на самом деле все довольно просто: в каждой строке нужно закрасить первую ячейку. То есть в тэге <TD> прописать атрибут BGCOLOR и указать цвет

В браузере вы увидите такую таблицу:

Как задать высоту таблицы (строки)

HTML дает возможность задать как высоту всей таблицы, так и отдельных строк.

Для задания высоты таблицы атрибут HEIGHT нужно указать в тэге TABLE, а чтобы изменить высоту отдельной строки – указать этот атрибут в тэге TR.

Для примера увеличим высоту первой строки

Результат

Как изменить ширину столбца

Теперь увеличим ширину первого столбца. Так как в HTML нет понятия столбец, то нам придется указать ширину первой ячейки верхней строки.

Результат

Выравнивание содержимого таблицы (по горизонтали и вертикали)

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

И если с выравниванием по вертикали все понятно (у тэгов TABLE, TR и TD есть атрибут ALIGN). То как выровнять по горизонтали не совсем понятно.

Для выравнивания содержимого таблицы, строки или ячейки по горизонтали существует атрибут VALIGN. И этот атрибут имеет свои параметры TOP (выравнивание по верхнему краю), MIDDLE (по середине), BOTTOM (по нижнему краю).

Для нашей шапки установим выравнивание по центру, по середине.

Также выровняем содержание ячеек с нумерацией и телефонами по центру.

Как поменять цвет таблицы в html

HTML-таблицы используются для логического структурирования контента. Они состоят из строк и ячеек которые можно объединять. В этой статье вы найдете подробное руководство по созданию HTML-таблиц с нуля. Материал рассчитан на новичков — школьников и студентов первых курсов. Рассмотрим как создаются таблицы в HTML.

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

Как сделать таблицу в HTML?

Таблицы создаются они с помощью тега <table> который имеет закрывающий тег </table>. Код самой простой таблицы из двух строк и столбцов выглядит следующим образом.

Результат выполнения кода будет следующим.

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Стиль по умолчанию:
display: table;
border-collapse: separate;
box-sizing: border-box;
text-indent: initial;
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-style: normal;
color: -internal-quirk-inherit;
text-align: start;
border-spacing: 2px;
border-color: grey;
font-variant: normal;

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

В стилях таблиц по умолчанию граница отсутствует. Добавить границы можно с помощью HTML-кода и с помощью CSS.

Устанавливает границу равную 1 пикселю, серого цвета. Равнозначным будет CSS-код:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

Цвет границ задается с помощью bordercolor, а размер с помощью border.

Как убрать внутренние границы таблицы?

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Строка таблицы

Как вы уже догадались строка таблицы задается с помощью тега <tr> (от англ. table row — строка таблицы). Элемент <tr> является контейнером содержащим ячейки таблицы. Ячейки вне этого контейнера будут неправильно отображаться на экране.

Ячейки таблицы

Ячейки таблицы создаются с помощью тега <td> (от англ. able data — данные таблицы), который вкладывается в <tr>. Думаю со строками и ячейками все понятно.

Заголовок таблицы

Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.

Для создания заголовка таблицы используется тег <caption>. Он идет сразу после тега <table> и задает название таблицы.

Для создания заголовка столбца используется тег <th> (от англ. table head — заголовок таблицы).

Все это немного запутано, правда? Давайте разбираться на примере.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Таблица по центру

Часто возникает необходимость выровнять таблицу по центру документа. Тут есть два варианта (как и с границей).С помощью HTML-кода добавить атрибут align со значением center тега <table>.

Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.

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

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

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

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Размер шрифта

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

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.

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

Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.

Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.

Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;

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

top — по верхнему краю.
middle — по середине.
bottom — по нижнему краю.
baseline — по базовой линии.

Отступы в таблице

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

Отступы от границ ячеек. С помощью HTML задать отступы можно используя атрибут cellpadding тега <table>. Давайте увеличим отступ содержимого в ячейках нашей таблицы.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td .

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

Довольно важный момент в HTML-таблицах это объединение ячеек.

Объединение может быть горизонтальным.

Для горизонтального объединения ячеек используется атрибут colspan. Соответственно если у нас 4 ячейки, а мы объединяем две по горизонтали, то в первой строке у нас будет одна ячейка. Разберемся на примере.

Таблица сотрудников фирмы

ФИО	Должность
Руководящий состав:
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер

Оформление HTML-таблиц

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

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

Изменение цвета фона таблицы

Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер

Изменить цвет ячейки (или строк)

Цвет строки или ячейки изменятся с помощью того же атрибута. Для меня удобно менять цвет фона строки в больших таблицах – тогда визуально таблица воспринимается гораздо лучше.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер

Картинки в ячейке

Давайте сделаем вот что. Добавим Справа фото сотрудников. Если фотографии сотрудника нет, то мы сделаем полупрозрачное фоновое изображение и напишем, что фото нет.

Итак, изображение вставляется стандартным способом с помощью тега <img>. Подробнее вы можете почитать тут.

А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.

Таблица сотрудников фирмы

ФИО	Должность	Фото
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер	Нет фото

Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.

Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).

Кнопки и элементы управления

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

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

Скролл или прокрутка таблицы

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

Таблица сотрудников фирмы

ФИО	Должность	Фото	Написать
Иванов Иван Иванович	Директор		Написать директору
Иванов Иван Иванович	Главный бухгалтер	Нет фото	Написать бухгалтеру

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

Генератор HTML-таблиц

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

В Firefox настройка цвета границы таблицы

то есть установите bordercolor ниже, чтобы установить, но Firefox не работает ниже, просто используйте следующий код

Код выглядит следующим образом:

<style type="text/css">
			 #table 
			 { 
			 	border:1px solid;
			 	border-color:#d1e1f0;
			 }
			 #table td
			 { 
			 	border:1px solid;
			 	border-color:#d1e1f0;
			 }
			 #table th
			 { 
			 	border:1px solid;
			 	border-color:#d1e1f0;
			 }
</style>
<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

Два дополнительных содержания прилагаются. Я не знаю, куда я их перенес . ..

Ключевые слова: таблица тонких линий, навыки работы с таблицами, код таблицы тонких линий, таблица тонких линий CSS

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

Я не знаю, как опубликовать html после выполнения. Это весь код. Это на самом деле не интуитивно понятно.

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

<style>

* { font-size:90%;}

font { color:#0000CC;}

</style>

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

</ font> Неудобно устанавливать цвет фона для каждой строки.

<table border=»0″ cellspacing=»1″ cellpadding=»0″

bgcolor=»#000000″>

</tr>

</tr>

</table>

<br />

<font> Следующая таблица с тонкими линиями реализуется путем установки bordercolordark </ font>, потому что граница по умолчанию фактически имеет ширину 2, даже если она установлена в 1, она бесполезна, bordercolorlight и bordercolordark вместе в качестве границы таблицы. Таким образом, установка одного из них в качестве цвета фона сделает границу таблицы более тонкой.

<table border=»1″ cellspacing=»0″ cellpadding=»0″

bordercolor=»#000000″ bordercolordark=»#FFFFFF»>

</tr>

<tr>

</tr>

</table>

<br />

<font> Следующая таблица реализована с помощью CSS. </ font> <br />

Есть много навыков CSS, некоторые из них перечислены:

A: Установите border = «1», bordercolor, plus style = «border-collapse: collapse;». Содержание в стиле CSS.

<table border=»1″ bordercolor=»#000000″ cellspacing=»0″

cellpadding=»0″>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

B: При этом используется css для установки границы. В результате отображается только самая внешняя граница таблицы. Строки внутри не отображаются.

<table cellspacing=»0″ cellpadding=»0″

style=»border:#000000 1px solid;»>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

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

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

Добавьте тег стиля в заголовок и напишите таблицу {border-collapse: collapse;} td {border: # 000000 1px solid;}, все таблицы на этой странице — тонкие линии.

<style>

#tab1 {border-collapse:collapse;}

#tab1 td {border:#000000 1px solid;}

</style>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

<font> Другие методы контроля границ таблицы (правила и фрейм): </ font> <br /> Описание: <br />

1. Эти два свойства иногда не действуют, это связано с конфликтами с настройками css границы таблицы. Поэтому, если вам нужны эти эффекты и тонкие линии, установите эти три свойства следующим образом: border = «1» bordercolor = «# 000000» style = «border-collapse: collapse;» Затем настройте правила и фрейм, если вы опробовали другие методы, надеюсь опубликовать и поделиться со всеми.

<br />

2. Следующие эффекты — это те, которые я перечислил для демонстрации: гибкая настройка этих свойств может дать больше эффектов. <br />

Эффект rules = «cols» (горизонтальная линия посередине пропала)

<table border=»1″ bordercolor=»#000000″

style=»border-collapse:collapse;» rules=»cols»>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

Эффект frame = «void» (внешняя линия исчезла)

<table border=»1″ bordercolor=»#000000″

style=»border-collapse:collapse;» frame=»void»>

<tr>

</tr>

<tr>

</tr>

</table>

<br />

Эффект объединения правил с фреймом (frame = «hsides» rules = «rows», оставляя только горизонтальные линии)

<table border=»1″ bordercolor=»#000000″

style=»border-collapse:collapse;» frame=»hsides» rules=»rows»>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Что атрибут HTML Bordercolor делает с вашими таблицами? [Подсказка: Цвет!] »

В атрибутах HTML

Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Узнайте больше

Атрибут: Создайте таблицу HTML быстро и легко с помощью нашего примера кода
Что делает Что делает атрибут HTML Bordercolor с вашими таблицами? [Подсказка: Цвет!] делать?: Используется для указания цвета границ таблицы. Этот атрибут устарел. Используйте CSS для оформления границ таблицы.

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

БОРДЕРЦОЛОР Атрибут

В этом разделе мы рассмотрим настройку цветов границ таблицы. Во-первых, мы рассмотрим настройку границ одного цвета. Далее мы рассмотрим установку светлых и темных оттенков границы.

Цвет границ таблицы в целом задается атрибутом BORDERCOLOR тега

Например, этот код устанавливает красную границу:

Вот как это выглядит:

морковь	чеснок
сельдерей	лук

Морковь	Чеснок
Секрета	лук

Netscape и MSIE имеют очень различные способы рендеринга 449

. Netscape поддерживает трехмерный внешний вид. MSIE отображает все границы одного цвета, делая границу плоской. MSIE также устанавливает цвет внутренних границ.

Браузер	Как это выглядит
Internet Explorer
Netscape

`Границы таблицы: светлые и темные`

В предыдущем примере мы установили один цвет для всех границ таблицы. На этой странице мы рассмотрим настройку «светлых» и «темных» границ по отдельности. Обратите внимание, что в настоящее время только MSIE распознает разметку, необходимую для раздельной установки светлых и темных границ.

Визуальные веб-браузеры, такие как Netscape и MSIE, отображают границы таблиц в трехмерном виде. Они делают это, делая верхнюю и левую границы светлее, чем нижние правые границы. Это делает стол таким, как будто он частично находится под источником света, а частично в тени. Если вы визуализируете источник света сверху и слева от таблицы, вам будет легче запомнить, какие границы светлые, а какие темные.

Устанавливаем светлую и темную границы с помощью BORDERCOLORLIGHT и BORDERCOLORDARK . Так, например, этот код устанавливает для светлых границ желтые, а для темных — синие:

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

  
    бла-бла-бла
    да да да
  
  
    что угодно
    Давай!
  

 
 бла-бла-бла  да да да
 что угодно  прямо сейчас!
 Использование всех трех атрибутов 
 BORDERCOLOR  одновременно Netscape и MSIE распознают  BORDERCOLOR  , но в настоящее время только MSIE распознает  BORDERCOLORLIGHT  и  ЦВЕТ ГРАНИЦЫ ТЕМНЫЙ  . Однако вы можете использовать все три сразу, потому что MSIE игнорирует  BORDERCOLOR , если находит  BORDERCOLORLIGHT  и  BORDERCOLORDARK  . Вы можете использовать эту функцию, чтобы немного больше контролировать цвета границ, чем если бы вы использовали только один или два из этих атрибутов.
 Например, этот код указывает, что общий цвет рамки — синий, но также указывает, что светлая часть — светло-голубая, а темная часть — обычный синий:
 <ГРАММА ТАБЛИЦЫ=10 BORDERCOLOR="#0000FF" BORDERCOLORLIGHT="#33CCFF" BORDERCOLORDARK="#0000CC">
  
    бла-бла-бла
    да да да
  
  
    что угодно
    Давай!
  

 
 Вот как этот код отображается в браузере, но обратите внимание, что это устаревший атрибут, и он может неправильно отображаться в современных браузерах.
 бла-бла-бла  да да да
 как угодно  сразу!
 Адам Вуд
 Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.
 Поиск на HTML.com
 Поиск: Самые популярные
  Тег HTML
 Использование тега HTML для создания встроенных фреймов: вот как
 Шаблон ввода: используйте его для добавления базовой проверки данных в HTML5
 Тег HTML Body: освойте самый важный HTML-элемент сейчас
 HTML-элемент P: вот код для определения текста абзаца
 border-color — CSS: Каскадные таблицы стилей 
 Свойство CSS   border-color   устанавливает цвет границы элемента.
 Каждая сторона может быть установлена индивидуально с помощью  border-top-color  ,  border-right-color  ,  border-bottom-color  и  border-left-color  ; или используя режим записи  border-block-start-color  ,  border-block-end-color  ,  border-inline-start-color  и  border-inline-end-color  .
 Дополнительную информацию о цветах границ можно найти в разделе Границы в разделе Применение цвета к элементам HTML с помощью CSS.
 Это свойство является сокращением для следующих свойств CSS:
  цвет нижней границы 
  граница левая 
  граница правого цвета 
  цвет верхней границы 
 /* значения  */
цвет границы: красный;
/* сверху и снизу | Лево и право */
цвет границы: красный #f015ca;
/* сверху | влево и вправо | нижний */
цвет границы: красный rgb(240, 30, 50, 0,7) зеленый;
/* сверху | право | дно | оставил */
цвет границы: красный желтый зеленый синий;
/* Глобальные значения */
цвет границы: наследовать;
цвет границы: начальный;
цвет границы: вернуться;
цвет границы: обратный слой;
цвет границы: не установлен;
 
 Свойство  border-color  может быть указано с использованием одного, двух, трех или четырех значений.
 Когда  указано одно значение , применяется один и тот же цвет ко всем четырем сторонам   .
 Когда  указаны два значения , первый цвет применяется к верхнему и нижнему   , второй — к левому и правому   .
 Когда  указаны три значения , первый цвет применяется к 9 верхним 0006 , второй до  слева и справа  , третий до  внизу  .
 Когда  указаны четыре значения , цвета применяются к  верхнему  ,  правому  ,  нижнему  и  левому  в указанном порядке (по часовой стрелке).
 Значения 
  <цвет> 
 Определяет цвет границы.
 цвет границы = 
 <цвет>{1,4} 
 Полное использование цвета границы 
 HTML 
 
  border-color: red; эквивалентно
  <ул>
    border-top-color: красный;
    правый цвет границы: красный;
    border-bottom-color: красный;
    border-left-color: красный;
  

<дел>
  border-color: gold red; эквивалентно
  <ул>
    border-top-color: gold;
    правый цвет границы: красный;
    border-bottom-color: gold;
    border-left-color: красный;


<дел>
border-color: красно-голубой золотой; эквивалентно
<ул>
border-top-color: красный;
цвет правой границы: голубой;
border-bottom-color: gold;
цвет левой границы: голубой;


<дел>
border-color: красный, голубой, черный, золотой; эквивалентно
<ул>
border-top-color: красный;
цвет правой границы: голубой;
border-bottom-color: черный;
border-left-color: gold;


 CSS 
 #justone {
  цвет границы: красный;
}
#горцверт {
  цвет границы: золотой красный;
}
#топвертботт {
  цвет границы: красно-голубое золото;
}
#trbl {
  цвет границы: красное голубое черное золото;
}
/* Установить ширину и стиль для всех элементов div */
дел {
  граница: сплошная 0,3 см;
  ширина: авто;
  поле: 0,5em;
  набивка: 0,5 см;
}
ул {
  маржа: 0;
  стиль списка: нет;
}
 
 Результат 
 Спецификация
 Неизвестная спецификация 
  # логическое-сокращенное-ключевое слово 
 Неизвестная спецификация 
  # цвет границы 
 Таблицы BCD загружаются только в браузере
 с включенным JavaScript. Включите JavaScript для просмотра данных. Свойства CSS, связанные с цветом границы:  border  ,  border-top-color  ,  border-right-color  ,  border-bottom-color  ,  border-left-color  ,
 Другие свойства CSS, связанные с границами:  ширина границы  ,  стиль границы 
 Тип данных   
 Другие свойства, связанные с цветом:  цвет  ,  цвет фона  ,  цвет контура  ,  цвет текста-декорации  ,  цвет выделения текста  ,  цвет тени  ,  Caret , и  цвет правила столбца 
 Применение цвета к элементам HTML с помощью CSS
  Последнее изменение:   27 сентября 2022 г.  , авторы MDN
 html — Как изменить цвет границы одной строки таблицы? 
 Спросил  5 лет, 7 месяцев назад 
 Изменено
2 года, 3 месяца назад
 Просмотрено
18 тыс. раз
 Я пытаюсь выделить строку таблицы, изменив цвет границы этой отдельной строки. Это моя таблица CSS:
 {граница-коллапс: коллапс;}
    td { минимальная ширина: 100 пикселей; граница: 1px сплошной зеленый; }
    .highlight td { border: 1px сплошной оранжевый; }
 
 ...и это мой HTML:
 
        <тд>1
        
        <тд>3
        <тд>4
    
        <тд>5
        <тд>6
     Результат такой:
 Верхняя граница остается зеленой. Единственный способ, которым я мог заставить это работать, - это изменить цвет нижней границы элементов TD 1 и 2. Есть ли более элегантное решение? Использование свойства структуры не помогло. Спасибо!
 html
 css
 html-таблица
 Только путем удаления  border-collapse: свернуть; , потому что он объединяет соседние границы.
 Затем примените значение  0  для  border-spacing 
  Border-spacing : MDN 
 Свойство CSS border-spacing указывает расстояние между границами соседних ячеек таблицы (только для модели с разделенными границами). Это эквивалентно атрибуту cellpacing в презентационном HTML, но необязательное второе значение может использоваться для установки различных интервалов по горизонтали и вертикали.
 таблица {
  /*граница-коллапс: коллапс;*/
  расстояние между границами: 0;
  размер шрифта: 32px;
}

тд {
  минимальная ширина: 100 пикселей;
  граница: 3 пикселя сплошного зеленого цвета;
}

.highlight тд {
  цвет границы: оранжевый;
}
/* необязательное улучшение для сужения вертикальных границ соединения*/
тд + тд {
  граница слева: 0;
} 
 <таблица>
    
        <тд>1
        
        <тд>3
        <тд>4
    
        <тд>5
        <тд>6
     1
 попробуйте эту
 таблицу {граница-коллапс: коллапс;}
тд {минимальная ширина: 100px;}
td:first-child{border-right: 1px сплошной зеленый;}
tr{граница: 1px сплошной зеленый;}
tr. highlight td { border: 1px сплошной оранжевый; граница сверху: 1px сплошной оранжевый; }
 
 вы должны указать границы для строк и td, которые являются первыми дочерними элементами, а затем применить другой цвет для границы выделенного tr.
 Чтобы исправить это, присвойте вашему tr a  display  свойство  блок  . См. фрагмент кода ниже.
 таблица {
 ширина: 100%;
 граница коллапса: коллапс;
}
тр {
 ширина: 100%;
 дисплей: блок;
}
тд {
 минимальная ширина: 100 пикселей;
 выравнивание текста: по центру;
 граница: 1px сплошной зеленый;
 /*
 Удалить левую границу из td
 сделать ширину границы ровной
 на всех сторонах.
 */
 граница слева: нет;
}
td: первый ребенок {
 /*
 Если td является первым ребенком
 дайте ему левую границу, чтобы закрыть
 левая сторона ряда.
 */
 граница слева: 1 пиксель сплошной зеленый;
}
.highlight тд {
 /*
 Поскольку вы меняете только
 цвет границы, вам нужно только
 переопределить цвет границы.No related posts.
Вперед Ide для c windows: Топ-8 популярных IDE для программирования на C++
Назад Как сделать 3d: Как сделать свою первую 3D-модель? / Хабр
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт 
  
 
 
Рубрики
Css
Html
Http
Javascript
Photoshop
Верстка
Вопросы и ответы
Макет
Развитие сайтов
Сайт
Шаблон
Шрифт
Разное
Рубрики
Css
Html
Http
Javascript
Linux
Photoshop
Адаптив
Верстка
Вопросы и ответы
Макет
Развитие сайтов
Разное
Сайт
Советы
Шаблон
Шаблоны
Шрифт
Шрифты
 Блог сумасшедшего сисадмина © 2024. Все права защищены.
Карта сайта
   

    2
    
    
    

 2

бла-бла-бла	да да да
что угодно	Давай!

бла-бла-бла	да да да
как угодно	сразу!