Html свойства таблицы: Атрибуты тега | htmlbook.ru

Содержание

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

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

align

Задает выравнивание таблицы по краю окна браузера. Допустимые значения: left — выравнивание таблицы по левому краю, center — по центру и right — по правому краю. Когда используются значения left и right, текст начинает обтекать таблицу сбоку и снизу.

bgcolor

Устанавливает цвет фона таблицы.

border

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

cellpadding

Определяет расстояние между границей ячейки и ее содержимым. Этот атрибут добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, ухудшая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот атрибут не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

cellspacing

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

cols

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

rules

Сообщает браузеру, где отображать границы между ячейками. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку. В дополнение можно указать отображать линии между колонками (значение cols), строками (rows) или группами (groups), которые определяются наличием тегов <thead>, <tfoot>, <tbody>, <colgroup> или <col>. Толщина границы указывается с помощью атрибута border.

width

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

Строки таблицы | 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

Сетка представляет собой набор горизонтальных и вертикальных линий между ячейками таблицы, которые отделяют содержимое ячеек друг от друга. Сетка используется по умолчанию, если включить отображение границ с помощью атрибута 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>

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

Тег HTML таблица — справочник GuruWeba

Тег <table> используется для создания HTML таблиц.

HTML таблица <table> должна содержать хотя бы одну строку <tr> и хотя бы одну ячейку <th> — ячейку-заголовок или <td> — обычную ячейку в каждой строке.

Таблица, созданная тегом <table> может быть разделена на верхний, нижний колонтитулы и основную часть с помощью тегов <thead>, <tfoot>, <tbody>.

К таблице можно добавить подпись, используя тег <caption>.

Внутри таблицу <table> можно делить не только по строкам, но и по колонкам используя теги <col> и <colgroup>.

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

Подробнее про создание таблиц читайте в статье: Создание таблиц в HTML. Все о HTML таблицах.

Синтаксис

<table>HTML контент таблицы</table>

Примеры использования таблиц <table> в HTML коде

Ниже представлены 2 варианта HTML таблиц.

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

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

HTML код простой таблицы

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</tr>
</tbody>
</table>

Сложная HTML таблица

Подпись таблицы
Ячейка колонтитула 1 Ячейка колонтитула 2 Ячейка колонтитула 3
Ячейка колонтитула 4 Ячейка колонтитула 5 Ячейка колонтитула 6
Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4

HTML код сложной таблицы

<table>
<caption>Подпись таблицы</caption>
<colgroup>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>Ячейка колонтитула 1</th>
<th>Ячейка колонтитула 2</th>
<th>Ячейка колонтитула 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Ячейка колонтитула 4</th>
<th>Ячейка колонтитула 5</th>
<th>Ячейка колонтитула 6</th>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td colspan="2">Ячейка 4</td>
</tr>
</tbody>
</table>

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

Атрибуты

В HTML5 тег <table> не имеет атрибутов.

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

Атрибут Значения Описание
align left
right
center
justify
Задает правило выравнивания содержимого таблицы по горизонтали. В HTML5 используйте CSS.
bgcolor rgb
HTML hex
HTML colorname

Фоновый цвет. В HTML5 используйте CSS.

Примеры:
RGB: rgb(226,112,017), rgb(0, 40, 129).
HTML hex: #1a2a2c, #eee.
HTML colorname: black, yellow;

border число Ширина границ таблицы в пикселях. По умолчанию: 0 — границы не выводятся.
В HTML5 используйте CSS.
cellpadding число Отступ от границ ячеек до их содержимого. Значение указывает количество пикселей. В HTML5 используйте CSS.
cellspacing число Отступ между границами ячеек. Значение указывает количество пикселей. В HTML5 используйте CSS.
frame void
above
below
lhs
rhs
vsides
hsides
box
border

Определяет какие внешние границы будут отображены:
void — все границы скрыты;
above — только верхняя граница;
below — только нижняя граница;
lhs — только левая граница;
rhs — только правая граница;
vsides — вертикальные границы;
hsides — горизонтальные границы;
box или border — все границы.

