Пример html таблицы: html код таблицы — Примеры

Leave a Comment / Html / By /

Содержание

⚡️ HTML и CSS с примерами кода

Тег <table> (от англ. table — таблица) служит контейнером для элементов, определяющих содержимое таблицы.

Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашёл воплощение на многих сайтах, пока ему на смену не пришли более современные способы вёрстки.

Таблицы
  • caption
  • col
  • colgroup
  • table
  • tbody
  • td
  • tfoot
  • th
  • thead
  • tr

Синтаксис

<table>
  <tr>
    <td>. ..</td>
  </tr>
</table>

Закрывающий тег обязателен.

Атрибуты

Для этого элемента доступны универсальные атрибуты.

Спецификации

  • HTML Living Standard
  • HTML 5

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Таблица размеров обуви</title>
  </head>
  <body>
    <table>
      <caption>
        Таблица размеров обуви
      </caption>
      <tr>
        <th>Россия</th>
        <th>Великобритания</th>
        <th>Европа</th>
        <th>Длина ступни, см</th>
      </tr>
      <tr>
        <td>34,5</td>
        <td>3,5</td>
        <td>36</td>
        <td>23</td>
      </tr>
      <tr>
        <td>35,5</td>
        <td>4</td>
        <td>36⅔</td>
        <td>23–23,5</td>
      </tr>
      <tr>
        <td>36</td>
        <td>4,5</td>
        <td>37⅓</td>
        <td>23,5</td>
      </tr>
      <tr>
        <td>36,5</td>
        <td>5</td>
        <td>38</td>
        <td>24</td>
      </tr>
      <tr>
        <td>37</td>
        <td>5,5</td>
        <td>38⅔</td>
        <td>24,5</td>
      </tr>
      <tr>
        <td>38</td>
        <td>6</td>
        <td>39⅓</td>
        <td>25</td>
      </tr>
      <tr>
        <td>38,5</td>
        <td>6,5</td>
        <td>40</td>
        <td>25,5</td>
      </tr>
      <tr>
        <td>39</td>
        <td>7</td>
        <td>40⅔</td>
        <td>25,5–26</td>
      </tr>
      <tr>
        <td>40</td>
        <td>7,5</td>
        <td>41⅓</td>
        <td>26</td>
      </tr>
      <tr>
        <td>40,5</td>
        <td>8</td>
        <td>42</td>
        <td>26,5</td>
      </tr>
      <tr>
        <td>41</td>
        <td>8,5</td>
        <td>42⅔</td>
        <td>27</td>
      </tr>
      <tr>
        <td>42</td>
        <td>9</td>
        <td>43⅓</td>
        <td>27,5</td>
      </tr>
      <tr>
        <td>43</td>
        <td>9,5</td>
        <td>44</td>
        <td>28</td>
      </tr>
      <tr>
        <td>43,5</td>
        <td>10</td>
        <td>44⅔</td>
        <td>28–28,5</td>
      </tr>
      <tr>
        <td>44</td>
        <td>10,5</td>
        <td>45⅓</td>
        <td>28,5–29</td>
      </tr>
      <tr>
        <td>44,5</td>
        <td>11</td>
        <td>46</td>
        <td>29</td>
      </tr>
      <tr>
        <td>45</td>
        <td>11,5</td>
        <td>46⅔</td>
        <td>29,5</td>
      </tr>
      <tr>
        <td>46</td>
        <td>12</td>
        <td>47⅓</td>
        <td>30</td>
      </tr>
      <tr>
        <td>46,5</td>
        <td>12,5</td>
        <td>48</td>
        <td>30,5</td>
      </tr>
      <tr>
        <td>47</td>
        <td>13</td>
        <td>48⅔</td>
        <td>31</td>
      </tr>
      <tr>
        <td>48</td>
        <td>13,5</td>
        <td>49⅓</td>
        <td>31,5</td>
      </tr>
    </table>
  </body>
</html>

Ссылки

  • Тег <table> MDN (рус. )

HTML таблицы

❮ Предыдущая Следующая Глава ❯

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

