Теги таблицы html: Таблицы | htmlbook.ru

Таблицы — HTML — Дока

Кратко

Секция статьи «Кратко»

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

В HTML для создания таблиц существует набор семантических тегов:

• <table>
• <thead>
• <tbody>
• <tfoot>
• <th>
• <tr>
• <td>

Пример

Секция статьи «Пример»

Создадим таблицу с первыми тремя местами в топ-250 лучших фильмов:

<table>  <thead>    <tr>      <th>Место</th>      <th>Оценка</th>      <th>Название фильма</th>      <th>Год выхода</th>    </tr>  </thead>  <tbody>    <tr>      <td>1</td>      <td>9. 1</td>      <td>Зелёная миля</td>      <td>1999</td>    </tr>    <tr>      <td>2</td>      <td>9.1</td>      <td>Побег из Шоушенка</td>      <td>1994</td>    </tr>    <tr>      <td>3</td>      <td>8.6</td>      <td>Властелин колец: Возвращение Короля</td>      <td>2003</td>    </tr>  </tbody></table>
          <table>
  <thead>
    <tr>
      <th>Место</th>
      <th>Оценка</th>
      <th>Название фильма</th>
      <th>Год выхода</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>9.1</td>
      <td>Зелёная миля</td>
      <td>1999</td>
    </tr>
    <tr>
      <td>2</td>
      <td>9.1</td>
      <td>Побег из Шоушенка</td>
      <td>1994</td>
    </tr>
    <tr>
      <td>3</td>
      <td>8.  6</td>
      <td>Властелин колец: Возвращение Короля</td>
      <td>2003</td>
    </tr>
  </tbody>
</table>

Открыть демо в новой вкладке

Структурные теги

Секция статьи «Структурные теги»

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

<table> Секция статьи »

Самый важный тег для создания таблицы — это <table>. С него всё начинается. Им всё заканчивается. Встречая этот тег в разметке, браузер понимает, что дальше будет таблица.

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

<table></table>
          <table>
</table>

<tr> Секция статьи ««

Любая таблица в первую очередь состоит из строк. Чтобы в таблице появились строки, используйте парный тег <tr>. Сколько нужно строк — столько раз нужно написать <tr> внутри <table>.

Пока добавим три строчки в таблицу:

<table>  <tr></tr>  <tr></tr>  <tr></tr></table>
          <table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

«tr» расшифровывается как «table row» и переводится «ряд таблицы».

<td> Секция статьи «

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

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

Ячейки теоретически могут существовать и без <tr>. Они будут выстраиваться в строку. Чтобы новые ячейки встали в новую строку, мы как раз и используем <tr>.

<table>  <tr>    <td>iPhone 12 Pro</td>    <td>$999</td>  </tr>  <tr>    <td>iPhone 12</td>    <td>$799</td>  </tr>  <tr>    <td>iPhone 12 mini</td>    <td>$699</td>  </tr></table>
          <table>
  <tr>
    <td>iPhone 12 Pro</td>
    <td>$999</td>
  </tr>
  <tr>
    <td>iPhone 12</td>
    <td>$799</td>
  </tr>
  <tr>
    <td>iPhone 12 mini</td>
    <td>$699</td>
  </tr>
</table>
 

«td» расшифровывается как «table data» и переводится «данные таблицы».

Теперь в нашей таблице 3 строки. В каждой строке по две ячейки. Из этих ячеек складывается два столбца.

Открыть демо в новой вкладке

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

В принципе, можно использовать уже знакомые нам <tr> и <td>:

<table>  <tr>    <td>Модель</td>    <td>Цена</td>  </tr>  <tr>    <td>iPhone 12 Pro</td>    <td>$999</td>  </tr>  <tr>    <td>iPhone 12</td>    <td>$799</td>  </tr>  <tr>    <td>iPhone 12 mini</td>    <td>$699</td>  </tr></table>
           <table>
  <tr>
    <td>Модель</td>
    <td>Цена</td>
  </tr>
  <tr>
    <td>iPhone 12 Pro</td>
    <td>$999</td>
  </tr>
  <tr>
    <td>iPhone 12</td>
    <td>$799</td>
  </tr>
  <tr>
    <td>iPhone 12 mini</td>
    <td>$699</td>
  </tr>