В HTML5 используйте CSS.

rules none
groups
rows
cols
all

Определяет какие внутренние границы будут отображены:
none — все скрыты;
groups — границы групп;
rows — границы строк;
cols — границы колонок;
all — все;

В HTML5 используйте CSS.

summary текст Описание таблицы.
width пиксели
проценты
Ширина таблицы. В HTML5 используйте CSS.

CSS: Оформление HTML таблиц — рамка, размер, выравнивание текста

Табличные данные — информация, которую можно отобразить в виде таблицы и логически разделить по столбцам и строкам. Для отображения табличных данных на веб-страницах используется HTML тег <table>, представляющий из себя контейнер с содержимым таблицы. Контент HTML таблицы описывается построчно, каждая строка начинается с открывающего тега <tr> и заканчивается закрывающим тегом </tr>.

Внутри тега <tr> располагаются ячейки таблицы, представленные тегами <th> или <td>. Именно ячейки содержат весь контент таблицы, отображаемый на веб-странице.

Рамка таблицы

По умолчанию HTML таблица на веб-странице отображается без рамки, для добавления рамки к таблице, как и ко всем другим элементам, используется CSS свойство border. Но стоит обратить внимание на то, что если добавить рамку только к элементу <table>, то она отобразиться вокруг всей таблицы. Для того, чтобы ячейки таблицы тоже имели рамку, надо будет установить свойство border и для элементов <th> и <td>.

table, th, td { border: 1px solid black; }
Попробовать »

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

