Содержание

Строки таблицы | htmlbook.ru

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

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

Рис. 1. Таблица со строками, выделенными с помощью линий

Линии между строк устанавливаются достаточно просто, для этого следует добавить стилевое свойство border-bottom к селектору TD. Если вокруг таблицы содержится рамка, то нижняя граница получится удвоенной толщины. В этом случае можно убрать нижнюю линию у последней строки или скрыть нижнюю границу у таблицы (пример 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 {
    width: 300px; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
    border-bottom: none; /* Убираем линию снизу */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого ячеек */
   }
   TH {
    text-align: left; /* Выравнивание по левому краю */
    background: black; /* Цвет фона */
    color: white; /* Цвет текста */
    border: 1px solid white; /* Рамка вокруг ячеек */
   }
   TD {
    border-bottom: 1px solid black; /* Линия снизу */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
  </tr>
  </table>
 </body>
</html>

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

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

Рис. 2. Таблица со строками, выделенными с помощью цвета и линий

Для изменения цвета фона нужных строк введем дополнительный класс, назовем его even, и станем добавлять его к четным строкам таблицы, а именно к тегу <tr>. Заметьте, что для селектора TR можно задавать только цвет фона через свойство background. Всякие линии, которые установлены для селектора TR, отображаться не будут. Поэтому нижнюю границу проводим у ячейки, применяя свойство border-bottom к селектору 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 {
    width: 300px; /* Ширина таблицы */
    background: #fffff0; /* Цвет фона нечетных строк */
    border: 1px solid #a52a2a; /* Рамка вокруг таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого ячейки */
   }
   TD {
    text-align: center; /* Выравнивание по центру */
    border-bottom: 1px solid #a52a2a; /* Линия внизу ячейки */
   }
   TH {
    background: #a52a2a; /* Цвет фона */
    color: white; /* Цвет текста */
   }
   TR.even {
    background: #fff8dc; /* Цвет фона четных строк */
   }
   .la {
    text-align: left; /* Выравнивание по левому краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
   <tr>
    <td>Аметисты</td><td>23</td><td>64</td><td>97</td>
   </tr>
  </table>
 </body>
</html>

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

Колонки таблицы | htmlbook.ru

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

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

Рис. 1. Таблица с выделенными колонками

Цвет нечетных колонок можно задать путем добавления стилевых свойств к селектору TABLE, а для четных колонок введем новый класс, назовем его even. Первая колонка обычно используется для заголовков строк, поэтому для нее имеет смысл задать стиль, отличный от стиля остальных ячеек. В данном случае вводим еще один класс, назовем его lc и для него определим выравнивание по левому краю и цвет текста (пример 1). Остается для ячеек первой колонки добавить к тегу <td> атрибут, а для ячеек четных колонок .

Пример 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 {
    width: 300px; /* Ширина таблицы */
    border: 2px solid black; /* Рамка вокруг таблицы */
    background: #778899; /* Цвет фона */
    color: white; /* Цвет текста */
   }
   TD, TH {
    text-align: center; /* Выравнивание по центру */
    padding: 3px; /* Поля вокруг текста */
   }
   TH {
    color: white; /* Цвет текста */
    border-bottom: 4px double black; /* Двойная линия снизу */
   }
   .even { /* Стиль для четных колонок */
    background: #ffe4b5; /* Цвет фона */
    color: black; /* Цвет текста */
   }
   .lc { /* Стиль для первой колонки */
    text-align: left; /* Выравнивание по левому краю */
    color: #fffacd; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Чтобы отделить первую строку с заголовком от данных таблицы в примере используется двойная линия. Она получается за счет добавления свойства border-bottom к селектору TH.

Рассмотрим еще один способ формирования вида колонок — не только за счет разного цвета фона, но и применением линий между колонками (рис. 2).

Рис. 2. Выделение колонок с помощью линий и цвета

Структура кода останется практически той же, что была показана в примере 1. А именно, для ячеек четных колонок используем класс even, а для первой колонки — класс lc. Чтобы установить линию между колонками, к селектору TD добавляем свойство border-left, оно создает линию слева от ячейки. Однако при этом возникнет ненужная линия слева в первой колонке, поэтому для класса lc используем border: none, это свойство уберет лишние границы (пример 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 {
    width: 300px; /* Ширина таблицы */
    border: 1px solid black; /* Рамка вокруг таблицы */
   }
   TD, TH {
    text-align: center; /* Выравнивание по центру */
    padding: 3px; /* Поля вокруг текста */
   }
   TH {
    color: white; /* Цвет текста */
    background: #daa520;  /* Цвет фона */
   }
   TD {
    border-left: 1px dashed black; /* Линия слева от ячейки */
   }
   .even { /* Стиль для четных колонок */
    background: #dcdcdc;  /* Цвет фона */
   } 
   .lc { /* Стиль для первой колонки */
    text-align: left; /* Выравнивание по левому краю */
    border: none; /* Нет лишних линий */
   }
  </style>
 </head>
 <body>
  <table cellspacing="0">
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
  </body>
</html>

К сожалению, работа с колонками таблицы не так удобна, как хотелось бы. Если применять стили, то фактически все ячейки таблицы пестрят указаниями на определенный стилевой класс. За счет этого снижается удобство по расширению табличных данных и повышается объем кода. Существуют специальные теги <col> и <colgroup> призванные облегчить работу с колонками таблицы. Но их возможности ограничены, да и нужный результат будет отображаться не во всех браузерах. Так что на данном этапе для создания таблиц желаемого вида приходится обращаться к стилям.

Сетка таблицы | htmlbook.ru

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

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

Рис. 1. Вид таблицы с сеткой

При добавлении свойства border к селектору TD или TH между ячейками возникают двойные линии, которые образуются за счет соприкосновения рамок вокруг ячеек. Чтобы этого не произошло, для селектора TABLE указывается свойство border-collapse со значением collapse, как показано в примере 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 {
    width: 300px; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid black; /* Параметры рамки */
   }
   TH {
    background: #b0e0e6; /* Цвет фона */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

В данном примере также устанавливается цвет фона для ячеек заголовка (тег <th>) через свойство background.

Как вариант, можно вообще убрать рамку вокруг таблицы, оставив только линии внутри нее (рис. 2).

Рис. 2. Сетка внутри таблицы

При этом удобнее всего будет не убрать рамку, а спрятать ее, задав ей цвет, совпадающий с цветом фона веб-страницы. Так, в примере 2 фон страницы задан белым и такого же цвета используется граница, которая добавляется к селектору TABLE.

Пример 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">
   BODY {
    background: white; /* Цвет фона веб-страницы */
   }
   TABLE {
    width: 300px; /* Ширина таблицы */
    border-collapse: collapse; /* Убираем двойные линии между ячейками */
    border: 2px solid white; /* Прячем рамку вокруг таблицы */
   }
   TD, TH {
    padding: 3px; /* Поля вокруг содержимого таблицы */
    border: 1px solid maroon; /* Параметры рамки */
    text-align: left; /* Выравнивание по левому краю */
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <th>&nbsp;</th><th>2004</th><th>2005</th><th>2006</th>
   </tr>
   <tr>
    <td>Рубины</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Изумруды</td><td>28</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Сапфиры</td><td>29</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

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

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

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

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

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Хотя свойство background не наследуется, для ячеек значением фона по умолчанию выступает transparent, т.е. прозрачность, поэтому эффект заливки фона получается и у ячеек. Если одновременно с TABLE задать цвет у селектора TD или TH, то этот цвет будет установлен в качестве фона ячейки (пример 2.3).

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

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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 указан явно, вот ячейки и «заливаются» синим цветом.

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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.5.

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

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

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

Для изменения расстояния между ячейками применяется атрибут cellspacing тега <table>. Влияние этого атрибута хорошо заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне страницы. В качестве замены cellspacing выступает стилевое свойство border-spacing, оно устанавливает расстояние между границами ячеек. Одно значение устанавливает одновременно расстояние по вертикали и горизонтали между границами ячеек. Если значений у этого свойства два, то первое определяет горизонтальное расстояние (т.е. слева и справа от ячейки), а второе — вертикальное (сверху и снизу).

Свойство border-spacing действует только в том случае, если для селектора TABLE не задано свойство border-collapse со значением collapse (пример 2.5).

Пример 2.5. Расстояние между границами ячеек

XHTML 1.0CSS 2.1IE 7IE 8+CrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Замена cellspacing</title>
  <style type="text/css">
   TABLE {
    width: 100%; /* Ширина таблицы */
    border: 1px solid #399; /* Граница вокруг таблицы */
    border-spacing: 7px 5px; /* Расстояние между границ */
   }
   TD {
    background: #fc0; /* Цвет фона */
    border: 1px solid #333; /* Граница вокруг ячеек */
    padding: 5px; /* Поля в ячейках */ 
   }
  </style>
 </head>
 <body>
  <table>
    <tr><td>Леонардо</td><td>5</td><td>8</td></tr>
    <tr><td>Рафаэль</td><td>4</td><td>11</td></tr>
    <tr><td>Микеланджело</td><td>24</td><td>9</td></tr>
    <tr><td>Донателло</td><td>2</td><td>13</td></tr>
  </table>
 </body>
</html>

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

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

Браузер Internet Explorer до седьмой версии включительно не поддерживает свойство border-spacing, поэтому в этом браузере для таблиц будет применяться значение cellspacing заданное по умолчанию (обычно оно равно 2px).

При добавлении к селектору TABLE свойства border-collapse со значением collapse, атрибут cellspacing игнорируется, а значение border-spacing обнуляется.

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

По умолчанию границы в таблице изначально нет, а её добавление происходит с помощью атрибута border тега <table>. Браузеры по-разному отображают такую границу, поэтому лучше не указывать этот атрибут вообще, а рисование границ возложить на стили. Рассмотрим два метода, непосредственно связанных со стилями.

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

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

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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>

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

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

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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> — по центру. Результат примера показан ниже (рис. 2.9).

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

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

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

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <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 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 2.10.

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

Пустые ячейки

Браузеры иначе отображают ячейку, внутри которой ничего нет. «Ничего» в данном случае означает, что внутрь ячейки не добавили ни рисунок, ни текст, причём пробел в расчёт не принимается. Естественно, вид ячеек различается только в том случае, если вокруг них установлена граница. При использовании невидимой рамки, вид ячеек, независимо от того, есть в них что-нибудь или нет, совпадает.

Старые браузеры не отображали цвет фона пустых ячеек вида <td bgcolor=»#ffcc00″></td>, поэтому в том случае, когда требовалось оставить ячейку без содержимого, но отобразить цвет фона, внутрь ячейки добавляли неразделяемый пробел (&nbsp;). Пробел не всегда подходит, особенно когда нужно установить высоту ячейки 1–2 пиксела, из-за чего широкое распространение получил однопиксельный прозрачный рисунок. Действительно, такой рисунок можно масштабировать на свое усмотрение, но он на веб-странице никак не отображается.

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

Для управления видом пустых ячеек используется свойство empty-cells, при значении hide граница и фон в пустых ячейках не отображается. Если все ячейки в строке пустые, то строка прячется целиком. Ячейка считается пустой в следующих случаях:

  • нет вообще никаких символов;
  • в ячейке содержится только перевод строки, символ табуляции или пробел;
  • значение visibility установлено как hidden.

Добавление неразрывного пробела &nbsp; воспринимается как видимое содержание, т.е. ячейка уже будет не пустой (пример 2.10).

Пример 2.10. Пустые ячейки

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Использование empty-cells</title>
  <style type="text/css">
   TABLE {
    border: 4px double #399; /* Граница вокруг таблицы */
   }
   TD {
    background: #fc0; /* Цвет фона */
    border: 1px solid #333; /* Граница вокруг ячеек */
    empty-cells: hide; /* Прячем пустые ячейки */
    padding: 5px; /* Поля в ячейках */ 
   }
  </style>
 </head>
 <body>
  <table>
   <tr>
    <td>Леонардо</td><td>5</td><td>8</td>
   </tr>
   <tr>
    <td>Рафаэль</td><td> </td><td>11</td>
   </tr>
   <tr>
    <td>Микеланджело</td><td>24</td><td></td>
   </tr>
   <tr>
    <td>Донателло</td><td>&nbsp;</td><td>13</td>
   </tr>
  </table>
 </body>
</html>

Вид таблицы в браузере Safari показан на рис. 2.11а. Та же таблица в браузере IE7 продемонстрирована на рис. 2.11б.

а. В браузере Safari, Firefox, Opera, IE8, IE9

б. В браузере IE7

Рис. 2.11. Вид таблицы с пустыми ячейками

Заголовок таблицы | htmlbook.ru

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

  • left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
  • right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
  • center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
  • top — результат аналогичен действию атрибута center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
  • bottom — заголовок размещается внизу таблицы по ее центру.

В примере 12.7 показано, как установить заголовок сверху таблицы. Обратите внимание, что тег <caption> находится внутри контейнера <table>, это его стандартное местоположение.

Пример 12.7. Создание заголовка таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок таблицы</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</th>
   </tr>
   <tr>
    <td>Нефть</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Золото</td><td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td><td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Ниже показан результат данного примера (рис. 12.9).

Рис. 12.9. Вид заголовка таблицы в браузере Safari

Вложенные таблицы | htmlbook.ru

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

Пример 12.5. Явно заданная высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit 
         in vulputate velit esse molestie consequat.</td>
    <td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam  erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis 
         nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex 
         en commodo consequat.</td>
   </tr>
   <tr>
    <td>Lorem ipsum</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 12.7. Высота ячеек

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.

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

Пример 12.6. Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вложенные таблицы</title>
 </head>
 <body>
  <table border="0" cellpadding="5" cellspacing="0">
   <tr>
    <td valign="top" bgcolor="#f0f0f0">
     <table cellpadding="2" cellspacing="1">
      <tr><td bgcolor="#ffffff">Lorem</td></tr>
      <tr><td bgcolor="#ffffff">Ipsum</td></tr>
      <tr><td bgcolor="#ffffff">Dolor</td></tr>
      <tr><td bgcolor="#ffffff">Sit</td></tr>
      <tr><td bgcolor="#ffffff">Amet</td></tr>
     </table>
    </td>
    <td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat.</td>
   </tr>
  </table>
 </body>
</html>

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

Рис. 12.8. Вид вложенных таблиц

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

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

Атрибуты тега | htmlbook.ru

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

align

Задает выравнивание содержимого ячейки по горизонтали. Возможные значения: left —- выравнивание по левому краю, center — по центру и right — по правому краю ячейки.

bgcolor

Устанавливает цвет фона ячейки. Используя этот атрибут совместно с атрибутом bgcolor тега <table> можно получить разнообразные цветовые эффекты в таблице.

colspan

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

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

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

height

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

rowspan

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

Рис. 12.3. Пример таблицы, где применяется вертикальное объединение ячеек

В приведенной на рис. 12.3 таблице содержатся две строки и две колонки, левые вертикальные ячейки объединены с помощью атрибута rowspan.

valign

Устанавливает вертикальное выравнивание содержимого ячейки. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Возможные значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии, при этом происходит привязка содержимого ячейки к одной линии.

width

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

HTML-таблиц


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


Пример

Компания Контакт Страна
Альфредс Футтеркисте Мария Андерс Германия
Торговый центр Moctezuma Франциско Чанг Мексика
Эрнст Гендель Роланд Мендель Австрия
Island Trading Хелен Беннет Великобритания
Винные погреба Смеющегося Вакха Йоши Таннамури Канада
Magazzini Alimentari Riuniti Джованни Ровелли Италия
Попробуй сам »

Определить таблицу HTML

Тег

определяет таблицу HTML.

Каждая строка таблицы определяется тегом

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














. Каждые данные / ячейка таблицы определяются с помощью а тег.

По умолчанию текст в

элементах выделены жирным шрифтом и по центру.

По умолчанию текст в

элементах являются обычными и выровнены по левому краю.

Пример

Простая таблица HTML:

<таблица>

Имя Фамилия Возраст
Джилл Смит 50
Ева Джексон 94

Попробуй сам »

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



Таблица HTML — Добавить границу

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

Не забудьте определить границы как для таблицы, так и для ячеек таблицы.


Таблица HTML — свернутые границы

Чтобы границы сжимались в одну границу, добавьте CSS border-collapse недвижимость:

Пример

table, th, td {
border: 1px сплошной черный;
граница-коллапс: коллапс;
}

Попробуй сам »

Таблица HTML — Добавить заполнение ячеек

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

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

Чтобы установить отступ, используйте свойство заполнения CSS :


Таблица HTML - заголовки с выравниванием по левому краю

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

Чтобы выровнять заголовки таблицы по левому краю, используйте свойство CSS text-align :


Таблица HTML - Добавить интервал между границами

Интервал границы указывает расстояние между ячейками.

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

Примечание: Если таблица имеет свернутые границы, border-spacing не действует.


Таблица HTML - ячейка, охватывающая множество столбцов

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

Пример











Имя Телефон
Билл Гейтс 55577854 55577855

Попробуй сам "

Таблица HTML - ячейка, занимающая много строк

Чтобы сделать ячейку более одной строки, используйте атрибут rowspan :

Пример













Имя: Билл Гейтс
Телефон: 55577854
55577855

Попробуй сам "

Таблица HTML - добавить подпись

Чтобы добавить заголовок к таблице, используйте тег :

Пример














Ежемесячная экономия
Месяц Экономия
Январь < / td>
100 долларов США
февраль 50 долларов США

Попробуй сам "

Примечание: Тег должен быть вставлен сразу после тега

.


Особый стиль для одного стола

Чтобы определить специальный стиль для одной конкретной таблицы, добавьте id атрибут к таблице:

Пример











Имя Фамилия Возраст
Ева
Джексон 94

Теперь вы можете определить специальный стиль для этой таблицы:

# t01 {
ширина: 100%;
цвет фона: # f1f1c1;
}

Попробуй сам "

И добавьте еще стилей:

# t01 tr: nth-child (четный) {
background-color: #eee;
}
# t01 tr: nth-child (нечетный) {
background-color: #fff;
}
# t01 th {
цвет: белый;
цвет фона: черный;
}

Попробуй сам "

Краткое содержание главы

  • Используйте элемент HTML для определения таблицы
  • Используйте элемент HTML
  • для определения строки таблицы
  • Используйте элемент HTML
  • , и :

    для определения данных таблицы
  • Используйте элемент HTML
  • , чтобы определить заголовок таблицы
  • Используйте элемент HTML
  • для определения заголовка таблицы
  • Используйте свойство CSS border , чтобы определить границу
  • Используйте свойство CSS border-collapse , чтобы свернуть границы ячеек
  • Используйте свойство CSS padding , чтобы добавить отступ к ячейкам
  • Используйте свойство CSS text-align для выравнивания текста ячейки
  • Используйте свойство CSS border-spacing , чтобы установить интервал между ячейками
  • Используйте атрибут colspan , чтобы ячейка охватывала несколько столбцов
  • Используйте атрибут rowspan , чтобы ячейка занимала много строк
  • Используйте атрибут id , чтобы однозначно определить одну таблицу

  • Упражнения HTML


    Теги таблицы HTML

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


    HTML тег thead


    Пример

    Таблица HTML с элементами





















    < td> 180 долларов


    Месяц Экономия
    январь 100 долларов
    февраль 80 долларов
    Sum

    Попробуй сам "

    Дополнительные примеры "Попробуйте сами" ниже.


    Определение и использование

    Тег используется для группировки содержимого заголовка в таблице HTML.

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

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

    Примечание: Элемент должен иметь один или несколько Теги внутри.

    Тег должен использоваться в следующем контексте: Как дочерний элемент

    после любого элементы и перед любыми , и элементы.

    Совет: Элементы

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


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

    и
    Элемент
    Есть Есть Есть Есть Есть

    Глобальные атрибуты

    Тег также поддерживает глобальные атрибуты в HTML.


    Атрибуты событий

    Тег также поддерживает атрибуты событий в HTML.



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

    Пример

    Стиль , и с помощью CSS:




    thead {color: green;}
    tbody {color: blue;}
    tfoot {color: red;}

    table, th, td {
    border: 1px сплошной черный;
    }






















    < td> 180 долларов


    Месяц Экономия
    январь 100 долларов
    февраль 80 долларов
    Sum

    Попробуй сам "

    Пример

    Как выровнять содержимое внутри (с помощью CSS):

    <таблица>


    Месяц
    Экономия




    январь
    100


    февраль
    80 долларов


    Попробуй сам "

    Пример

    Как выровнять содержимое по вертикали внутри (с помощью CSS):

    <таблица>


    месяц
    Экономия




    январь
    100


    февраль
    80 долларов


    Попробуй сам "

    Настройки CSS по умолчанию

    Большинство браузеров будут отображать элемент со следующими значениями по умолчанию:

    thead {
    display: таблица-заголовок-группа;
    выравнивание по вертикали: по центру;
    цвет границы: наследование;
    }


    Тег таблицы HTML


    Пример

    Простая таблица HTML, содержащая два столбца и две строки:

    <таблица>

    Месяц
    Экономия


    Январь
    г. 100

    Попробуй сам "

    Дополнительные примеры "Попробуйте сами" ниже.


    Определение и использование

    Тег

    определяет таблицу HTML.

    Таблица HTML состоит из одного элемента

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


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

    и .

    Элемент

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

    Таблица HTML может также включать

    ,
    Элемент
    <таблица> Есть Есть Есть Есть Есть

    Глобальные атрибуты

    Тег

    также поддерживает глобальные атрибуты в HTML.


    Атрибуты событий

    Тег

    также поддерживает атрибуты событий в HTML.



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

    Пример

    Как добавить свернутые границы в таблицу (с помощью CSS):




    table, th, td {
    border: 1px сплошной чернить;
    граница-коллапс: коллапс;
    }

    <таблица>













    Месяц Экономия
    январь 100
    февраль 80 долларов США


    Попробуй сам "

    Пример

    Как выровнять таблицу по правому краю (с помощью CSS):

    <таблица>

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как выровнять таблицу по центру (с помощью CSS):




    table, th, td {
    border: 1px сплошной чернить;
    }
    стол.по центру {
    маржа-слева: авто;
    маржа-право: авто;
    }

    <таблица >

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как добавить цвет фона в таблицу (с помощью CSS):

    <таблица>

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как добавить отступ в таблицу (с помощью CSS):




    table, th, td {
    border: 1px сплошной чернить;
    }

    th, td {
    padding: 10px;
    }















    Месяц Экономия
    январь 100
    февраль 80 долларов США



    Попробуй сам "

    Пример

    Как установить ширину таблицы (с помощью CSS):

    <таблица>

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

    Как создавать заголовки таблиц:












    Имя Электронная почта Телефон
    Джон Доу джон[email protected] 123-45-678

    Попробуй сам "

    Пример

    Как создать таблицу с подписью:

    <таблица>
    Ежемесячная экономия

    Месяц
    Экономия


    январь
    100


    февраль
    80 долларов

    Попробуй сам "

    Пример

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













    Имя Электронная почта Телефон
    Джон Доу джон[email protected] 123-45-678 212-00-546

    Попробуй сам "

    Связанные страницы

    Учебное пособие по HTML: таблицы HTML

    Ссылка на HTML DOM: объект таблицы

    Учебное пособие по CSS: таблицы стилей


    Настройки CSS по умолчанию

    Большинство браузеров будут отображать элемент

    со следующими значениями по умолчанию:

    Пример

    стол {
    дисплей: стол;
    Бордюр-обвал: раздельный;
    border-spacing: 2px;
    цвет рамки: серый;
    }

    Попробуй сам "

    : элемент Таблица - HTML: язык разметки гипертекста

    HTML-элемент

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

    элементов,
  • необязательный элемент
  • ,
  • либо одно из следующих:
    • ноль или более
  • элементов
  • один или несколько
  • элементов
  • дополнительный элемент
  • Категории контента Расход
    Разрешенное содержание В этом порядке:
    1. необязательный элемент
    ,
  • ноль или более
  • Отсутствие тега Нет, и начальный, и конечный тег являются обязательными.
    Допущенные родители Любой элемент, который принимает содержимое потока
    Неявная роль ARIA стол
    Разрешенные роли ARIA Любая
    Интерфейс DOM HTMLTableElement

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

    выровнять

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

    • слева : таблица отображается в левой части документа;
    • центр : таблица отображается в центре документа;
    • справа : таблица отображается в правой части документа.

    Установите margin-left и margin-right до auto или margin до 0 auto для достижения эффекта, аналогичного атрибуту align.

    bgcolor

    Цвет фона таблицы. Это шестизначный шестнадцатеричный код RGB с префиксом « # ». Также можно использовать одно из предопределенных цветовых словечек.

    Для достижения аналогичного эффекта используйте свойство CSS background-color .

    граница

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

    Для достижения аналогичного эффекта используйте сокращенное свойство CSS border .

    подкладка

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

    Для достижения аналогичного эффекта примените свойство border-collapse к элементу

    с его значением, установленным на свертывание, и свойство padding к элементам
    .

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

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

    Для достижения аналогичного эффекта примените свойство border-spacing к элементу

    . border-spacing не имеет никакого эффекта, если для border-collapse установлено значение collapse.

    рама

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

    Для достижения аналогичного эффекта используйте свойства border-style и border-width .

    правил

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

    • нет , что означает, что правила отображаться не будут; это значение по умолчанию;
    • групп , что приведет к отображению правил между группами строк (определенными элементами
    , и ) и между группами столбцов (определенными элементом и элементов) только;
  • строк , что приведет к отображению правил между строками;
  • столбцов , что приведет к отображению правил между столбцами;
  • все , что приведет к отображению правил между строками и столбцами.
  • Для достижения аналогичного эффекта примените свойство border к соответствующим элементам

    , , , или .

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

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

    Простая таблица

      <таблица>
      
    Джон Самка
    Джейн Самка

    Другие простые примеры

      

    Простая таблица с заголовком

    <таблица>
    Имя Фамилия
    Джон Самка
    Джейн Самка

    Таблица с thead, tfoot и tbody

    <таблица> Заголовок 1 Заголовок 2 Основной текст 1 Основной текст 2 <фут> Содержание нижнего колонтитула 1 Содержание нижнего колонтитула 2

    Таблица с colgroup

    <таблица> Страны Столицы Население Язык США Вашингтон, Д.С. 309 миллионов английский Швеция Стокгольм 9 миллионов шведский

    Таблица с colgroup и col

    <таблица> Лайм Лимон Оранжевый Зеленый желтый Оранжевый

    Простая таблица с подписью

    <таблица> Замечательная подпись Отличные данные

    Captions

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

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

    Область действия строк и столбцов

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

    Пример
      <таблица>
       Названия и значения цветов 
      
        
           Имя 
           HEX 
           HSLa 
           RGBa 
        
        
           Бирюзовый 
          #51F6F6 
            hsla (180, 90%, 64%, 1)  
            rgba (81, 246, 246, 1)  
        
        
           Золотарник 
          #F6BC57 
            hsla (38, 90%, 65%, 1)  
            rgba (246, 188, 87, 1)  
        
      
    
      

    Предоставление объявления scope = "col" в элементе поможет описать, что ячейка находится в верхней части столбца.Предоставление объявления scope = "row" в элементе поможет описать, что ячейка является первой в строке.

    Сложные таблицы

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

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

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

    таблиц BCD загружаются только в браузере.

    • CSS-свойства, которые могут быть особенно полезны для стилизации элемента :

      Как создавать таблицы HTML

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

      Создание таблиц в HTML

      Таблица

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

      Вы можете создать таблицу с помощью элемента

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

      В следующем примере демонстрируется самая простая структура таблицы.

        <таблица>
          
      Нет. Имя Возраст
      1 Питер Паркер 16
      2 Кларк Кент 34

      По умолчанию таблицы не имеют границ.Вы можете использовать свойство CSS border для добавления границ к таблицам. Кроме того, размер ячеек таблицы по умолчанию достаточно велик, чтобы уместить их содержимое. Чтобы добавить больше места вокруг содержимого в ячейках таблицы, вы можете использовать свойство CSS padding .

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

        table, th, td {
          граница: сплошной черный 1px;
      }
      th, td {
          отступ: 10 пикселей;
      }  

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

      .

      Кроме того, текст внутри элементов

      отображается жирным шрифтом, по умолчанию выровненный по центру ячейки. Чтобы изменить выравнивание по умолчанию, вы можете использовать свойство CSS text-align .

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

        таблица {
          граница-коллапс: коллапс;
      }
      th {
          выравнивание текста: слева;
      }  

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

      Примечание: Большинство атрибутов элемента

      , таких как border , cellpadding , cellspacing , width , align , и т. Д.для стилизации внешнего вида таблиц в более ранних версиях был удален в HTML5, поэтому избегайте их использования. Вместо этого используйте CSS для стилизации таблиц HTML.


      Объединение нескольких строк и столбцов

      Spanning позволяет расширить строки и столбцы таблицы на несколько других строк и столбцов.

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

      Давайте попробуем следующий пример, чтобы понять, как в основном работает colspan :

        <таблица>
          
      Имя Телефон
      Джон Картер 5550192 5550152

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

        <таблица>
          
      Имя: Джон Картер
      Телефон: 55577854
      55577855

      Добавление подписей к таблицам

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

      Элемент должен быть размещен сразу после открывающего тега

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

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

        <таблица>
          
      Информация о пользователях
      Нет. Имя Возраст
      1 Питер Паркер 16
      2 Кларк Кент 34

      Определение заголовка, текста и нижнего колонтитула таблицы

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

      В следующем примере демонстрируется использование этих элементов.

        <таблица>
          
              
                   Предметы 
                   Расходы 
              
          
          
              
                   Стационарный 
                   2 000 
              
              
                   Мебель 
                   10 000 
              
          
          <фут>
              
                   Итого 
                   12 000 
              
          
        

      Примечание: В HTML5 элемент может быть размещен до или после элементов и , но должен появляться после любых , и элементов.

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

      HTML | Таблицы - GeeksforGeeks

      < html >

      < голова >

      table, th, td {

      граница: 1 пиксель сплошной черный;

      граница-обрушение: обрушение;

      }

      th, td {

      отступ: 5 пикселей;

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

      }

      table # t01 {

      ширина: 100%;

      цвет фона: # f2f2d1;

      }

      стиль >

      головка >

      < корпус

      03

      < таблица стиль = "ширина: 100%" >

      < tr >

      < th > Имя th >

      < th > Фамилия th >

      < th > Возраст th >

      tr >

      < tr >

      < td > Priya td >

      < td > Sharma td >

      < td > 24 td >

      tr >

      < tr >

      < td > Arun td >

      < td > Singh td >

      < td > 32 td >

      tr >

      < tr >

      < td > Sam td >

      < td > Watson td >

      < td > 41 td >

      tr >

      таблица >

      < br />

      < br />

      < таблица id = "t01" >

      90 070 < tr >

      < th > Имя th >

      < th > Фамилия th >

      < th > Возраст th >

      tr >

      < tr >

      < td > Priya td >

      < td > Шарма td >

      < td > 24 td >

      tr >

      < tr >

      < td > Arun td >

      < td > Singh td >

      < td > 32 td >

      tr >

      < tr >

      < td > Sam td >

      < td > Watson td >

      < td > 41 td >

      tr >

      таблица >

      корпус >

      html >

      HTML Tables - Free, Online Tutorial

      В HTML вы можете создавать таблицы для своего веб-сайта, используя тег

      вместе с тегом , , и соответственно.

      В HTML5 мы можем размещать

      до или после тега . Они должны стоять после любых элементов и .

      Большинство атрибутов элемента

      и теги.

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

      ,
      не используются в HTML5.Если вы хотите стилизовать внешний вид таблицы, вы можете вместо этого использовать CSS.

      Объединение нескольких строк и столбцов¶

      Можно расширить строки и столбцы таблицы на множество других строк и столбцов.

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

      Добавление заголовков к таблицам¶

      Вы можете использовать элемент

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

      Синтаксис¶

      Тег

      состоит из пар. Контент записывается между открывающим тегом
      и закрывающим
      тегами.

      Пример тега HTML

      : ¶
        
      
        
           Название документа 
          <стиль>
            table, th, td {
              граница: 1px solid # 666;
            }
          
        
        
          <таблица>
            
      Месяц Дата
      январь 10.01.2014
      февраль 10.01.2014
      Попробуйте сами »

      Результат¶

      Месяц Дата
      Январь 10.01.2014
      Февраль 10.01.2014

      В данном примере мы используем тег

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

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

      Пример HTML-тега

      с атрибутом colspan: ¶
        
      
        
           Название документа 
          <стиль>
            table, th, td {
              граница: 1px solid # 666;
            }
          
        
        
          <таблица>
            
      Месяц и дата
      январь 10.01.2014
      февраль 10.01.2014
      Попробуйте сами »

      Результат¶

      Месяц и дата
      Январь 10.01.2014
      Февраль 10.01.2014

      То же самое можно сделать с строки, но с использованием атрибута rowspan.

      Пример HTML-тега

      с атрибутом rowspan: ¶
        
      
        
           Название документа 
          <стиль>
            table, th, td {
              граница: 1px solid # 666;
            }
          
        
        
          <таблица>
            
      Месяц Дата
      январь 10.01.2014
      февраль
      Попробуйте сами »

      Результат¶

      Месяц Дата
      Январь 10.

      Добавить комментарий

      Ваш адрес email не будет опубликован. Обязательные поля помечены *