</table>

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

Открыть демо в новой вкладке

<th> Секция статьи «

Специально для заголовков ячеек или строк есть тег

<th>. Обернём в этот парный тег заголовки:

<table>  <tr>    <th>Модель</th>    <th>Цена</th>  </tr>  <tr>    <td>iPhone 12 Pro</td>    <td>$999</td>  </tr>  <tr>    <td>iPhone 12</td>    <td>$799</td>  </tr>  <tr>    <td>iPhone 12 mini</td>    <td>$699</td>  </tr></table>
          <table>
  <tr>
    <th>Модель</th>
    <th>Цена</th>
  </tr>
  <tr>
    <td>iPhone 12 Pro</td>
    <td>$999</td>
  </tr>
  <tr>
    <td>iPhone 12</td>
    <td>$799</td>
  </tr>
  <tr>
    <td>iPhone 12 mini</td>
    <td>$699</td>
  </tr>
</table>

К ячейкам, обёрнутым тегом <th>, применяются дефолтные стили: текст становится жирным и выравнивается по центру ячейки.

Это помогает внешне отделить заголовки от остальных данных таблицы.

Открыть демо в новой вкладке

«th» расшифровывается как «table header» и переводится «заголовок таблицы».

Теги логической группировки

Секция статьи «Теги логической группировки»

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

Во-первых, это красиво 😄

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

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

<thead> Секция статьи ««

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

<thead> по своей семантике похож на тег <header>, только его «влияние» распространяется в пределах таблицы.

Наличие этих тегов в разметке удобно и с точки зрения стилизации. Можно разом применить стили к блоку целиком, используя селекторы thead, tbody или table :not(tbody) (почему бы и нет? 😏)

Добавим в нашу таблицу <thead>:

<table>  <thead>    <tr>      <th>Модель</th>      <th>Цена</th>    </tr>  </thead>  <tr>    <td>iPhone 12 Pro</td>    <td>$999</td>  </tr>  <tr>    <td>iPhone 12</td>    <td>$799</td>  </tr>  <tr>    <td>iPhone 12 mini</td>    <td>$699</td>  </tr></table>
          <table>
  <thead>
    <tr>
      <th>Модель</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tr>
    <td>iPhone 12 Pro</td>
    <td>$999</td>
  </tr>
  <tr>
    <td>iPhone 12</td>
    <td>$799</td>
  </tr>
  <tr>
    <td>iPhone 12 mini</td>
    <td>$699</td>
  </tr>
</table>
 

<tbody> Секция статьи ««

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

Этот тег схож по семантике с <main>, но в пределах таблицы.

Обернём все айфоны в один <tbody> и добавим пару андроидов, чтобы показать, что может быть больше одного блока данных:

<table>  <thead>    <tr>      <th>Модель</th>      <th>Цена</th>    </tr>  </thead>  <tbody>    <tr>      <td>iPhone 12 Pro</td>      <td>$999</td>    </tr>    <tr>      <td>iPhone 12</td>      <td>$799</td>    </tr>    <tr>      <td>iPhone 12 mini</td>      <td>$699</td>    </tr>  </tbody>  <tbody>    <tr>      <td>Xiaomi Mi 10</td>      <td>$768</td>    </tr>    <tr>      <td>Xiaomi Black Shark 3 128 Gb</td>      <td>$529</td>    </tr>  </tbody></table>
          
 <table>
  <thead>
    <tr>
      <th>Модель</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>iPhone 12 Pro</td>
      <td>$999</td>
    </tr>
    <tr>
      <td>iPhone 12</td>
      <td>$799</td>
    </tr>
    <tr>
      <td>iPhone 12 mini</td>
      <td>$699</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Xiaomi Mi 10</td>
      <td>$768</td>
    </tr>
    <tr>
      <td>Xiaomi Black Shark 3 128 Gb</td>
      <td>$529</td>
    </tr>
  </tbody>
</table>
 

<tfoot> Секция статьи ««

