Содержание

Tables таблица CSS уроки для начинающих академия

❮ Назад Дальше ❯


Внешний вид таблицы HTML может быть значительно улучшен с помощью CSS:

КомпанияКонтактСтрана
Alfreds FutterkisteMaria AndersGermany
Berglunds snabbköpChristina BerglundSweden
Centro comercial MoctezumaFrancisco ChangMexico
Ernst HandelRoland MendelAustria
Island TradingHelen BennettUK
Königlich EssenPhilip CramerGermany
Laughing Bacchus WinecellarsYoshi TannamuriCanada
Magazzini Alimentari RiunitiGiovanni RovelliItaly


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

Чтобы задать границы таблицы в CSS, используйте свойство border .

В приведенном ниже примере указывается черная граница для элементов <TABLE>, <th> и <TD>:

Пример

table, th, td {
   border: 1px solid black;
}

Обратите внимание, что таблица в приведенном выше примере имеет двойные границы. Это связано с тем, что оба элемента таблицы и <th> и <TD> имеют отдельные границы.


Свернуть границы таблицы

Свойство border-collapse задает, следует ли свернуть границы таблицы в одну границу:

Пример

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

Если требуется только граница вокруг таблицы, укажите только свойство

border для <TABLE>:

Пример

table {
    border: 1px solid black;
}



Ширина и высота таблицы

Ширина и высота таблицы определяются свойствами width и height.

В приведенном ниже примере устанавливается ширина таблицы 100%, а высота <th> элементов 50px:

Пример

table {
    width: 100%;
}

th {
    height: 50px;
}


Выравнивание по горизонтали

Свойство text-align задает выравнивание по горизонтали (например, влево, вправо или по центру) содержимого в <th> или <TD>.

По умолчанию содержимое элементов <th> выравнивается по центру, а содержимое элементов <TD> выравнивается по левому краю.

В следующем примере выравнивание текста по левому краю в <th> элементах:

Пример

th {
    text-align: left;
}


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

Свойство vertical-align устанавливает вертикальную трассу (например, верхнюю, нижнюю или среднюю) содержимого в <th> или <TD>.

По умолчанию вертикальное выравнивание содержимого в таблице является средним (для элементов <th> и <TD>).

В следующем примере устанавливается выравнивание по вертикали текста по нижнему краю для элементов <TD>:

Пример

td {
    height: 50px;
    vertical-align: bottom;
}


Заполнение таблицы

Чтобы управлять пространством между границей и содержимым в таблице, используйте свойство padding для элементов <TD> и <th>:

Пример

th, td {
    padding: 15px;
    text-align: left;
}


Горизонтальные разделители

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Добавьте свойство border-bottom в <th> и <TD> для горизонтальных разделителей:

Пример

th, td {
    border-bottom: 1px solid #ddd;
}


Hoverable Таблица

Используйте селектор :hover на <TR>, чтобы выделить строки таблицы при наведении указателя мыши:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример

