Тег таблицы 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>.

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

Элемент	Край	Хром	Fire Fox	Опера	Сафари
`<table>`	да	да	да	да	да

HTML

Тег таблицы HTML

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

Выход

Тег HTML Table Row <tr>

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

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

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

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

Выход

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

Выход

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

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

Атрибут Cellspacing

Выход

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

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

Выход

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

Выход

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

Выход

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

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

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

Подпишитесь на нашу email рассылку 👇