Тег таблицы 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>
Выход
Имя | Зарплата | Возраст |
---|---|---|
Аншуман | 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>
Выход
Имя | Зарплата | Возраст |
---|---|---|
Аншуман | 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>
Выход
Имя | Зарплата | Возраст |
---|---|---|
Аншуман | 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>
Выход
|
|
---|---|
Питер | 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>
Выход
|
|
|
---|---|---|
Билл Гейтс | 9998887776 | 9998887775 |
Атрибут заголовка таблицы HTML
Атрибут заголовка таблицы HTML определяет заголовок таблицы.
Он отображается с таблицей в качестве имени.
Чтобы добавить заголовок к таблице, используйте
<caption>
тег.
-
Заголовок можно выровнять по таблице, используя
align
атрибут со значениями - левый / правый / верхний / нижний. - Выравнивание по умолчанию - сверху.
<!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>
Выход
Месяц | Экономия |
---|---|
Январь | 100 долларов США |
Февраль | 50 долларов США |
Атрибут bgcolor таблицы HTML
Атрибут bgcolor таблицы HTML используется для обеспечения цвета фона таблицы. Вы можете легко написать любое название цвета напрямую, или вы также можете установить цвет, указав HEX-код. Этот атрибут также можно использовать с тегом <td> для определения цвета этой конкретной ячейки в таблице.
Атрибут фона таблицы HTML
Атрибут фона таблицы HTML используется для добавления фонового изображения в таблицу. Изображение в таблице будет служить фоном для данных в таблице. Его можно использовать с тегом <td>.
Поддержка браузера
|
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
<table>
|
|
|
|
|
|