Тег <tfoot> нужен для строки «Итого» — некой строки с итогом данных таблицы. В таблице может быть только один блок <tfoot>.

Браузер всегда отрисовывает <tfoot> внизу таблицы, даже если этот блок идёт в разметке не последним (хоть это и не очень логично).

Если по какой-то причине вы не использовали в таблице <thead> или <tbody>, то футер будет отрисован после всех <tr>.

По семантике этот тег похож на <footer>, только в пределах таблицы.

Добавим в нашу таблицу строку со средней ценой всех телефонов:

<table>  <thead>    <tr>      <th>Модель</th>      <th>Цена</th>    </tr>  </thead>  <tbody>    <tr>      <td>iPhone 12 Pro</td>      <td>$999</td>    </tr>    <tr>      <td>iPhone 12</td>      <td>$799</td>    </tr>    <tr>      <td>iPhone 12 mini</td>      <td>$699</td>    </tr>  </tbody>  <tbody>    <tr>      <td>Xiaomi Mi 10</td>      <td>$768</td>    </tr>    <tr>      <td>Xiaomi Black Shark 3 128 Gb</td>      <td>$529</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>Средняя цена:</td>      <td>$758. 8</td>    </tr>  </tfoot></table>
          <table>
  <thead>
    <tr>
      <th>Модель</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>iPhone 12 Pro</td>
      <td>$999</td>
    </tr>
    <tr>
      <td>iPhone 12</td>
      <td>$799</td>
    </tr>
    <tr>
      <td>iPhone 12 mini</td>
      <td>$699</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Xiaomi Mi 10</td>
      <td>$768</td>
    </tr>
    <tr>
      <td>Xiaomi Black Shark 3 128 Gb</td>
      <td>$529</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Средняя цена:</td>
      <td>$758.8</td>
    </tr>
  </tfoot>
</table>

Открыть демо в новой вкладке

💅

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

🌶

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

<caption> Секция статьи «

Если нужно подписать таблицу, дать ей определение, то можно использовать парный тег <caption>. В него помещается общая информация о таблице. Подробнее в статье про <caption>.

Например, для нашей таблицы прекрасно подошло бы описание «Цены на флагманские модели iPhone и Xiaomi». Добавим его в разметку (часть данных опущена для краткости):

<table>  <caption>Цены на флагманские модели iPhone и Xiaomi</caption>  <thead>    <tr>      <th>Модель</th>      <th>Цена</th>    </tr>  </thead>  <tbody>    <!--  Данные по iPhone  -->  </tbody>  <tbody>    <!-- Данные по Xiaomi -->  </tbody>  <tfoot>    <tr>      <td>Средняя цена:</td>      <td>$758. 8</td>    </tr>  </tfoot></table>
          <table>
  <caption>Цены на флагманские модели iPhone и Xiaomi</caption>
  <thead>
    <tr>
      <th>Модель</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <!--  Данные по iPhone  -->
  </tbody>
  <tbody>
    <!-- Данные по Xiaomi -->
  </tbody>
  <tfoot>
    <tr>
      <td>Средняя цена:</td>
      <td>$758.8</td>
    </tr>
  </tfoot>
</table>

Открыть демо в новой вкладке

Атрибуты

Секция статьи «Атрибуты»

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

Разделим описание телефонов на производителя и модель. Производитель будет повторяться, объединим ячейки с его названием во всех рядах. Добавим один заголовок «Производитель», а в первые <tr> каждого из <tbody> — название модели, и применим атрибут rowspan. Теперь эти ячейки занимают собой пространство в 3 и 2 ряда соответственно.