tr:hover {background-color: #f5f5f5;}


Striped Таблицы

First Name
Last Name
Savings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Для таблиц, чередующихся с зебрами, используйте селектор nth-child() и добавьте background-color ко всем четным (или нечетным) строкам таблицы:

Пример

tr:nth-child(even) {background-color: #f2f2f2;}


Цвет таблицы

В приведенном ниже примере указывается цвет фона и цвет текста <th> элементов:

First NameLast NameSavings
PeterGriffin$100
LoisGriffin$150
JoeSwanson$300

Пример

th {
    background-color: #4CAF50;
    color: white;
}


Отзывчивый стол

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

Добавьте элемент контейнера (например, < div >) с overflow-x:auto вокруг <TABLE> элемента, чтобы сделать его отзывчивым:

Пример

<div>

<table>
. .. table content …
</table>

</div>

Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано «переполнение: прокрутка»).


Другие примеры

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

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


Свойства таблицы CSS

СвойствоОписание
borderЗадает все свойства границы в одном объявлении
border-collapseУказывает, следует ли свернуть границы таблицы
border-spacingОпределяет расстояние между границами соседних ячеек
caption-sideЗадает размещение заголовка таблицы
empty-cellsУказывает, отображать ли границы и фон на пустых ячейках таблицы
table-layoutЗадает алгоритм компоновки, используемый для таблицы

❮ Назад Дальше ❯

Таблицы и стили | 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. Выравнивание текста в ячейках

Оформление таблиц | WebReference

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

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

По умолчанию ширина таблицы устанавливается браузером самостоятельно, исходя из объёма в ней табличных данных. Если текста в ячейках много, тогда таблица будет занимать всю доступную ей ширину, а если мало, то ширина таблицы автоматически уменьшится. При наличии на странице нескольких таблиц их разная ширина выглядит порой небрежно. Так что лучше явно задать ширину таблицы в процентах, пикселях, em или любых других единицах CSS, как показано в примере 1.

Пример 1. Ширина таблицы в процентах

table { width: 100%; }
.tbl-medium { width: 60%; }
.tbl-small { width: 200px; }

В данном примере ширина 100% применяется ко всем таблицам. Опять же, классы помогают установить ширину для выбранных таблиц задействуя ранее созданный класс. Чтобы указать таблице ширину в 200 пикселей надо добавить к элементу <table> класс tbl-small.

<table>

Выравнивание таблиц

Исходно любая таблица располагается по левому краю окна браузера. Можно выровнять её по центру, если только таблица не занимает всю доступную область, другими словами, меньше 100%. Для этого к стилю таблицы следует добавить отступы через свойство margin со значением auto, как показано в примере 2.

Пример 2. Выравнивание таблицы с помощью margin

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { margin: auto; /* Выравнивание по центру */ } </style> </head> <body> <table> <tr><td>. ..</td></tr> </table> </body> </html>

В данном примере для всех таблиц на странице задано выравнивание по центру.

Цвет фона

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору table. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с table задать цвет у селектора td или th, то он и будет установлен в качестве фона (пример 3).

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { background: #f5e8d0; /* Цвет фона таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } th { background: #496791; /* Цвет фона ячеек */ color: #fff; /* Цвет текста */ } td, th { padding: 5px 10px; /* Поля в ячейках */ } </style> </head> <body> <table> <tr> <th rowspan=»2″>Вид соединения</th> <th colspan=»2″>Поля допусков ширины шпоночного паза</th> </tr> <tr> <th>Вал</th><th>Втулка</th> </tr> <tr> <td>Свободное</td><td>H9</td><td>D10</td> </tr> <tr> <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td> </tr> <tr> <td>Плотное</td><td colspan=»2″>P9</td> </tr> </table> </body> </html>

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

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

Если нам требуется сделать зебру — так называется чередование строк разного цвета, то следует воспользоваться псевдоклассом :nth-child, добавляя его к селектору tr. Чтобы зебра распространялась только на тело таблицы, а не её заголовок, отделим их друг от друга с помощью элементов <thead> и <tbody> (пример 4).

Пример 4. Создание зебры

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии */ } thead { background: #f5e8d0; /* Цвет фона заголовка */ } td, th { padding: 5px; /* Поля в ячейках */ border: 1px solid #333; /* Параметры рамки */ } tbody tr:nth-child(even) { background: #f0f0f0; /* Зебра */ } </style> </head> <body> <table> <thead> <tr> <th rowspan=»2″>Интервалы размеров, мм</th> <th colspan=»4″>Допуск IT, мкм, для квалитетов</th> </tr> <tr> <th>5</th><th>6</th><th>7</th><th>8</th> </tr> </thead> <tbody> <tr> <td>До 3</td><td>4</td><td>6</td><td>10</td><td>14</td> </tr> <tr> <td>Св. 3 до 6</td><td>5</td><td>8</td><td>12</td><td>18</td> </tr> <tr> <td>Св. 6 до 10</td><td>6</td><td>9</td><td>15</td><td>22</td> </tr> <tr> <td>Св. 10 до 18</td><td>8</td><td>11</td><td>18</td><td>27</td> </tr> <tr> <td>Св. 18 до 30</td><td>9</td><td>13</td><td>21</td><td>33</td> </tr> <tr> <td>Св. 30 до 50</td><td>11</td><td>16</td><td>25</td><td>39</td> </tr> <tr> <td>Св. 50 до 80</td><td>13</td><td>19</td><td>30</td><td>46</td> </tr> </tbody> </table> </body> </html>

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

Рис. 2. Зебра

Значение even у селектора :nth-child применяет стиль ко всем чётным строкам и задаёт их цвет фона. Можно, также, поменять его на odd, тогда серым цветом будут выделяться нечётные строки.

Аналогичным образом цветом выделяются не строки, а колонки, для этого следует использовать селектор tbody td:nth-child(even).

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

Полем называется расстояние между границей ячейки и её содержимым. Без полей текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие, добавление же полей позволяет улучшить читабельность текста. Для этой цели применяется стилевое свойство padding, которое работает с селектором td или th, как показано выше в примерах 3 и 4. Обычно указывают одно значение, оно тогда задаёт пустое пространство вокруг содержимого ячейки сразу со всех сторон. Два значения пишутся, когда надо задать разные поля по вертикали (первое значение) и горизонтали (второе значение).

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

Между ячеек имеется небольшое пустое расстояние, которое не видно, пока для ячеек не установить границу или фоновый цвет. Исходно это расстояние равно 2px и его можно изменить с помощью свойства border-spacing, добавляя его к селектору table (пример 5).

Пример 5. Использование border-spacing

table {
 border-spacing: 3px; /* Расстояние между ячеек */
}
thead  th {
 background: #e08156; /* Цвет фона заголовка */
 color: #333; /* Цвет текста */
}
td, th {
 padding: 5px; /* Поля в ячейках */
 background: #4c715b; /* Цвет фона ячеек */
 color: #f5e8d0; /* Цвет текста */
}

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

Рис. 3. Вид таблицы с расстоянием между ячеек

Если к table добавляется свойство border-collapse со значением collapse, то border-spacing игнорируется, потому как расстояния между ячеек уже нет.

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

Чтобы чётко отделить содержимое одной ячейки от другой, к ячейкам добавляются границы. За их создание отвечает стилевое свойство border, которое применяется к элементам (<td> или <th>). Однако здесь нас подстерегают подводные камни. Поскольку рамка создаётся для каждой ячейки, то в местах соприкосновения ячеек получается граница удвоенной толщины. Для устранения указанной особенности существует несколько путей. Самый простой — воспользоваться свойством border-collapse со значением collapse. В его задачу входит отслеживать соприкосновение линий и вместо двойной границы изображать одинарную. Это свойство достаточно добавить к селектору table, а дальше оно всё сделает самостоятельно (пример 6).

Пример 6. Применение свойства border-collapse при создании рамок таблицы

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { border-collapse: collapse; /* Убираем двойные линии */ width: 100%; /* Ширина таблицы */ border-spacing: 0; /* Расстояние между ячеек */ } td { border: 2px solid #333; /* Параметры границ */ padding: 4px; /* Поля в ячейках */ text-align: center; /* Выравнивание по центру */ } </style> </head> <body> <table> <tr><td>O</td><td>X</td><td>X</td></tr> <tr><td>O</td><td>O</td><td>X</td></tr> <tr><td>X</td><td>X</td><td>O</td></tr> </table> </body> </html>

Разница между границами таблицы при добавлении свойства border-collapse, а также без него, представлена на рис.  4.

 

а — свойство не установлено

б — свойство установлено

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

На рис. 4а показана рамка таблицы, используемая по умолчанию. Обратите внимание, что внутри таблицы все линии имеют удвоенную толщину. Добавление border-collapse убирает эту особенность, и толщина всех линий становится одинаковой (рис. 4б).

Линии не обязательно делать для всех сторон ячеек, согласно дизайну они могут отделять одну строку или колонку от другой. Для этого мы используем свойства border-bottom, border-left и другие подобные. Применять границы к элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому добавляем их к селектору table и td (пример 7).

Пример 7. Линии между строк

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { width: 100%; /* Ширина таблицы */ border-collapse: collapse; /* Убираем двойные линии */ border-bottom: 2px solid #333; /* Линия снизу таблицы */ border-top: 2px solid #333; /* Линия сверху таблицы */ } td { text-align: center; /* Выравнивание по центру */ border-bottom: 1px solid #333; border-top: 1px solid #333; } td, th { padding: 5px; /* Поля в ячейках */ } </style> </head> <body> <table> <thead> <tr> <th rowspan=»2″>Вид соединения</th> <th colspan=»2″>Поля допусков ширины шпоночного паза</th> </tr> <tr> <th>Вал</th><th>Втулка</th> </tr> </thead> <tbody> <tr> <td>Свободное</td><td>H9</td><td>D10</td> </tr> <tr> <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td> </tr> <tr> <td>Плотное</td><td colspan=»2″>P9</td> </tr> </tbody> </table> </body> </html>

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

Рис. 5. Таблица с горизонтальными линиями

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

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

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> table { border-collapse: collapse; /* Убираем двойные линии */ width: 100%; /* Ширина таблицы */ } th { background: #dfebb7; /* Цвет фона ячейки */ text-align: left; /* Выравнивание по левому краю */ } td { 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> — по центру. Результат примера показан ниже (рис. 6).

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

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

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

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Таблица</title> <style> th { background: #496791; /* Цвет фона ячеек заголовка */ color: #fff; /* Цвет текста */ } td { background: #f5e8d0; /* Цвет фона ячеек */ text-align: center; /* Выравниваем по центру */ } td, th { padding: 5px 10px; /* Поля в ячейках */ vertical-align: top; /* Выравниваем по верхнему краю */ } </style> </head> <body> <table> <tr> <th rowspan=»2″>Вид соединения</th> <th colspan=»2″>Поля допусков ширины шпоночного паза</th> </tr> <tr> <th>Вал</th><th>Втулка</th> </tr> <tr> <td>Свободное</td><td>H9</td><td>D10</td> </tr> <tr> <td>Нормальное</td><td>N9</td><td>I<sub>s</sub>9</td> </tr> <tr> <td>Плотное</td><td colspan=»2″>P9</td> </tr> </table> </body> </html>

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

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

таблицы

См. также

  • border-collapse
  • border-spacing

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.03.2020

Редакторы: Влад Мержевич

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

Формы
Ctrl+

Стили таблиц CSS — темы масштабирования

Обзор

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

Scope

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

  • Что такое CSS Table Style и зачем он нужен.
  • Различные свойства стиля таблицы.
  • Несколько быстрых и важных советов по стилизации столов.
  • Практическое использование таблиц и сброс стиля таблицы CSS по умолчанию в нашу пользу.

Что такое стиль таблицы в CSS?

Давайте ‌взглянем на простую HTML-таблицу, содержащую лишь некоторые данные, то есть вообще без добавления стилей CSS.

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

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

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

Ну, это что-то вроде стиля таблицы CSS. Благодаря этому ваши простые HTML-таблицы выглядят намного лучше и читабельнее. И, если это то, что вы хотите сделать со своими собственными HTML-таблицами, то оставайтесь и переходите к следующему разделу этой статьи 🤓!

Как стилизовать таблицу в CSS?

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

HTML-код для создания таблицы:

 
 
    <таблица>
        Таблица штатов Индии и их столиц
        
            
                Sl №
                Штат
                Капитал
            
        
        <тело>
            
                <тд>1
                Западная Бенгалия
                Калькутта
            
            
                <тд>2
                Мадхья-Прадеш
                Бхопал
            
            
                <тд>3
                Карнатака
                Бангалуру
            
        
    

 

Приведенный выше HTML-код создает таблицу с 3 столбцами с именем Серийный номер. (номер Sl), государственный и столичный . Затем мы добавляем к нему 3 записи таблицы. Заголовок таблицы установлен на «Таблица индийских штатов и их столиц».

Вывод , показывающий очень простую таблицу HTML без каких-либо стилей CSS:

Теперь давайте посмотрим, что означают различные элементы HTML.

Значение каждого тега таблицы HTML

699699969996999699966999669. таблицы
Теги таблицы HTML Значение метки таблицы HTML
<Таблица> Вся сама таблица
<Подпись>. Заголовок
Тело таблицы, состоящее из основных данных
Нижний колонтитул таблицы
Строки таблицы
Ячейка, содержащая данные стиль для этих элементов и сделать их привлекательными, а также повысить их читабельность.

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

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

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

 
 td, th {
    граница: 1px сплошная #777;
    набивка: 0,5 бэр;
    выравнивание текста: по центру;
}
 
стол {
    граница коллапса: коллапс;
}
 
tbody tr:nth-child(нечетный) {
    фон: #еее;
}
подпись {
    размер шрифта: 0.8rem;
}
 

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

Давайте теперь посмотрим на нашу стилизованную таблицу CSS:

Это все о том, как стилизовать таблицу в CSS. В следующем разделе мы обсудим различные доступные нам свойства таблицы CSS.

Свойства таблицы CSS

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

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

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

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

и, так как именно они образуют ячейки.

Синтаксис:

 
 td, th{
    граница: <измерение> <тип границы> <цвет границы>;
}
 

Пример: Давайте применим некоторую границу к нашей простой HTML-таблице.

Код CSS:

 
 тд, т {
    граница: 1px сплошная #777;
}
 

Приведенный выше код CSS помещает сплошную рамку толщиной 1 пиксель вокруг всех ячеек с шестнадцатеричным цветом границы #777 (слегка темно-серым).

Выход:

CSS Table Border-Spacing

Теперь, как мы видим, расстояние между границами двух ячеек по умолчанию составляет 2 пикселя. Это можно настроить с помощью свойства border-spacing. Мы применяем это свойство к элементу

.

Примечание : это свойство не следует путать со свойством поля в CSS.

Синтаксис:

 
 таблица {
  border-spacing: <измерение>;
}
 

Пример: Давайте попробуем установить для свойства border-spacing простой HTML-таблицы значение 15 пикселей.

Код CSS :

 
 td, th {
    граница: 1px сплошная #777;
}
 
стол {
     интервал между границами: 15 пикселей;
}
 

Приведенный выше код CSS добавляет сплошную рамку шириной 1 пиксель вокруг всех ячеек и устанавливает интервал между границами равным 15 пикселей.

Вывод:

CSS Table Border-Collapse

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

. Это свойство имеет два значения: отдельные и свернуть. отдельно установлено по умолчанию.

Синтаксис:

 
 таблица {
    граница-коллапс: <отдельный | коллапс>;
}
 

Пример: Давайте применим свойство border-collapse: Collapse к простой HTML-таблице.

Код CSS:

 
 тд, т {
    граница: 1px сплошная #777;
}
 
стол {
    граница коллапса: коллапс;
}
 

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

Выход:

CSS Table Padding

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

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

Синтаксис:

 
 tbody{
    цвет: <имя_цвета | код_цвета>;
}
 

Пример: Сделаем цвет шрифта в приведенной выше таблице белым, чтобы тексты были читабельными.

Код CSS:

 
 tbody{
    белый цвет;
}
 

Приведенный выше код CSS изменяет цвет шрифта на белый для всех текстов в теле таблицы.

Выход:

Теперь у нас есть красивая таблица в стиле CSS!

Высота и ширина таблицы CSS

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

и.

Примечание : Свойство padding изменяет расстояние между содержимым ячейки и границей ячейки, с другой стороны, свойство border-spacing изменяет расстояние между двумя соседними границами ячейки.

Синтаксис:

 
 td, th{
    заполнение: <измерение>;
}
 

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

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

Код CSS:

 
 тд, т {
    набивка: 0,5 бэр;
}
 

Приведенный выше код CSS применяет к ячейкам заполнение 0,5 rem.

Выход:

Таблица CSS Текстовое выравнивание

Как видно из приведенного выше вывода, все содержимое, за исключением ячеек заголовков, выровнено по левому краю. Используя свойство text-align, мы можем изменить выравнивание по центру или по правому краю. Мы применяем это свойство к элементу

.

Синтаксис:

 
 td{
    выравнивание текста: <влево | центр| справа>;
}
 

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

Код CSS:

 
 тд{
    выравнивание текста: по центру;
}
 

Приведенный выше центр кода CSS выравнивает текст во всех ячейках.

Код CSS для выравнивания по левому и правому краю:

 
 td{
    выравнивание текста: по левому краю;
}
 
 
 тд{
    выравнивание текста: вправо;
}
 

Вывод для выравнивания по центру (это будет аналогично для выравнивания по левому и правому краям):

Цвет фона таблицы CSS

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

Синтаксис:

 
 ттел{
фон: ;
}
 

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

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

Код CSS:

 
 tbody tr:nth-child(нечетный) {
     фон: #202932;
}
tbody tr:nth-child(even) {
     фон: #2c3844;
}
 

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

Выход:

Но, как мы видим, черный цвет шрифта не делает текст очень читабельным, не так ли?

Для этого у нас есть свойство цвета таблицы CSS.

Цвет таблицы CSS

Это свойство используется для настройки цвета шрифта содержимого таблицы (мы можем сделать это для всей таблицы, применив его к тегу

, и
,
(т. е. всех элементов, которые имеют свойства высоты и ширины). Синтаксис:

 
 <элемент таблицы HTML>{
ширина: <измерение>;
}

<Элемент HTML-таблицы>{
высота: <измерение>;
}
 

Пример: Давайте попробуем изменить высоту строки заголовка в нашей таблице на 80 пикселей, а высоту элементов данных таблицы на 50 пикселей. Сделаем так же всю ширину таблицы 50% от всего окна просмотра.

Код CSS:

 
 {
    высота: 80 пикселей;
}
 
тд {
    высота: 50 пикселей;
}
 
стол {
    ширина: 50%;
}
 

Приведенный выше код CSS изменяет высоту элемента заголовка таблицы

на 80 пикселей, высоту элемента данных таблицы на 50 пикселей и ширину всей таблицы , установлен на 50% окна просмотра.

Выход:

Пустая ячейка таблицы CSS

Это свойство позволяет удалить границу пустых ячеек. У значения есть два свойства: показать и скрыть. Значение по умолчанию — показать. Мы применяем это свойство к HTML-элементу

.

ВАЖНО: Это свойство не будет иметь никакого эффекта при использовании вместе с border-collapse: свернуть.

Синтаксис:

 
 таблица{
    пустые ячейки: <скрыть | показать>;
}
 

Пример: Рассмотрим следующую таблицу:

Последние две ячейки в третьем столбце пусты. И границы тоже видны. Теперь давайте применим свойство empty-cells: hide.

Код CSS:

 
 таблица {
    пустые ячейки: скрыть;
}
 

Приведенный выше код CSS применяет свойство empty-cells: hide к элементу

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

Вывод:

Таблица CSS Table-Tayout

Это свойство определяет способ отображения макета таблицы в браузере . У этого свойства есть два значения: автоматическое и фиксированное. Значение по умолчанию — авто. Мы применяем это свойство к HTML-элементу

.

Примечание : Макет — это способ расположения всех визуальных элементов на веб-сайте.

  • авто: Таблица изменит ширину столбца, чтобы уместить все содержимое в этом конкретном столбце. Таким образом, перед установкой ширины столбца необходимо проверить все ячейки в столбце. По этой причине рендеринг таблицы с table-layout: auto происходит медленно.

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

Синтаксис:

 
 <таблица>{
    макет таблицы: <авто | исправлено>;
}
 

Пример: Сделаем таблицу с тремя столбцами и тремя строками. Ширина первого столбца первой строки установлена ​​нами равной 400 px (мы увидим, что при изменении макета таблицы с автоматического на фиксированный этот столбец остается неизменным). А остальные записи не имеют заданной ширины. Вся таблица имеет ширину 100%.

HTML-код:

 
 <тело>
    <таблица>
        
<таблица> <тело>

Приведенный выше HTML-код создает необходимую таблицу. Теперь давайте добавим к нему немного CSS. Код CSS:

 
 заголовок {
    размер шрифта: 1.8rem;
}
стол {
    ширина: 100%;
    размер шрифта: 1.2rem;
    поле: 20px авто;
}
 
tbody tr:nth-child(нечетный) {
    фон: #202932;
}
 
tbody tr:nth-child(even) {
    фон: #2c3844;
}
 
тело {
    белый цвет;
}
 
стол, тд, й {
    граница коллапса: коллапс;
}
 
й, тд {
    отступ: 10 пикселей;
    граница: 1px сплошная #777;
    выравнивание текста: по центру;
}
 
.firstRowFirstColumn {
    ширина: 400 пикселей;
}
 

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

Выход: макет таблицы: авто

Теперь добавим свойство table-layout: fixed и посмотрим, как визуально изменится таблица.

Код CSS:

 
 <таблица>{
    макет таблицы: фиксированный;
}
 

Вышеприведенный код CSS устанавливает для свойства table-layout фиксированное значение.

Выход: макет таблицы: фиксированный

Как мы видим, ширина первого столбца остается фиксированной и составляет 400 пикселей независимо от значения table-layout. Это потому, что мы явно упомянули об этом в нашем коде CSS. В то время как другие столбцы настроены так, чтобы иметь одинаковую ширину.

Советы по стилю таблицы

  • Выравнивание текста внутри ячеек
    • Горизонтальное выравнивание содержимого ячейки: текст можно выровнять по горизонтали (т. е. слева, по центру или справа от ячейки) с помощью свойства text-align. У этого свойства есть три значения: слева, по центру и справа. Оставлено значение по умолчанию.

Вертикальное выравнивание содержимого ячейки: Текст можно выровнять по вертикали (т. е. по нижнему, среднему или верхнему краю ячейки) с помощью свойства вертикального выравнивания. У этого свойства есть три значения: нижнее, среднее и верхнее. Значение по умолчанию — среднее.

На приведенном выше изображении значение стороны заголовка установлено наверх.

На изображении выше показано, когда значение стороны заголовка установлено внизу.

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

.

Код CSS:

 
 tbody tr:nth-child(нечетный) {
    фон: ;
}

tbody tr:nth-child(even) {
    фон: ;
}
 
  • Создание адаптивной таблицы: Чтобы сделать таблицу адаптивной, нам нужно установить ширину таблицы, используя относительные единицы, такие как %. Таким образом, при изменении размера окна просмотра таблица будет соответственно уменьшаться.

    Далее нам нужно установить для свойства overflow-x элемента

  • Пример фиксированного макета
    Заголовок 1 Длинный текст в качестве заголовка 2, например, для отображения фиксированного макета Заголовок 3
    Длинный текст в качестве образца данных таблицы, например, для демонстрации фиксированного макета Пример данных таблицы Пример данных таблицы
    Пример данных таблицы Пример данных таблицы Пример данных таблицы
    значение auto, чтобы, когда таблица не умещается на экране, появлялась горизонтальная полоса прокрутки.

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

    Код HTML для создания таблицы:

     
     <дел>
        <таблица>
        
    
    

    Содержимое таблицы записывается внутри элемента

    .

    Код CSS:

     
     таблица {
        ширина: 100%;
    }
     

    Приведенный выше код CSS делает ширину таблицы адаптивной и устанавливает ее равной 100% ширины окна просмотра.

    Вывод:

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

  • Обработка пустых ячеек: Пустые ячейки можно обрабатывать с помощью свойства empty-cells: hide.

  • Когда использовать таблицы?

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

    Практические примеры использования таблиц:

    Образец 1:

    Образец 2:

    Когда не использовать таблицы?

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

    У вас могут возникнуть вопросы, например, будет ли это видно зрителю? Ну, ответ на это НЕТ. Но поток вашей веб-страницы будет совершенно другим. Вы можете получить четкое представление об искаженном потоке, когда используете программу чтения страниц. Он будет рассматривать весь макет веб-страницы, разработанный с элементами таблицы, как таблицу. Часто он может считывать начало таблицы, что будет звучать совершенно неправильно!

    7, 9007, 9007, 9007, 9007, 9007, 9007,,. расширяться до ширины 2 или более ячеек, т. е. одна ячейка будет иметь ширину 2 или более ячеек.или.;
    Атрибут Элемент (ы), к которому это можно применять Что это делает Синтаксис
    Colspan
    COLSPAN
    >;
    <число> определяет ширину текущей ячейки в несколько столбцов.»
    rowspan, Заставляет ячейку расширяться до высоты 2 или более ячеек, т. е. одна ячейка будет иметь высоту 2 или более ячеек.>; определяет, сколько строк должна иметь текущая ячейка по высоте.»
    span
    Он определяет, сколько столбцов должен занимать HTML-элемент

    Устаревшие атрибуты

    Устаревшие атрибуты — это атрибуты, которые больше не используются. Это не значит, что вы не можете их использовать! Вы можете использовать их в своем коде, но есть и более новые способы сделать то же самое! При использовании STRICT DOCTYPE эти устаревшие атрибуты могут быть объявлены недействительными.

    ПРИМЕЧАНИЕ. Просто чтобы устранить путаницу между свойствами и атрибутами, мы используем атрибуты следующим образом:

     
     <таблица bgcolor="F57A0A">
     

    Но мы используем свойства в нашем CSS или внутри тегов