Число Имя Фамилия Точки
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

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

пример

<table>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

Объяснение примера:

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

Таблицы разделены на строки таблицы с <tr> тега.

Строки таблицы разделены на таблицы данных с <td> тега.

Строка таблицы также могут быть разделены на таблицы заголовков с <th> тега.

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

HTML Стол с пограничной Attribute

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

Граница может быть добавлена с помощью border атрибута:

пример

<table border=»1″>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

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

border атрибут находится на пути из стандарта HTML! Лучше использовать CSS.

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

пример

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

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

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

HTML таблица с рухнувшей границ

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

пример

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

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

HTML таблица с Cell Padding

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

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

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

пример

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

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

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

Таблица заголовков определяются с <th> тега.

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

пример

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

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

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

пример

th {
    text-align: left;
}

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

HTML таблица с границами Spacing

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

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

пример

table {
    border-spacing: 5px;
}

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

Если таблица разрушилась границы, границы расстояние не имеет никакого эффекта.

Ячейки таблицы, которые охватывают много столбцов

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

пример

<table>
  <tr>
    <th>Name</th>
    <th colspan=»2″>Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

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

Ячейки таблицы, которые охватывают большое количество строк

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

пример

<table>
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan=»2″>Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</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>Points</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 атрибут , чтобы сделать пролетные ячейки много столбцов
  • Используйте rowspan атрибут , чтобы сделать пролетные ячейки много строк
  • Используйте id атрибута , чтобы однозначно определить одну таблицу

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»

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

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

❮ Предыдущая Следующая Глава ❯

Таблицы HTML Основные и расширенные примеры

Тег

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

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

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

Определение простой таблицы

Чтобы создать простую таблицу, сначала используйте тег

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

Ниже приведены некоторые стили CSS для форматирования таблицы.

 <стиль>
стол{
цвет фона: aliceblue;
}
таблица, тр, й, тд {
отступ: 22px;
граница: 1px сплошной черный;
граница коллапса: коллапс;
}

Объяснение кода CSS

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

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

можно было применить несколько атрибутов, в настоящее время разрешен только один — атрибут границы, которому можно присвоить значение 0 или 1

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

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



<голова>
Практические навыки HTML5
<мета-кодировка="utf-8">
<мета имя="автор" содержание="">



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

Предыдущий пример должен показать результат, показанный ниже на изображении.

HTML-таблица с двумя строками и столбцами

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

, а в качестве содержимого одного и того же тега
<тд colspan="2">C9Гребень

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

Объединение столбцов в HTML-таблице

Как видно из примера, сочетание столбцов 1 и 2 первой строки, а также столбцы 4 и 5 той же строки.

Также произведено совмещение столбцов 4 и 5 последней строки таблицы.

Определение таблицы с комбинацией строк

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

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

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



<голова>
Практические навыки HTML5
<мета-кодировка="utf-8">
<мета имя="автор" содержание="">




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

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

Объединение строк в таблице HTML

Определение таблицы с объединенными столбцами и строками

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

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



