Тег таблицы HTML - httpdoc.ru

Тег таблицы HTML

Все мы знакомы с концепцией таблиц со строками и столбцами. Но как создать таблицу на веб-сайте? Семейство тегов HTML table отображает таблицу на веб-странице. Это похоже на структуру матрицы с правильными строками и столбцами. Этот тип структуры со строками и столбцами очень полезен для упорядоченного представления данных. Табличная форма данных производит хорошее впечатление на пользователя.

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


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

Давайте посмотрим на первый пример использования тегов таблицы HTML. А пока просто понаблюдайте за примером; мы объяснили каждый тег один за другим после примера.

Пример
<!DOCTYPE html> 
<html lang="en">
<HTML> 
<head> 
  <meta charset="UTF-8">
  <title> HTML Table </title> 
</head> 

<body> 
<table> 
<tr> 
    <th> Name </th> 
    <th> Salary </th> 
    <th> Age </th> 
</tr> 
<tr> 
    <td> Anshuman </td> 
    <td> Rs. 2,00,000 </td> 
    <td> 25 </td> 
</tr> 
<tr> 
    <td> Kuldeep </td> 
    <td> Rs. 5,00,000 </td> 
    <td> 22 </td> 
</tr> 
</table> 

</body> 
</html>

Выход

HTML Table Tag Examples
Имя Зарплата Возраст
Аншуман Rs. 2,00,000 25
Кульдип Rs. 5,00,000 22

Тег HTML Table Row <tr>

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

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

Тег заголовка таблицы HTML <th>

Заголовок таблицы HTML - это особый случай строки таблицы. Он начинается с <th> тега и заканчивается </th> тегом. Разница между строкой и заголовком заключается в том, что текст, написанный внутри <th> тегов, отображается жирным шрифтом и выравнивается браузером по центру. В силу своих свойств этот тег используется только для написания заголовков в таблице.

Тег ячейки таблицы HTML <td>

Ячейка таблицы HTML определяется <td> тегом. Это парный тег с </td> закрывающим тегом. Каждая пара этих тегов представляет собой ячейку в строке.

Его можно использовать только внутри &glt;tr> тегов или <td>. После объявления строк <td> теги используются для ввода данных в таблицу. Все , что написано внутри <td> и </td> метки будут отображаться в браузере в таблицах , как это.


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

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

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

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

Атрибут границы таблицы имеет два значения: 0 и 1. 0 означает отсутствие границы, а 1 означает видимые границы. Вы также можете увеличить значения до 2, 3, 4 и т. Д., Это увеличит ширину границы.

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

  • По border атрибуту таблицы в HTML.
  • По свойству CSS границ .

Посмотрите на пример ниже, чтобы определить границу HTML с атрибутом границы:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Table Border Attribute </title> 
</head>

<body> 
<table border="1" width="100%"> 

<tr> 
    <th> Name </th> 
    <th> Salary </th> 
    <th> Age </th> 
</tr> 
<tr> 
    <td> Anshuman </td> 
    <td> Rs. 2,00,000 </td> 
    <td> 25 </td> 
</tr> 
<tr> 
    <td> Kuldeep </td> 
    <td> Rs. 5,00,000 </td> 
    <td> 22 </td> 
</tr> 
</table>

</body>
</html>

Выход

HTML Table Border Attribute
Имя Зарплата Возраст
Аншуман Rs. 2,00,000 25
Кульдип Rs. 5,00,000 22

Примечание: width и height атрибуты используются для изменения размера таблицы.


Граница таблицы HTMl с использованием CSS

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

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Table Border Style </title> 

  <style>
    table, th, td {
    border: 1px solid black;
    text-align: center;
        }
  </style>

</head>

<body> 
<table width="100%"> 
<tr> 
    <th> Name </th> 
    <th> Salary </th> 
    <th> Age </th> 
</tr> 