<table>  <caption>Цены на флагманские модели iPhone и Xiaomi</caption>  <thead>    <tr>      <th>Производитель</th>      <th>Модель</th>      <th>Цена</th>    </tr>  </thead>  <tbody>    <tr>      <td rowspan="3">iPhone</td>      <td>12 Pro</td>      <td>$999</td>    </tr>    <tr>      <td>12</td>      <td>$799</td>    </tr>    <tr>      <td>12 mini</td>      <td>$699</td>    </tr>  </tbody>  <tbody>    <tr>      <td rowspan="2">Xiaomi</td>      <td>Mi 10</td>      <td>$768</td>    </tr>    <tr>      <td>Black Shark 3 128 Gb</td>      <td>$529</td>    </tr>  </tbody>  <tfoot>    <tr>      <td>Средняя цена:</td>      <td>$758. 8</td>    </tr>  </tfoot></table>
          <table>
  <caption>Цены на флагманские модели iPhone и Xiaomi</caption>
  <thead>
    <tr>
      <th>Производитель</th>
      <th>Модель</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">iPhone</td>
      <td>12 Pro</td>
      <td>$999</td>
    </tr>
    <tr>
      <td>12</td>
      <td>$799</td>
    </tr>
    <tr>
      <td>12 mini</td>
      <td>$699</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Xiaomi</td>
      <td>Mi 10</td>
      <td>$768</td>
    </tr>
    <tr>
      <td>Black Shark 3 128 Gb</td>
      <td>$529</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Средняя цена:</td>
      <td>$758. 8</td>
    </tr>
  </tfoot>
</table>

Открыть демо в новой вкладке

Но теперь в итоговой строке количество ячеек не совпадает с общим числом колонок в таблице. Растянем первую ячейку на две колонки:

<table>  <caption>Цены на флагманские модели iPhone и Xiaomi</caption>  <thead>    <tr>      <th>Производитель</th>      <th>Модель</th>      <th>Цена</th>    </tr>  </thead>  <tbody>    <tr>      <td rowspan="3">iPhone</td>      <td>12 Pro</td>      <td>$999</td>    </tr>    <tr>      <td>12</td>      <td>$799</td>    </tr>    <tr>      <td>12 mini</td>      <td>$699</td>    </tr>  </tbody>  <tbody>    <tr>      <td rowspan="2">Xiaomi</td>      <td>Mi 10</td>      <td>$768</td>    </tr>    <tr>      <td>Black Shark 3 128 Gb</td>      <td>$529</td>    </tr>  </tbody>  <tfoot>    <tr>      <td colspan="2">Средняя цена:</td>      <td>$758. 8</td>    </tr>  </tfoot></table>
          <table>
  <caption>Цены на флагманские модели iPhone и Xiaomi</caption>
  <thead>
    <tr>
      <th>Производитель</th>
      <th>Модель</th>
      <th>Цена</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td rowspan="3">iPhone</td>
      <td>12 Pro</td>
      <td>$999</td>
    </tr>
    <tr>
      <td>12</td>
      <td>$799</td>
    </tr>
    <tr>
      <td>12 mini</td>
      <td>$699</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td rowspan="2">Xiaomi</td>
      <td>Mi 10</td>
      <td>$768</td>
    </tr>
    <tr>
      <td>Black Shark 3 128 Gb</td>
      <td>$529</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Средняя цена:</td>
      <td>$758. 8</td>
    </tr>
  </tfoot>
</table>

Открыть демо в новой вкладке

Подсказки

Секция статьи «Подсказки»

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

Задать границы элементам <tr>, <thead>, <tfoot> и <tbody> нельзя, поэтому задавайте их тегам <table>, <th> или <td>.

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

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

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

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

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

На практике

Секция статьи «На практике»

Алёна Батицкая советует

Секция статьи «Алёна Батицкая советует»

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

Например, сделаем каждую вторую строку с коричневым фоном. Для этого понадобится всего одно CSS-правило с псевдоклассом :nth-child():

