Таблицы и стили | htmlbook.ru

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

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

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

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов.

Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона (пример 1).

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: maroon; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
   }
   TD {
    background: navy; /* Цвет фона ячеек */
   }
  </style>
 </head> 
 <body>
  <table cellpadding="4" cellspacing="1">
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
   }
   TD, TH {
    background: maroon; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table cellspacing="1">
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    background: #dc0; /* Цвет фона таблицы */
    border: 5px double #000; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 5px; /* Поля вокруг текста */
    border: 1px solid #fff; /* Рамка вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные границы между ячейками */
    background: #dc0; /* Цвет фона таблицы */
    border: 4px solid #000; /* Рамка вокруг таблицы */
   }
   TD, TH {
    padding: 5px; /* Поля вокруг текста */
    border: 2px solid green; /* Рамка вокруг ячеек */
   }
  </style>
 </head>
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

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

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

При добавлении border-collapse: collapse значение атрибута cellspacing тега <table> игнорируется.

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    width: 300px; /* Ширина таблицы */
   }
   TH { 
    background: #fc0; /* Цвет фона ячейки */
    text-align: left; /* Выравнивание по левому краю */
   }
   TD {
    background: #fff; /* Цвет фона ячеек */
    text-align: center; /* Выравнивание по центру */
   }
   TH, TD {
    border: 1px solid black; /* Параметры рамки */
    padding: 4px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><td>Ячейка 1</td><td>Ячейка 2</td></tr>
   <tr><th>Заголовок 2</th><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Таблицы</title>
  <style type="text/css">
   TABLE {
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    width: 300px; /* Ширина таблицы */
   }
   TH, TD {
    border: 1px solid black; /* Параметры рамки */
    text-align: center; /* Выравнивание по центру */
    padding: 4px; /* Поля вокруг текста */
   }
   TH {
    background: #fc0; /* Цвет фона ячейки */
    height: 40px; /* Высота ячеек */
    vertical-align: bottom; /* Выравнивание по нижнему краю */
    padding: 0; /* Убираем поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr>
  </table>
 </body>
</html>

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

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

border-color — цвет рамки | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

CSS свойство border-color задает цвет рамки для элемента. Можно использовать от 1 до 4 значений, разделяемых между собой пробелами. Цвет устанавливается начиная с верхней позиции. Если задано два цвета подряд, это значит первое значение для верхней и нижней границы, второе значение для правой и левой границы.

Пример:

  • border-color: red green blue pink;
    • Верхняя рамка — красная
    • Правая рамка — зеленая
    • Нижняя рамка — синяя
    • Левая рамка — розовая
  • border-color: red green blue;
    • Верхняя рамка — красная
    • Правая и левая рамка — зеленые
    • Нижняя рамка — синяя
  • border-color: red green;
    • Верхняя и нижняя рамка — красные
    • Правая и левая рамка — зеленые
  • border-color: red;
    • Все 4 рамки — красные

Примечание: свойство border-color используется только в паре с border-style, так как без него, оно не даст никакого эффекта.

Значение по умолчанию: совпадает с цветом текста
Применяется: ко всем элементам, а также к псевдо-элементу ::first-letter
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.borderColor=»#FF0000 blue»

Синтаксис

border-color: цвет|transparent|inherit;

Значения свойства

Значение Описание
цвет Цвет рамки, который можно установить различными способами, например: указать название цвета, использовать шестнадцатеричные значения (HEX) или с помощью синтаксиса RGB.
transparent Указывает, что цвет рамки должен быть прозрачным.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

border-color:

red

blue

red green blue yellow

red green

#000000

#ff9900

rgb(255,255,255)

rgb(255,130,255)

transparent

div {
border-style: solid;
border-width: 5px;
border-color: red;
}

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

В атрибутах HTML

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

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

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

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

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

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

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

 

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

морковь чеснок
сельдерей лук
Морков Чеснок
Секрета лук

Netscape и MSIE имеют очень различные способы рендеринга . 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">
  
    бла-бла-бла
    да да да
  
  
    что угодно
    Давай!
  

 

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

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

Адам Вуд

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

Search HTML.com

Search for:

Most Popular

  • Тег HTML
  • Тег HTML Body: Master The Most Important HTML Element Now
  • Тег HTML</li><li> Элемент HTML P: вот код Определение текста абзаца</li><li><meta> Тег HTML</li></ul><h2><span class="ez-toc-section" id="_HTML_10"> Граница таблицы в HTML | 10 способов определения границы таблицы с примерами </span></h2><p></p><p> Граница таблицы в HTML используется для отображения границы вокруг содержимого таблицы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/codingdeekshi.com/wp-content/uploads/2022/05/HTML-color-codes-and-names.png' /><noscript><img loading='lazy' src='/800/600/http/codingdeekshi.com/wp-content/uploads/2022/05/HTML-color-codes-and-names.png' /></noscript> Это можно установить вокруг таблицы, указав такие значения, как 0, если вокруг ячеек таблицы не отображается граница, тогда как значение 1 задается для отображения границы вокруг ячеек таблицы. Ширина таблицы может быть установлена ​​в числовых значениях, чтобы определить, насколько толстые границы пользователи хотят разместить вокруг своей таблицы. Границу можно установить либо на всю таблицу, либо на определенную строку или столбец, либо только на заголовок таблицы; все возможно.</p><h4><span class="ez-toc-section" id="_HTML"> Синтаксис границы таблицы в HTML </span></h4><p> Существует несколько способов определения границы таблицы; давайте посмотрим синтаксис для них один за другим:</p><p> <strong> 1. Общая граница таблицы: </strong> Обычно используется для определения простой границы вокруг таблицы, например:</p><pre> <table border="1 | 0"> </pre><p> <strong> Пример : </strong></p><pre> стол, т, тд{ граница: 1px сплошной синий; } </pre><p> <strong> 2. Граница сворачиваемой таблицы: </strong> Это свойство используется для установки сворачиваемой границы в одну строку вокруг нашей таблицы с помощью свойства border-collapse.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/z/ZQHCou462aiwEmFnIb7sApRWNGryDYSL3XkOBK/slide-3.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/z/ZQHCou462aiwEmFnIb7sApRWNGryDYSL3XkOBK/slide-3.jpg' /></noscript></p><pre> таблица{ граница коллапса: коллапс; } </pre><p> <strong> Пример: </strong></p><pre> таблица{ граница коллапса: коллапс; } стол, й, тд{ граница: 0px; } </pre><p> <strong> 3. Граница вокруг таблицы: </strong> Это свойство позволяет нам добавлять границу таблицы только по внешним краям, а не к каждой отдельной ячейке таблицы, просто как:</p><pre> table { граница: 1px; } </pre><p> <strong> 4. Точечная граница таблицы: </strong> можно просто добавить пунктирную границу в качестве границы к своей таблице, используя следующий синтаксис: <strong>   </strong></p><pre> таблица{ граница: 1px; пунктирное название цвета; } </pre><p> <strong> 5. Штриховая граница таблицы: </strong> Как и пунктирная, мы можем установить пунктирную границу вокруг нашей таблицы или ячеек таблицы. Это может быть тонкий или толстый по выбору пользователя путем установки значения.</p><pre> таблица{ граница: 3px; пунктирное название цвета; } </pre><p> <strong> 6. Двойная граница таблицы: </strong> Если мы хотим добавить двойной контур к нашей таблице, это также возможно, установив свойство в коде CSS и создав двойную рамку вокруг таблицы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/8/8/88850513fc759724ca0c8bf9180e732f.png' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/8/8/88850513fc759724ca0c8bf9180e732f.png' /></noscript></p><pre> таблица{ граница: 1px; двойное название цвета; } </pre><p> <strong> 7. Граница таблицы вокруг ячеек таблицы: </strong> Этот синтаксис помогает нам задать границу вокруг отдельных ячеек или любой конкретной ячейки таблицы с вашим любимым цветовым кодом. В этом синтаксисе мы хотим добавить значение кода границы для каждой ячейки отдельно.</p><pre> таблица{ граница: 1px; пунктирное название цвета; } й { граница: 1px; название цвета; } тд { граница: 2px; название цвета; } </pre><p> <strong> 8. Граница таблицы с классами CSS: </strong> вместо того, чтобы устанавливать границу для каждой отдельной ячейки таблицы, классы CSS помогают нам задать общий код границы для нашей таблицы. Это можно сделать с помощью следующего синтаксиса:</p><pre> <стиль> стол{ цвет фона: название цвета; } стол й { CSS-код } таблица тд { CSS-код } </style> </pre><p> <strong> 9. Нижняя граница таблицы: </strong> Это свойство границы таблицы используется для создания горизонтальных разделителей между тегами th и td таблицы следующим образом:</p><pre>-е, тд{ нижняя граница: имя цвета значения; } </pre><p> <strong> 10.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/p/p9NgRxUwY7OXeZcQzbBDEMTrPG5oSql2AkKFhI/slide-24.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/p/p9NgRxUwY7OXeZcQzbBDEMTrPG5oSql2AkKFhI/slide-24.jpg' /></noscript> Закругленная граница таблицы </strong> : Показывает закругленные углы границы таблицы.</p><pre> таблица{ радиус границы: значение; граница: значение имя-цвета; } </pre><h4><span class="ez-toc-section" id="_HTML-2"> Примеры границы таблицы в HTML </span></h4><p> Ниже приведены примеры границы таблицы</p><h5><span class="ez-toc-section" id="_1"> Пример №1 </span></h5><p> В следующем примере показаны две разные таблицы с разными границами. Первая таблица показывает обычную рамку вокруг таблицы, тогда как вторая таблица является примером формата сворачиваемой границы таблицы.</p><p> <strong> Код HTML: </strong></p><pre> <html> <голова> <стиль> .collapsetable{ граница коллапса: коллапс; граница: 3 пикселя сплошного синего цвета; } </стиль> </голова> <тело> <граница таблицы="1"> <caption><b>Общая граница таблицы</b></caption> <tr> <th>SR.NO</th> <th>ИМЯ</th> <th>Образование</th> <th>ВОЗРАСТ</th> </tr> <tr> <тд>1</тд> <td>Динеш</td> <td>BCA</td> <тд>26</тд> </tr> <tr> <тд>2</тд> <td>Радж</td> <td>Калифорния</td> <td>30</td> </tr> <tr> <тд>3</тд> <td>Глубина</td> <td>Я</td> <td>28</td> </tr> <tr> <тд>4</тд> <td>Ахилеш</td> <td>B.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/b/d/6/bd6a3abe71ec4391b475a2c7ca0f5072.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/b/d/6/bd6a3abe71ec4391b475a2c7ca0f5072.jpeg' /></noscript> com</td> <тд>21</тд> </tr> <tr> <тд>5</тд> <td>Сара</td> <td>MBA</td> <тд>26</тд> </tr> </таблица> <br> <граница таблицы="1"> <caption><b>Граница сворачиваемой таблицы</b></caption> <tr> <th>Эмп-код</th> <th>Название образца</th> <th>Должность</th> <th>Зарплата (LPA)</th> </tr> <tr> <тд>911</td> <td>Зоя Шейх</td> <td>Разработчик</td> <тд>3.6</тд> </tr> <tr> <td>912</td> <td>Лиза Дев </td> <td>Тестер</td> <td>2.8</td> </tr> <tr> <td>913</td> <td>Дипак Джадеджа</td> <td>Цифровой маркетинг</td> <td>5.2</td> </tr> <tr> <тд>914</td> <td>Адити Йевале</td> <td>Разработчик</td> <тд>4</тд> </tr> <tr> <td>915</td> <td>Симрен Рао</td> <td>HR</td> <td>5.6</td> </tr> </таблица> </тело> </html> </pre><p> <strong> Вывод: </strong></p><p></p><h5><span class="ez-toc-section" id="_2"> Пример №2 </span></h5><p> В этом примере показано, как установить границу таблицы только для внешней части с разными типами границ таблицы:</p><p> <strong> HTML-код: </strong></p><pre> <head> <стиль> стол{ граница: 1px сплошной красный; граница коллапса: коллапс; } </стиль> </голова> <тело> <h5><span class="ez-toc-section" id="i-12">Таблица с внешней границей</span></h5> <таблица> <tr> <th>Индекс</th> <th>Времена года</th> <th>Продолжительность</th> </tr> <tr> <тд>1</тд> <td>Лето</td> <td>4 месяца</td> </tr> <tr> <тд>2</тд> <td>Сезоны дождей</td> <td>4 месяца</td> </tr> <tr> <тд>3</тд> <td>Зима</td> <td>4 месяца</td> </tr> </таблица> <h5><span class="ez-toc-section" id="i-13">Таблица с пунктирной рамкой</span></h5> <таблица> <tr> <th>Индекс</th> <th>Времена года</th> <th>Продолжительность</th> </tr> <tr> <тд>1</тд> <td>Лето</td> <td>4 месяца</td> </tr> <tr> <тд>2</тд> <td>Сезоны дождей</td> <td>4 месяца</td> </tr> <tr> <тд>3</тд> <td>Зима</td> <td>4 месяца</td> </tr> </таблица> <h5><span class="ez-toc-section" id="i-14">Таблица с пунктирной рамкой</span></h5> <таблица> <tr> <th>Индекс</th> <th>Времена года</th> <th>Продолжительность</th> </tr> <tr> <тд>1</тд> <td>Лето</td> <td>4 месяца</td> </tr> <tr> <тд>2</тд> <td>Сезоны дождей</td> <td>4 месяца</td> </tr> <tr> <тд>3</тд> <td>Зима</td> <td>4 месяца</td> </tr> </таблица> <h5><span class="ez-toc-section" id="i-15">Таблица с двойной рамкой</span></h5> <таблица> <tr> <th>Индекс</th> <th>Времена года</th> <th>Продолжительность</th> </tr> <tr> <тд>1</тд> <td>Лето</td> <td>4 месяца</td> </tr> <tr> <тд>2</тд> <td>Сезоны дождей</td> <td>4 месяца</td> </tr> <tr> <тд>3</тд> <td>Зима</td> <td>4 месяца</td> </tr> </таблица> </тело> </pre><p> <strong> Вывод: </strong> В этом выводе показана таблица с пунктирной, пунктирной и двойной границей за пределами таблицы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/d/9/f/d9f4b8424d78a1ca45b4c6cb9f0502af.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/d/9/f/d9f4b8424d78a1ca45b4c6cb9f0502af.jpeg' /></noscript></p><p></p><h5><span class="ez-toc-section" id="_3"> Пример #3 </span></h5><p> Пример, показывающий ячейки таблицы, выделенные разным цветом, индивидуально как:</p><p> <strong> Код HTML: </strong></p><pre> <html> <голова> <стиль> стол{ граница: 3 пикселя сплошного красного цвета; } й { граница: 2 пикселя сплошного синего цвета; } тд { граница: 2px сплошной черный; } </стиль> </голова> <тело> <h5><span class="ez-toc-section" id="i-16">Граница таблицы вокруг ячейки</span></h5> <таблица> <tr> <th>Имя</th> <th>Фамилия</th> <th>Город</th> </tr> <tr> <td>Рита</td> <td>Мишра</td> <td>Мумбаи</td> </tr> <tr> <td>Рашми</td> <td>Патил</td> <td>Нагпур</td> </tr> <tr> <td>Картик</td> <td>Разработка</td> <td>Пуна</td> </tr> </таблица> </тело> <html> </pre><p> <strong> Вывод: </strong></p><p></p><h5><span class="ez-toc-section" id="_4"> Пример #4 </span></h5><p> Еще одна таблица со скругленной рамкой с рамкой в ​​качестве горизонтального разделителя</p><p> <strong> HTML-код: </strong></p><pre> <html> <голова> <стиль> .круглый{ радиус границы: 15px; граница: 2 пикселя сплошного фиолетового цвета; отступ: 5px; } й, тд { нижняя граница: 1px сплошной черный; } </стиль> </голова> <тело> <h5><span class="ez-toc-section" id="i-17">Граница таблицы вокруг ячейки</span></h5> <таблица> <tr> <th>Торт</th> <th>Вес</th> <th>Цена</th> </tr> <tr> <td>Шоколад</td> <td>1/2 кг</td> <td>400/-</td> </tr> <tr> <td>Расмалай</td> <td>1 кг</td> <td>850/-</td> </tr> </таблица> </тело> </html> </pre><p> <strong> Вывод: </strong></p><p></p><h4><span class="ez-toc-section" id="i-18"> Заключение </span></h4><ul><li> Граница таблицы в HTML устанавливается путем присвоения значения 1 для отображения границы вокруг таблицы и 0 для скрытия границы вокруг таблицы.<img class="lazy lazy-hidden" loading='lazy' src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/c2/ad/33/c2ad3362aab31a2d9cb2c66d25c9d36b.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/c2/ad/33/c2ad3362aab31a2d9cb2c66d25c9d36b.jpg' /></noscript><div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/czvet-granicz-tabliczy-html-atribut-bordercolor-htmlbook-ru-2.html" data-text="Цвет границ таблицы html: Атрибут bordercolor | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/czvet-granicz-tabliczy-html-atribut-bordercolor-htmlbook-ru-2.html" data-text="Цвет границ таблицы html: Атрибут bordercolor | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/czvet-granicz-tabliczy-html-atribut-bordercolor-htmlbook-ru-2.html" data-text="Цвет границ таблицы html: Атрибут bordercolor | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/czvet-granicz-tabliczy-html-atribut-bordercolor-htmlbook-ru-2.html" data-text="Цвет границ таблицы html: Атрибут bordercolor | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/raznoe-2/ip-kak-perevoditsya-slovar-i-onlajn-perevod-na-anglijskij-russkij-nemetskij-frantsuzskij-ukrainskij-i-drugie-yazyki.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Ip как переводится: Словарь и онлайн перевод на английский, русский, немецкий, французский, украинский и другие языки</span></a></li><li class="previous"><a href="https://ylianova.ru/shrift-2/shrift-na-klaviature-app-store-shrifty-air-klaviatura.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Шрифт на клавиатуре: ‎App Store: Шрифты Air — Клавиатура</span></a></li></ul><section id="comments" class="themeform"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/czvet-granicz-tabliczy-html-atribut-bordercolor-htmlbook-ru-2.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='31580' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> <script defer src="https://ylianova.ru/wp-content/cache/autoptimize/js/autoptimize_21a1989c7e9e91901da205a0403baea3.js"></script></body></html>