Даже если убрать промежутки между ячейками с помощью значения 0 свойства border-spacing, то рамки ячеек будут соприкасаться друг с другом, удваиваясь. Для объединения рамок ячеек используется свойство border-collapse. Оно может принимать два значения:

  • separate: является значением по умолчанию. Ячейки отображаются на небольшом расстоянии друг от друга, каждая ячейка имеет свою собственную рамку.
  • collapse: соединяет соседние рамки в одну, все промежутки между ячейками, а также между ячейками и рамкой таблицы игнорируются.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th { 
	    border: 4px outset blue;
		border-spacing: 5px;
	  }
      .first { border-collapse: collapse; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
    <br>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>
Попробовать »

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

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

th, td { padding: 7px; }
Попробовать »

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

table { width: 70%; }
th { height: 50px; }
Попробовать »

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

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

CSS свойство vertical-align позволяет управлять выравниванием текстового содержимого по вертикали. По умолчанию текст выровнен вертикально по центру ячеек. Вертикальное выравнивание можно переопределить с помощью одного из значений свойства vertical-align:

  • top: текст выравнивается по верхней границе ячейки
  • middle: выравнивает текст по центру (значение по умолчанию)
  • bottom: текст выравнивается по нижней границе ячейки
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table, td, th {
        border: 1px solid black; 
        border-collapse: collapse;
      }
      table { width: 70% }
      td { text-align: right; }
      th { height: 50px; }
      . test1 { vertical-align: top; }
      .test2 { vertical-align: bottom; }
    </style>
  </head>

  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td></tr>
    </table>
  </body>
</html>
Попробовать »

Чередование фонового цвета строк таблицы

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      table {
        width: 70%;
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #98bf21;
        padding: 3px 7px 2px 7px;
      }
      th {
        text-align: left;
        padding: 5px;
        background-color: #A7C942;
        color: #fff;
      }
      . alt td { background-color: #EAF2D3; }
    </style>
  </head>
  <body>
    <table>
      <tr><th>Имя</th><th>Фамилия</th><th>Положение</th></tr>
      <tr><td>Гомер</td><td>Симпсон</td><td>отец</td></tr>
      <tr><td>Мардж</td><td>Симпсон</td><td>мать</td></tr>
      <tr><td>Барт</td><td>Симпсон</td><td>сын</td></tr>
      <tr><td>Лиза</td><td>Симпсон</td><td>дочь</td></tr>
    </table>
  </body>
</html>
Попробовать »

Добавлять атрибут class к каждой второй строке довольно утомительное занятие. В CSS3 был добавлен псевдо-класс :nth-child, позволяющий решить эту проблему альтернативным путем. Теперь эффекта чередования можно достичь исключительно средствами CSS, не прибегая к изменению HTML-разметки документа. С помощью псевдо-класса :nth-child можно выбрать все четные или нечетные строки таблицы, используя одно из ключевых слов: even (четные) или odd (нечетные):

tr:nth-child(odd) { background-color: #EAF2D3; }
Попробовать »

Изменение фона строки при наведении курсора

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

Реализовать такой эффект очень просто, для этого нужно добавить псевдо-класс :hover к селектору строки таблицы и задать нужный цвет фона:

tr:hover { background-color: #E0E0FF; }
Попробовать »

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

Выравнивание HTML таблицы по центру возможно только в том случае, если ширина таблицы меньше, чем ширина её родительского элемента. Чтобы выровнять таблицу по центру, надо воспользоваться свойством margin, задав ему минимум два значения: первое значение будет отвечать за внешний отступ таблицы сверху и снизу, а второе — за автоматическое выравнивание по центру:

table { margin: 10px auto; }
Попробовать »

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

table { margin: 10px auto 30px; }

HTML тег

Тег <table> служит контейнером для элементов, которые определяют содержимое HTML таблицы. Число строк, ячеек и заголовок таблицы задают с помощью тегов <tr>, <td> и <th>.

Строки в таблице задаются парным блочным тегом <tr>. Каждая строка в таблице записывается в отдельный тег <tr>.

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

Заголовок строки или столбца таблицы задается при помощи тега <th>. Тег <th> размещается в первой строке таблицы. В браузере он автоматически выделяется жирным.

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

Для создания более сложных таблиц используются теги <caption>, <col>, <colgroup>, <tbody>, <thead> и <tfoot>, которые вкладываются в тег <table>.

Синтаксис ¶

Тег <table> парный, содержимое записывается между открывающим (<table>) и закрывающим (</table>) тегами.

Пример¶

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
  </head>
  <body>
    <table  border="1">
      <tr>
        <th>Месяц</th>
        <th>Число</th>
      </tr>
      <tr>
        <td>Июнь</td>
        <td>10.06.2018</td>
      </tr>
      <tr>
        <td>Июль</td>
        <td>15.07.2018</td>
      </tr>
    </table>
  </body>
</html>
Попробуйте сами!

Результат¶

Атрибуты ¶

Атрибуты тега <table> не поддерживаются в HTML5. Для стилизации таблиц используйте CSS стили.

Тег <table> поддерживает также глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <table> ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега <table>:

Цвет текста внутри тега <table>:

Стили форматирования текста для тега <table>:

Другие свойства для тега <table>:

Таблицы HTML уроки для начинающих академия


Пример таблицы HTML

Компании Контакты Страны
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy

Определение таблицы HTML

Таблица HTML определяется тегом <table>.

Каждая строка таблицы определяется тегом <tr>. Заголовок таблицы определяется с помощью тега <th>. По умолчанию заголовки таблиц являются полужирными и центрированными. Табличные данные/ячейки определяются с помощью <td> тега.

Пример

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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



Таблица HTML-Добавление границы

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

Граница задается с помощью свойства CSS border:

Пример

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

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


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

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

Пример

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


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

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

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

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

Пример

th, td {
    padding: 15px;
}


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

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

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

Пример

th {
    text-align: left;
}


Таблица HTML-Добавление интервала границы

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

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

Пример

table {
    border-spacing: 5px;
}

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


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

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

Пример

<table>
  <tr>
    <th>Name</th>
    <th colspan=»2″>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>


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

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

Пример

<table>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan=»2″>Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>


Таблица HTML-Добавление заголовка

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

Пример

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

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


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

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

Пример

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

table#t01 {
    width: 100%;
    background-color: #f1f1c1;
}

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

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}


Справка

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

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

    Тег Описание
    <table> Определяет таблицу
    <th> Определяет ячейку заголовка в таблице
    <tr> Определяет строку в таблице
    <td> Определяет ячейку в таблице
    <caption> Определяет заголовок таблицы
    <colgroup> Задает группу из одного или нескольких столбцов в таблице для форматирования
    <col> Задает свойства столбца для каждого столбца в элементе <colgroup>
    <thead> Группирует содержимое заголовка в таблице
    <tbody> Группирует содержимое тела в таблице
    <tfoot> Группирует содержимое нижнего колонтитула в таблице

Тег таблицы 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 to auto or margin to 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

      Чтение: Изучение веб-дизайна , Глава 10


      Использование таблиц в HTML

      • Для представления строк и столбцов данных (пример )

      • Для точного позиционирования текста (, пример )

      • Для более предсказуемого расположения изображений, текста и т. Д. объекты ( пример )

      • Для принудительного размещения на веб-странице определенного макета, позволяющего для заголовков, навигационных меню, рекламы и т. д.( пример )

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

      Теперь давайте разберемся, как это сделать.

      Части стола

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

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

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

      Сама таблица должна быть определена с помощью тегов таблицы

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

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

      .

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

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

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

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

      HTML-код основной таблицы показан ниже.

      и












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

      Ряд 1, столбец 1 шт.

      Ряд 1, столбец 2 поз.

      Ряд 1, столбец 3 поз.

      Ряд 2, столбец 1 позиция

      Ряд 2, столбец 2 позиция

      Ряд 2, столбец 3 поз.

      Итоговая таблица показана ниже.

      Заголовок таблицы
      Ряд 1, столбец 1 шт. Ряд 1, столбец 2 поз. Ряд 1, столбец 3 поз.
      Строка 2, столбец 1 элемент Строка 2, столбец 2 поз. Строка 2, столбец 3 поз.

      Обратите внимание, что мне пришлось добавить атрибут «border = 1» для определения ячеек. таблицы со строками.

      Атрибуты таблицы

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

      .

      Границы

      Границу вокруг таблицы можно редактировать по ширине и цвет. Чтобы изменить ширину границы таблицы, используйте атрибут border = "p" где p = количество пикселей, ширина которых должна быть.Обратите внимание, что с помощью этого атрибут также добавляет границы к ячейкам.

      Граница приведенной ниже таблицы составляет 10 пикселей. Это делается с помощью тег таблицы

      .

      Товар 1 Шт. 2
      Позиция 3 Шт. 4

      Чтобы границы не было, установите border = "0".

      Шт.1 Шт. 2
      Позиция 3 Шт. 4

      Цвета и фон

      Чтобы изменить цвет границы, используйте атрибут bordercolor = "color" где цвет - это тот же формат, что и все другие веб-цвета, которые мы использовали.В приведенной ниже таблице для параметра bordercolor установлено значение # ff00ff с помощью тега table.

      .

      Шт.1 Шт. 2
      Позиция 3 Шт. 4

      Чтобы изменить цвет фона, используйте атрибут bgcolor = "color". В таблице ниже цвет фона установлен на # 00ff00 с таблицей. тег

      .

      Шт.1 Шт. 2
      Позиция 3 Шт. 4

      Чтобы установить мозаичный фон для таблицы, используйте background = "URL", где filename - имя используемого мозаичного изображения.Например, в том же каталоге, где находятся эти заметки, находится графический файл bg.gif. В приведенной ниже таблице он используется в качестве фона с помощью таблицы тег

      Шт.1 Шт. 2
      Позиция 3 Шт. 4

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

      Расстояние между ячейками можно увеличить с помощью cellspacing = "p" атрибут, где p равно количеству пикселей, помещаемых между ячейками.В пример ниже получает интервал ячейки 10 пикселей с тегом таблицы

      Шт.1 Шт. 2
      Позиция 3 Шт. 4

      Набивка ячейки

      Интервал вокруг элемента в каждой ячейке можно увеличить с помощью cellpadding = "p" атрибут, где p равно количеству пикселей между элементом и конец ячейки.В приведенном ниже примере получается заполнение ячейки 10 пикселей. с тегом таблицы

      .

      Товар 1 Шт. 2
      Позиция 3 Шт. 4

      Выравнивание стола

      Шт.1 Шт. 2
      Позиция 3 Шт. 4

      Вы также можете указать, как таблица размещается по горизонтали в браузере. window с помощью атрибута align.Его формат align = "alignment", где выравнивание равно слева, по центру или справа. Если вы установите выравнивание по левому или правому краю, текст будет вокруг стола, как и в случае с таблицей справа от этого абзаца. Центр, однако, не позволяет тексту обтекать его, что приводит к простому центрированный стол, как показано ниже.

      Шт.1 Шт. 2
      Позиция 3 Шт. 4

      Ширина стола

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

      Товар 1 Шт. 2
      Позиция 3 Шт. 4

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

      Товар 1 Шт. 2
      Позиция 3 Шт. 4

      Атрибуты данных таблицы

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

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

      • Чтобы изменить цвет фона отдельной ячейки, используйте атрибут bgcolor = "color" внутри тега .
      • Чтобы добавить мозаичное фоновое изображение в одну ячейку, используйте атрибут background = "URL" внутри тега .
      • Чтобы установить ширину отдельной ячейки, используйте атрибут где w - либо процент от ширины таблицы (например, "25%") или фиксированное количество пикселей (например, «25»).

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

      Наконец, вы можете заставить ячейку таблицы охватывать более одного столбец или строка с использованием атрибута COLSPAN = "n" или ROWSPAN = "n", где n = число столбцов или строк, которые нужно охватить.

      Эти данные таблицы занимают первые два столбца. (COLSPAN = "2")
      Эти данные таблицы охватывают последние два столбца. (COLSPAN = "2")
      Эти данные таблицы занимают первые две строки. (ROWSPAN = "2")

      Таблицы для встраивания

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

      Каждый из них представляет собой элементы одной таблицы. Каждый из этих элементов представляет собой отдельную таблицу.
      Каждый из них представляет собой элементы одной таблицы. Пункты ниже (1, 2, 3 и т. Д.) Содержатся в «подтаблице».

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

      Разработано Дэвидом Тарноффом для разделов CSCI 1710 и 5011 в ETSU

      Таблица

      HTML - javatpoint

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

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

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

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

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

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


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

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

      Пример таблицы HTML

      Рассмотрим пример тега HTML-таблицы. Его результат показан выше.

      <таблица>

      First_NameLast_NameMarks
      SonooJaiswal60
      ДжеймсУильям80
      СватиСирони82
      ЧетнаSingh72

      Проверить это сейчас

      Выход:

      Имя Фамилия Знаков
      Sonoo Jaiswal 60
      Джеймс Уильям 80
      Свати Сирони 82
      Четна Singh 72

      В приведенной выше таблице html 5 строк и 3 столбца = 5 * 3 = 15 значений.


      Таблица HTML с рамкой

      Есть два способа указать границу для HTML-таблиц.

      1. По атрибуту границы таблицы в HTML
      2. Свойство границы в CSS

      1) Атрибут границы HTML

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

      First_NameLast_NameMarks
      SonooJaiswal60
      ДжеймсУильям80
      СватиСирони82
      ЧетнаSingh72

      Проверить это сейчас

      Выход:

      Имя Фамилия Знаков
      Sonoo Jaiswal 60
      Джеймс Уильям 80
      Swati Sironi 82
      Chet Singh 72

      2) CSS Border property

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

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

      Проверить это сейчас

      Вы можете свернуть все границы в одной рамке с помощью свойства border-collapse. Это превратит границу в одну.

      <стиль> table, th, td { граница: сплошной черный цвет 2px; граница-коллапс: коллапс; }

      Проверить это сейчас

      Выход:

      Имя Фамилия Марок
      Sonoo Jaiswal 60
      Джеймс William 80
      Swati Sironi 82
      Chetna Singh 72

      Таблица HTML с заполнением ячейки

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

      1. По атрибуту cellpadding таблицы в HTML
      2. По свойству заполнения в CSS

      Атрибут cellpadding тега таблицы HTML теперь устарел.Рекомендуется использовать CSS. Итак, давайте посмотрим на код CSS.

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

      Проверить это сейчас

      Выход:

      Имя Фамилия Марок
      Sonoo Jaiswal 60
      Джеймс William 80
      Swati Sironi 82
      Chetna Singh 72

      Таблица HTML ширина:

      Мы можем указать ширину таблицы HTML с помощью свойства CSS width .Можно указать в пикселях или процентах.

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

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

      Пример:

      таблица <стиль> Таблица{ граница-коллапс: коллапс; ширина: 100%; } th, td { граница: 2 пикселя сплошного зеленого цвета; отступ: 15 пикселей; } <таблица> 1 заголовок 1 заголовок 1 заголовок 1данных 1данных 1данных 2 данных 2 данных 2 данных 3 данных 3 данных 3 данных

      Проверить это сейчас

      Выход:


      Таблица HTML с colspan

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

      Он разделит одну ячейку / строку на несколько столбцов, а количество столбцов будет зависеть от значения атрибута colspan.

      Давайте посмотрим на пример, охватывающий два столбца.

      Код CSS:

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

      HTML код:

      <таблица> Имя Мобильный № Аджит Маурья 7503520801 9555879135

      Проверить это сейчас

      Выход:

      Имя Мобильный No.
      Аджит Маурья 7503520801 9555879135

      Таблица HTML с диапазоном строк

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

      Он разделит ячейку на несколько строк. Количество разделенных строк будет зависеть от значений rowspan.

      Давайте посмотрим на пример, охватывающий две строки.

      Код CSS:

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

      HTML код:

      <таблица> Имя Аджит Маурья Мобильный №7503520801 9555879135

      Проверить это сейчас

      Выход:

      Имя Аджит Маурья
      Мобильный № 7503520801
      9555879135

      Таблица HTML с заголовком

      Над таблицей отображается

      HTML-заголовок. Его следует использовать только после тега таблицы.

      <таблица> Записи учащихся First_NameLast_NameMarks VimalJaiswal70 MikeWarn60 ShaneWarn42 ДжейМалхотра62

      Проверить это сейчас

      Стилизация HTML-таблицы четных и нечетных ячеек

      Код CSS:

      <стиль> table, th, td { граница: сплошной черный 1px; граница-коллапс: коллапс; } th, td { отступ: 10 пикселей; } table # alter tr: nth-child (even) { цвет фона: #eee; } table # alter tr: nth-child (odd) { цвет фона: #fff; } table # alter th { цвет белый; цвет фона: серый; }

      Проверить это сейчас

      Выход:

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

      Поддерживающие браузеры

      HTML-таблиц со стилями CSS

      Дизайн CSS-таблиц

      Модель таблицы

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

      Простая структура таблицы HTML с 3 строками и 3 столбцами.


      Исходный код HTML
      Рулон No Имя Команда
      1001 Джон Красный
      1002 Питер Синий
      1003 Генри Зеленый

      Как установить ширину и высоту таблицы в CSS

      Чтобы указать ширину и высоту таблицы, используйте свойства CSS width, height .Здесь ширина таблицы равна 30%, а высота td установлена ​​на 40 пикселей.

      Таблица { ширина: 40%; } тд { высота: 40 пикселей; }
      вывод

      Исходный код
      Рулон No Имя Команда
      1001 Джон Красный
      1002 Питер Синий
      1003 Генри Зеленый

      Как установить ширину столбца таблицы в CSS

      Чтобы указать ширину столбца в CSS, используйте свойство width для td.

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

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

      Вы можете установить высоту строки с помощью свойства CSS line-height , которое оно устанавливает для каждого tr.

      tr { высота строки: 50 пикселей; }

      Когда вы устанавливаете это свойство, каждая строка имеет высоту 50 пикселей.


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

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

      таблица, th, td { граница: сплошной зеленый 2px; }

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


      Полный исходный код
      Рулон No Имя Команда
      1001 Джон Красный
      1002 Питер Синий
      1003 Генри Зеленый

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

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

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

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

      Таблица { граница-коллапс: коллапс; }
      вывод

      CSS Table Text Align

      В CSS можно выровнять текст по горизонтали и вертикали.Для горизонтального выравнивания вы можете использовать свойство CSS text-align, а для вертикального вы можете использовать свойство vertical-align.



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

      CSS Table Cell Padding

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

      тд { отступ: 10 пикселей; } th { отступ: 20 пикселей; }
      вывод

      CSS Table Cell Spacing

      Атрибут Cellspacing помещает пространство вокруг каждой ячейки в таблице.Чтобы указать интервал между ячейками в CSS, используйте свойство CSS border-spacing.

      таблица, th, td { граница: сплошной зеленый 2px; интервал границы: 20 пикселей; }
      выход

      Полный исходный код
      Рулон No Имя Команда
      1001 Джон Красный
      1002 Питер Синий
      1003 Генри Зеленый

      HTML: тег

      HTML5 Документ

      Если вы создали новую веб-страницу в HTML5, ваш тег

      может выглядеть так:

        
      
      
      
      
       Пример HTML5 от www.techonthenet.com 
      
      
      
      <таблица>
        
      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

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

      , который имеет 3 столбца и 4 строки.Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      HTML 4.01 Переходный документ

      Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег

      может выглядеть так:

        
      
      
      
      
       HTML 4.01 Переходный пример от www.techonthenet.com 
      
      
      
      <таблица>
        
      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

      В этом HTML 4.01 Пример переходного документа, мы создали таблицу с помощью тега

      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      Переходный документ XHTML 1.0

      Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег

      может выглядеть так:

        
      
      
      
      
       Переходный пример XHMTL 1.0 от www.techonthenet.com 
      
      
      
      <таблица>
        
      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

      В этом XHTML 1.0 Пример переходного документа, мы создали таблицу с помощью тега

      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      Строгий документ XHTML 1.0

      Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег

      может выглядеть так:

        
      
      
      
      
       Строгий пример XHTML 1.0 от www.techonthenet.com 
      
      
      
      <таблица>
        
      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

      В этом XHTML 1.0 Пример строгого документа, мы создали таблицу с помощью тега

      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      XHTML 1.1, документ

      Если вы создали новую веб-страницу в XHTML 1.1, ваш тег

      может выглядеть так:

        
      
      
      
      
       XHTML 1.1 Пример с сайта www.techonthenet.com 
      
      
      
      <таблица>
        
      Заголовок столбца 1 Заголовок столбца 2 Заголовок столбца 3
      Данные в столбце 1, строке 2 Данные в столбце 2, строке 2 Данные в столбце 3, строке 2
      Данные в столбце 1, строке 3 Данные в столбце 2, строке 3 Данные в столбце 3, строке 3
      Данные в столбце 1, строке 4 Данные в столбце 2, строке 4 Данные в столбце 3, строке 4

      В этом XHTML 1.1 Пример документа, мы создали таблицу с помощью тега

      , который имеет 3 столбца и 4 строки. Строка 1 таблицы определяется с помощью первого тега . Он имеет 3 ячейки заголовка таблицы, определенные с помощью тега
      . В строках 2–4 таблицы используется тег для определения стандартных ячеек таблицы.

      Учебное пособие по

      HTML-таблицам

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

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

      Основные элементы таблицы

      В HTML вы создаете таблицы, используя элемент

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

      Каждый набор тегов

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

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

      .

      <таблица>
      Заголовок таблицы Заголовок таблицы Заголовок таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы

      Попробуй

      Граница стола

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

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

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

      .

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

      Для этого просто поместите стили границ внутри элемента

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

      Пример таблицы <стиль> table, th, td { граница: сплошной оранжевый 1px; } <таблица>
      Заголовок таблицы Заголовок таблицы Заголовок таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы

      Попробуй

      Спецификация HTML5 фактически включает атрибут border для таблиц, но обычно этого недостаточно для большинства целей проектирования.Вы можете использовать border = "0" без рамки или border = "1" для границы. Однако в HTML нет механизмов для стилизации границы.

      Таким образом, большинство разработчиков используют CSS для добавления границ к таблицам. Они часто не беспокоятся об атрибуте border .

      Кроме того, атрибут border поддерживается только версией HTML W3C (но не версией WHATWG).

      Разрушение границы

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

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

      Чтобы свернуть границу, добавьте в таблицу стилей следующее.

      Таблица { граница-коллапс: коллапс; }

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

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

      Пример таблицы <стиль> Таблица { граница-коллапс: коллапс; } th, td { граница: сплошной оранжевый 1px; } <таблица>
      Заголовок таблицы Заголовок таблицы Заголовок таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы

      Попробуй

      Вот еще кое-что о границах таблицы, если вам интересно.

      Набивка ячейки

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

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

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

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

      Пример таблицы <стиль> Таблица { граница-коллапс: коллапс; } th, td { граница: сплошной оранжевый 1px; отступ: 10 пикселей; } <таблица>
      Заголовок таблицы Заголовок таблицы Заголовок таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы

      Попробуй

      Ширина стола

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

      Вот пример использования процентов.

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

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

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

      Пример таблицы <стиль> Таблица { граница-коллапс: коллапс; ширина: 100%; } th, td { граница: сплошной оранжевый 1px; отступ: 10 пикселей; } <таблица>
      Заголовок таблицы Заголовок таблицы Заголовок таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы Ячейка таблицы

      Попробуй

      Чередование цвета фона

      Цвет фона может быть добавлен к элементам HTML с помощью свойства CSS background-color .

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

      Теперь давайте воспользуемся небольшим трюком CSS, чтобы применить чередующиеся цвета к строкам нашей таблицы. Итак, первая строка будет цветом A, вторая - цветом B, третья - цветом A, четвертая - цветом B и так далее.

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

      table.alt tr: nth-child (even) { цвет фона: #eee; } table.alt tr: nth-child (odd) { цвет фона: #fff; }

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

      Вот как выглядит документ с этими стилями.

      Пример таблицы <стиль> Таблица { граница-коллапс: коллапс; ширина: 100%; } th, td { граница: 1px solid #ccc; отступ: 10 пикселей; } Таблица.alt tr: nth-child (even) { цвет фона: #eee; } table.alt tr: nth-child (odd) { цвет фона: #fff; } <таблица>
      Заголовок таблицы Заголовок таблицы
      Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы
      Ячейка таблицы Ячейка таблицы

      Попробуй

      Колспан

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

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

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

      Мой пример <стиль> Таблица { граница-коллапс: коллапс; ширина: 100%; } th, td { граница: 1px solid #ccc; отступ: 10 пикселей; } <таблица> Заголовок таблицы Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

      Попробуй

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

      Рядный пролет

      Rowspan предназначен для строк точно так же, как colspan для столбцов (rowspan позволяет ячейке занимать несколько строк).

      Мой пример <стиль> Таблица { граница-коллапс: коллапс; ширина: 100%; } th, td { граница: 1px solid #ccc; отступ: 10 пикселей; } <таблица> Заголовок таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы Ячейка таблицы

      Попробуй

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

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

      HTML должен использоваться для предоставления структуры и смысла документа. Для его представления следует использовать CSS.

      Элементы стола

      Вот список элементов таблицы, доступных в HTML5.

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

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

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