<tr> 
    <td> Anshuman </td> 
    <td> Rs. 2,00,000 </td> 
    <td> 25 </td> 
</tr> 

<tr> 
    <td> Kuldeep </td> 
    <td> Rs. 5,00,000 </td> 
    <td> 22 </td> 
</tr> 

</table>

</body>
</html>

Выход

HTML Table Border Style
Имя Зарплата Возраст
Аншуман Rs. 2,00,000 25
Кульдип Rs. 5,00,000 22


Атрибуты HTML Table Cellpadding и Cellspacing

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

Атрибут ячейки таблицы HTML

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

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

Атрибут Cellspacing

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

Примечание. Эти два атрибута больше не являются частью HTML 5. Поэтому для раскрашивания таблиц лучше использовать CSS.

Пример размещения ячеек и заполнения ячеек
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Table Cellpadding Attribute </title> 
</head>

<body>

<table border="1" cellpadding="5" cellspacing="5" style="width:100%">
 <tr>
  <th>Name</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>Peter</td>
  <td>5000</td>
 </tr>
 <tr>
  <td>John</td>
  <td>7000</td>
 </tr>
</table>

</body>
</html>

Выход

HTML Table Cellpadding Attribute
Имя
Зарплата
Питер 5000
Джон 7000

Атрибут Colspan и Rowspan таблицы HTML

Атрибуты colspan и rowspan таблицы HTML используются с тегом <td>. Как следует из названия, «colspan» относится к столбцам, а «rowspan» - к строкам.

Эти два атрибута используются для объединения двух или более столбцов или строк. Значение атрибута table colspan предполагает, какой размер столбца он будет занимать. Например, «<td colspan = 2>» создаст ячейку, занимающую пространство в две ячейки по горизонтали, т.е. она будет занимать пространство ячейки следующего столбца.

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

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

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

Пример
<!DOCTYPE html>
<html>
  <html lang="en">
<head>
 <meta charset="UTF-8">
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;
    text-align: left;    
}
</style>
</head>
<body>

<h2>Cell that spans two rows:</h2>
<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>9998887776</td>
  </tr>
  <tr>
    <td>9998887776</td>
  </tr>
</table>

</body>
</html>

Выход

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

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

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

Пример
<!DOCTYPE html>
<html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title> HTML Table Colspan Attribute </title>
</head>
<body>
  
<table border="1" width="80%"> 
<tr> 
    <th> Person_Name </th> 
    <th colspan="2"> Mobile </th> 
    </tr> 

<tr> 
    <td> Bill Gates </td> 
    <td> 9998887776 </td> 
    <td> 9998887775 </td> 
</tr> 
</table>

</body>
</html>

Выход

HTML Table Colspan Attribute Example
Person_Name
Мобильный
Билл Гейтс 9998887776 9998887775

Атрибут заголовка таблицы HTML

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

  • Заголовок можно выровнять по таблице, используя align атрибут со значениями - левый / правый / верхний / нижний.
  • Выравнивание по умолчанию - сверху.
Пример атрибута заголовка таблицы HTMl
<!DOCTYPE html>
<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> HTML Table Caption Attribute </title>

<style>
    table, th, td {
    border: 1px solid black;
    }
</style>
</head>
<body>

<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>

</body>
</html>

Выход

HTML Table Caption Attribute Example
Ежемесячная экономия
Месяц Экономия
Январь 100 долларов США
Февраль 50 долларов США

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

Атрибут bgcolor таблицы HTML используется для обеспечения цвета фона таблицы. Вы можете легко написать любое название цвета напрямую, или вы также можете установить цвет, указав HEX-код. Этот атрибут также можно использовать с тегом <td> для определения цвета этой конкретной ячейки в таблице.

Атрибут фона таблицы HTML

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


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

Элемент
Microsoft Edge browser.png Край
Chrome browser.png Хром
Firefox browser.png Fire Fox
Opera browser.png Опера
safari browser.png Сафари
<table>
да
да
да
да
да