tr:nth-child(odd) {  background-color: #663613;}
          tr:nth-child(odd) {
  background-color: #663613;
}

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

tbody tr:nth-child(odd) {  background-color: #663613;}
          tbody tr:nth-child(odd) {
  background-color: #663613;
}

Открыть демо в новой вкладке

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

Это довольно просто сделать при помощи position: sticky. Имейте в виду, что нельзя применить это свойство к тегам <thead> или <tr>, поэтому применим его к <th>.

th {  position: -webkit-sticky;  position: sticky;  top: 0;  z-index: 1;}
          th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

Не забудьте добавить position: relative для родителя. Заодно подстрахуемся и сделаем прилипающими только заголовки в шапке таблицы.

table {  position: relative;}thead th {  position: sticky;  position: -webkit-sticky;  top: 0;  z-index: 1;}
          table {
  position: relative;
}
thead th {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
}

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

table {  position: relative;  border-collapse: collapse;}thead th {  position: -webkit-sticky;  position: sticky;  top: 0;  z-index: 1;  background-color: #FF8630;}
          table {
  position: relative;
  border-collapse: collapse;
}
thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #FF8630;
}

Открыть демо в новой вкладке

❗

Хотя в целом поддержка хорошая, не во всех браузерах будет работать это позиционирование в таблицах. Подробнее смотрите на Can I use.

«

«	«

Тег table

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮Назад Полный HTML Ссылки Дальше ❯

Пример

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

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Подробнее примеры ниже.

---

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

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

Таблица HTML состоит из элемента <table> и одного или нескольких <tr>, <th>, и <td> элементов.

Элемент <tr> определяет строку таблицы, элемент <th> определяет заголовок таблицы, а элемент <td> определяет ячейку таблицы.

Более сложная HTML-таблица может также включать <caption>, <col>, <colgroup>, <thead>, <tfoot>, и <tbody> элементы.

Примечание: Таблицы не должны использоваться для макета страницы! Исторически сложилось так, что некоторые веб-авторы имеют неиспользуемые таблицы в HTML как способ управления их макета страницы. Однако существуют различные альтернативы использованию HTML-таблиц для макета, в первую очередь с использованием CSS.

---

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

Элемент
<table>	Да	Да	Да	Да	Да

---

---

Различия между HTML 4,01 и HTML5

Атрибуты «align», «bgcolor», «border», «cellpadding», «cellspacing», «frame», «rules», «summary», and «width» не поддерживается в HTML5.

---

Атрибуты

Атрибут	Значение	Описание
align	left center right	Не поддерживается в HTML5. Задает выравнивание таблицы в соответствии с окружающим текстом
bgcolor	rgb(x,x,x) #xxxxxx colorname	Не поддерживается в HTML5. Задает цвет фона для таблицы
border	1 0	Не поддерживается в HTML5. Указывает, используется ли таблица для целей компоновки
cellpadding	pixels	Не поддерживается в HTML5. Определяет расстояние между стеной ячейки и содержимым ячейки
cellspacing	pixels	Не поддерживается в HTML5. Задает пространство между ячейками
frame	void above below hsides lhs rhs vsides box border	Не поддерживается в HTML5. Определяет, какие части внешних границ, которые должны быть видимы
rules	none groups rows cols all	Не поддерживается в HTML5. Определяет, какие части внутренней границы должны быть видимы
summary	text	Не поддерживается в HTML5. Задает сводку содержимого таблицы
width	pixels %	Не поддерживается в HTML5. Задает ширину таблицы

---

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

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

---

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

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

---

Попробуйте примеры

Заголовки таблицТаблица с подписью
Создание заголовков таблиц.

Таблица с подписью
Таблица HTML с подписью.

Теги внутри таблицы
Отображение элементов внутри других элементов.

Ячейки, которые охватывают более одной строки/столбца
Определение ячеек таблицы, охватывающих более одной строки или одного столбца.

---

Похожие страницы

HTML Учебник: HTML Tables

HTML DOM Ссылки: Table Object

CSS Учебник: Styling Tables

---

Параметры CSS по умолчанию

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

Пример

table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray;
}

❮Назад Полный HTML Ссылки Дальше ❯

Популярное

html картинка
как вставить картинку в html
цвет текста фона
размер текста html
цвет размер шрифта html
формы html
список html
таблица html
как сделать ссылку в html
html элементы

---

---

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

тегов таблицы HTML | Изучите примеры тегов таблицы HTML с синтаксисом

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

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

Таблицу можно создать с помощью тегов

.

• Тег

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

Табличные данные могут быть структурированы в

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

содержимом таблицы с многочисленными элементами таблицы.

Синтаксис

 <таблица>

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


Ячейка данных 1
Ячейка данных 2


Ячейка данных 3
Ячейка данных 4

 

Примеры HTML-тегов таблиц

Ниже приведены примеры HTML-тегов таблиц

1.

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

 

<голова>


<тело>
<граница таблицы = "1">

Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия

  Сохраните код с расширением .html и откройте его в браузере. Он отобразит следующий вывод: 

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

Заголовок таблицы можно задать с помощью тега < заголовок > . Пример

 

<голова>


<тело>
<граница таблицы = "1">
Это заголовок таблицы

Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия


 

Приведенный выше код отобразит следующий вывод:

3.

Интервал между ячейками таблицы

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

Пример

 

<голова>


<тело>
<граница таблицы = "1" Cellspacing = "5">

Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия


 

Приведенный выше код отобразит следующий вывод:

4. Заполнение ячеек таблицы

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

Пример

 

<голова>


<тело>
<граница таблицы = "1" cellpadding = "5">

Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия


 

Приведенный выше код отобразит следующий вывод:

5.

Атрибуты диапазона столбцов и строк

Две или более строк таблицы могут быть объединены в одну строку с помощью атрибута rowspan, а столбцы таблицы могут быть объединены в одну строку. один столбец с помощью атрибута colspan.

Пример

 

<голова>


<тело>
<граница таблицы = "1">

Столбец 1
Второй столбец
Третий столбец


Первая строка
Ряд второй
Третий ряд


Четвертый ряд
Пятый ряд


Шестая строка


 

Код отобразит следующий вывод:

6. Фон для таблицы

Фон таблицы можно создать с помощью атрибута bgcolor. Границу ячейки таблицы можно указать с помощью атрибута border-color.

Пример

 

<голова>


<тело>
 Выполните приведенный выше код, и он отобразит следующий вывод:
 7.
 Высота и ширина таблицы
 Высоту и ширину таблицы можно установить с помощью атрибутов ширины и высоты.
  Пример 
 

<голова>


<тело>
<граница таблицы = "1" ширина = "500" высота = "250" bgcolor = "голубой">
 Приведенный выше код отобразит следующий вывод:
 8. Стилизация ячеек таблицы 
  Пример 
 

<голова>


<стиль>
стол, т, тд {
граница: 1px сплошной красный;
граница коллапса: коллапс;
}
й, тд {
отступ: 15 пикселей;
}
table#mytable tr:nth-child(even) {
цвет фона: #FAD7A0;
}
table#mytable tr:nth-child(нечетный) {
цвет фона: #E67E22;
}
таблица # mytable th {
белый цвет;
цвет фона: бирюзовый;
}