<голова>
Практика HTML5>/title>
<мета-кодировка="utf-8">
<мета имя="автор" содержание="">
<meta name="description" content="Ejercicios prácticos HTML5">
<meta name="keywords" content="Ejercicios, Soluciones, Prácticas, HTML5">
</голова>
<тело>
<граница таблицы="1">
<caption>Табла с комбинацией полей и столбцов>/caption>
<tr>
<th>сельда 1</th>
<th>сельда 2</th>
<th>сельда 3</th>
<th>сельда 4</th>
</tr>
<tr>
<td rowspan="3">сельда 5</td>
<td>сельда 6</td>
<td colspan="2">сельда 7</td>
</tr>
<tr>
<td>сельда 8</td>
<td>сельда 9</td>
<td rowspan="2">сельда 10</td>
</tr>
<tr>
<td colspan="2">сельда 11</td>
</tr>
</таблица>
</тело>
</html>

 </pre><p> В предыдущем примере должен быть показан результат, аналогичный показанному на следующем рисунке.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/4/6/f/46fbdae7e199279cee460a08754be25d.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/4/6/f/46fbdae7e199279cee460a08754be25d.jpeg' /></noscript></p> Объединение столбцов и строк в таблице HTML<h3><span class="ez-toc-section" id="i-29"> Расширенные таблицы </span></h3><p> Во многих случаях вам могут понадобиться таблицы с более сложной структурой, поскольку они могут иметь разные разделы данных, или вы хотите различать данные в таблице. и разделы, соответствующие их заголовкам и ногам.</p><p> Для создания таких таблиц вы можете использовать ряд меток, позволяющих создавать так называемые расширенные таблицы.</p><p> Одной из характеристик этих таблиц является то, что они состоят из раздела заголовка, который определяется тегом <code><thead> </code> , раздела нижнего колонтитула, определяемого тегом <code><tfoot> </code>, и, наконец, одного или нескольких разделы тела таблицы, где обычно располагаются данные одного и того же, представленного меткой <code><tbody> </code></p><p> Метки заголовка и подножия таблицы всегда должны быть определены перед любой меткой тела таблицы.</p><p> Вы можете создавать группы столбцов для применения к ним формата отдельно или общего, для создания этих групп необходимо использовать тег <code><colgroup> </code>, указав ниже его содержимое и используя тег <code><col> </code>, столбцы и их область, к которой вы хотите применить формат.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/f/a/2/fa23e0109d67b914ed422f1d2a4832f3.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/f/a/2/fa23e0109d67b914ed422f1d2a4832f3.jpeg' /></noscript></p><p> В следующем примере показано использование расширенных тегов.</p><pre>
<!DOCTYPE HTML5>
<html>
<голова>
<title>Практические навыки HTML5
<мета-кодировка="utf-8">



<тело>
Название таблицы
Cab. 1 Полковник 2
Сельда 1 Сельда 2
используются или , в зависимости от того, хотите ли вы установить заголовки или обычные ячейки. Ячейки или поля заголовков отображаются с сильным шрифтом, в отличие от обычных. Чтобы определить заголовок таблицы, Был использован тег
 .

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

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

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

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



<голова>
Практические навыки HTML5
<мета-кодировка="utf-8">
<мета имя="автор" содержание="">




<тело>
<граница таблицы="1">
Таблица с комбинацией столбцов
Сельда Комбинада Сельда Обычная Celda Combinada>/th>
C1 C2 C3 C4 C5
C6 C7 C8
Табла с комбинацией филасов
Сельда 1 Сельда 2 Сельда 3
Сельда Комбинада Сельда 5 Сельда Комбинада
Сельда 7
<столбец/> <столбец/> <столбец/>

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

Компоненты thead, tbody и tfoot HTML-таблицы

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

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

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

Далее с помощью тега

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

Таблицы HTML: с примерами

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

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

Возьмем пример Microsoft Excel.

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

Данные будут храниться в виде строк и столбцов. Как вы можете видеть на изображении Excel ниже.

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

Как создать таблицу на веб-странице в формате HTML

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

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

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

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

Итак, давайте посмотрим, как написать код в текстовом редакторе и создать таблицу на веб-странице с помощью HTML. Ниже приведены фрагменты HTML-кода, которые вам нужно будет ввести в свой HTML-документ внутри тегов body .

Код таблицы HTML 

 <таблица>
<тд>19
Название таблицы
Табла Аванзада Кабесера несколько столбцов
Cab Primera Col. Cab Segunda Col.
Пье де табла.
Фила 1 Фила 1 Колумна 1 Фила 1 Колумна 2
Фила 2 Фила 2 Колумна 1 Фила 2 Колумна 2
Идентификатор учащегося Имя учащегося Пол Возраст
1234 Счет Мужской 17
1235 Джон Мужской 18
1236 Оливия Женщина 17
1237 Миа Женщина

Объяснение кода HTML-таблиц

См. шаги ниже:

  1. Мы используем элементы таблицы для создания таблицы в HTML.
  …

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

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

 <таблица>
ID учащегося Имя учащегося Пол Возраст
1234 Счет Мужской 17
1235 Джон Мужской 18