Меню

Цвет бордюра таблицы html



Оформляем таблицы с помощью CSS: как работать с полями, границами и свойством z-index

Оформляем таблицы с помощью CSS: как работать с полями, границами и свойством. главное изображение

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

Эталонная таблица

Эталонный вариант таблицы

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

Выше представлена структура таблицы в HTML. В

содержится главное название. В таблице есть несколько секций

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

Что не так с margin и как оформить отступы для элементов таблицы

Как видно на иллюстрации в начале статьи, между главным заголовком и секцией

, а также между остальными секциями

, есть отступы. Можно подумать, что они определяются свойствами margin-top для

, но это не так.

Свойство border

Самый простой способ получить отступы без использования margin — применить к

border-top: 1 em .

Все секции

, у которых должны быть отступы, имеют класс .section . Чтобы свойство border-top сработало, необходимо применить к таблице border-collapse: collapse .

Псевдоэлементы ::before и ::after

Псевдоэлементы ::before и ::after — ещё один способ добавить отступы для элементов таблицы.

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

.

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

Как применить к элементам таблицы border-radius

Задача: добавить к секциям

границы и применить к ним border-radius . Напрямую это сделать невозможно — border и border-radius не работают с

.

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

Как оформлять ячейки таблицы

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

ячейчки

Нужны марджины, а не паддинги

После добавления границ можно заметить, что полученные отступы работают не как «марджины», а как «паддинги». Это можно изменить, если работать с границами ячеек и использовать селекторы :first-child и :last-child .

В примере выше стили применяются к соответствующим элементам th и td ячеек таблицы. К ячейкам, которые находятся в углах таблицы, применяется border-radius . Все ячейки, которые находятся по краям таблицы, имеют границы. Селекторы :first-child и :last-child позволяют обращаться к нужным ячейкам.

Как применять z-index к элементам таблицы

проблемы с box-shadow

Проблемы с box-shadow

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

В обычной ситуации можно использовать для решения таких проблем z-index . Но с таблицами всё сложнее: z-index не работает с

. Проблема решается, если вы знаете, как работать с контекстом наложения. Если применить к элементу position: relative и z-index , появляется новый контекст наложения. Также эту задачу можно решить с помощью transform: translate (0, 0) .

Заключение

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

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

Читайте также:  Значение широкого и узкого таза при беременности

Адаптированный перевод статьи Styling HTML Tables: How to Apply Margins, Borders and z-index on Table Elements by Markus Oberlehner. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

Источник

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

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

Содержание

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

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

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

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

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

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

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

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

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

Table border.PNG

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

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

Table class border-width word.PNG

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

Table class border-width.png

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

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

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

Table bordercolor.PNG

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

Назначение разных цветов рамке

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

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

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

Table class border-style.png

При единичной толщине рамки в 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]

Htms table cellspacing.PNG

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

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

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

Читайте также:  Классификация дорог в Инфографика от Росавтодора

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

Htms table border collapse.PNG

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

Htms table border collapse2.png

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

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

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

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

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

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

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

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

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

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

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

Table padding.png

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

Источник

Цвет бордюра таблицы html

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

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

Для начала создадим простую таблицу, состоящую из четырёх ячеек, в которых будут написаны короткие фразы.

Перед этим нужно понять следующее:

• Теги – объявляют таблицу.
border=» « – устанавливает толщину рамки таблицы.
• Теги – определяют табличный ряд (по вертикали).
• Теги – определяют ячейку (по горизонтали).

Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)
Первая ячейка (1,1) Вторая ячейка (1,2)
Третья ячейка (2,1) Четвёртая ячейка (2,2)

Параметр «color: » задаёт цвет текста, который будет написан внутри ячеек этой таблицы.

Отступы между ячейками и рамкой таблицы html

Существую два атрибута:

• cellspacing=» » – определяет расстояние между ячейками таблиц и рамкой самой таблицы.
• cellpadding=» » – определяет расстояние между границей ячейки и ее содержимым.

Источник

Цвет бордюра таблицы html

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

Получим:

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

Читайте также:  Таблица оценки показателей веса

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

Получаем:

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

Пример

Результат

создание таблицы

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

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

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

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

цвет границы

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

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

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

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

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

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

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

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

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

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

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

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

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

А в браузере

фон таблицы

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

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

Результат

фон строки в таблице

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

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

Результат

фон ячейки

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

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

фон ячейки в таблице

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

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

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

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

Результат

высота строки

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

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

Результат

ширина столбца

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

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

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

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

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

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

Источник