<тело>
<граница таблицы = "1" ширина = "450" ​​высота = "350">
 Выполнить приведенный выше код; вы получите следующий вывод:
 8.
 Вложенные таблицы
 Вы можете использовать одну таблицу внутри другой таблицы, которая называется вложенной таблицей.
 Рассмотрим следующий пример для вложенной таблицы:
  Пример 
 

<голова>


<тело>
<граница таблицы = "1" ширина = "500" высота = "250">

<тд>
<граница таблицы = "1" ширина = "500" высота = "250" bgcolor = "голубой">
 Приведенный выше код отобразит следующий вывод:
 Атрибуты таблицы 
  align:  Этот атрибут обеспечивает выравнивание содержимого внутри элемента.
  bgcolor:  Этот атрибут указывает цвет фона для таблицы.
  граница:  Этот атрибут определяет границу ячеек таблицы.
  cellpadding:  Этот атрибут отображает заполнение между ячейками таблицы и содержимым таблицы.
  Cellspacing:  Этот атрибут отображает расстояние между ячейками таблицы.
  кадр:  Указывает, какие части внешних границ видны.
  rules:  Указывает, какие части внутренних границ видны.
  sortable:  Этот атрибут сообщает, что таблица может быть отсортирована.
  сводка:  Указывает тип содержимого таблицы.
  ширина:  Этот атрибут сообщает ширину таблицы.
  высота:  Этот атрибут определяет высоту таблицы.
 Заключение 
 До сих пор мы изучали различные типы табличных тегов в HTML. В примерах показано использование стиля таблицы, вложение одной таблицы в другую, установка высоты и ширины таблицы, добавление интервалов и отступов для ячеек таблицы, применение цвета фона для таблицы и многое другое.
 Рекомендуемые статьи 
 Это руководство по HTML-тегам таблиц. Здесь мы обсудим примеры тегов таблиц HTML с синтаксисом и атрибутами таблицы. Вы также можете ознакомиться со следующими статьями, чтобы узнать больше –
 Что такое HTML
 HTML-фреймы
 HTML-блоков
 Граница таблицы в HTML
 Таблица HTML (учебник и примеры 2022 г.) 
 Справочники по HTML и CSS
 Таблицы HTML позволяют разработчикам организовывать данные в строки и столбцы.
 Как сделать таблицу в HTML 
 Чтобы сделать таблицу в HTML, нам нужно всего несколько разных тегов. Во-первых, нам нужен родительский тег 


Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия


 

Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия


 

Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия


 

Имя
Страна


Дони
Индия


Дэвид Миллер
Южная Африка


Джо Рут
Англия





 
, который охватывает весь наш контент. В нем у нас будет около  тега, которые представляют строки нашей таблицы. Внутри строк нашей таблицы у нас будут некоторые табличные данные внутри тегов  мы будем использовать теги 
  <тд>10
  
  <тд>5
  
 Стиль таблицы HTML 
 Существует множество различных способов стилизации таблицы HTML, например, мы можем использовать почти все свойства CSS, чтобы изменить то, как таблица отображается для пользователей на их экране. Одним из самых простых способов является изменение границы ячеек таблицы или даже цвета фона ячеек или строк. Мы также можем изменить ширину или высоту таблицы или определенных столбцов и строк в таблице.
 Стилизовать можно либо путем добавления атрибута стиля к элементу, либо с помощью внешних таблиц стилей и выбора нужных элементов.
 Граница таблицы HTML 
 Изменение границы HTML-таблицы — отличный способ немедленно изменить внешний вид таблицы для пользователя. Нацеливая таблицу, элементы th и td, вы можете добавить границу ко всей таблице, а также к ячейкам внутри.
 При добавлении границы к таблице и всем ее ячейкам она может отображаться как граница в виде двойной линии, что не всегда является намерением. Чтобы бороться с этим, мы можем использовать CSS-свойство border-collapse и установить значение Collapse: это свернет границы в одну рамку.
 Используя свойство границы CSS, у нас есть доступ к изменению стиля границы, а также цвета и ширины. Изменение стиля может привести к тому, что граница нашей таблицы и ячеек будет сплошной, пунктирной или даже пунктирной! Есть много разных стилей на выбор.
 Изменение ширины границы может привести к очень тонким или толстым линиям границы, а изменение цвета изменит общий вид границы таблицы.
 Мы также можем изменить свойство border-radius, которое закруглит все наши углы.
 Теги таблицы HTML 
 Чтобы создать HTML-таблицу, нам нужно заключить все в тег
 
 
 . Внутри нашего первого тега 
 
  для представления заголовков каждого столбца.
  Item 
  Quantity 
 Plate
 10
 Bowl
 5
Пример кода
 <таблица>
  

  
Элемент
  
Количество
  
  

  
Плита
  

  
Чаша

 
. Ниже у нас есть 2 основных тега, которые помогают определить наш контент.
  — строка таблицы
  тегов по нашему выбору, чем больше 
 
  — данные таблицы (ячейка)
 Мы используем их вместе для определения данных нашей таблицы. Тег строки таблицы используется в качестве родительского тега для тегов данных таблицы и определяет, где строка таблицы должна начинаться и заканчиваться с точки зрения ее данных. У нас может быть столько 
  тегов внутри 
 
  тегов, тем длиннее будет наша строка таблицы.
 Пример кода
 
<тр>

<тд> 
 Тег 
  или заголовок таблицы можно использовать в таблице для обозначения значения столбцов таблицы.
 Оставить комментарий
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя * 
Email * 
Сайт