Таблицы HTML позволяют веб-разработчикам упорядочивать данные, такие как текст, изображения, ссылки, другие таблицы и т. д., в строки и столбцы ячеек.
Таблицы HTML создаются с помощью тега
<table>
в котором тег
<tr>
используется для создания строк таблицы и тега
<td>
используется для создания ячеек данных. Элементы под
<td>
являются обычными и выровнены по левому краю по умолчанию
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат:
Вот, строка
border
является атрибутом тега
<table>
и он используется, чтобы поместить границу через все ячейки. Если вам не нужна граница, то вы можете использовать
border = "0"
Заголовок таблицы можно определить с помощью тега
<th>
Этот тег будет заменен тегом
<td>
который используется для представления фактической ячейки данных. Обычно вы помещаете верхнюю строку в качестве заголовка таблицы, как показано ниже, в противном случае вы можете использовать элемент
<th>
в любом ряду. Заголовки, которые определены в теге
<th>
выделены по центру и выделены жирным шрифтом по умолчанию.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат:
Есть два атрибута, называемые
cellpadding cellspacing
который вы будете использовать для настройки пробелов в ячейках таблицы. Атрибут cellpacing определяет расстояние между ячейками таблицы, а cellpadding представляет собой расстояние между границами ячеек и содержимым внутри ячейки.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат:
Вы будете использовать атрибут
colspan
если вы хотите объединить два или более столбца в один столбец. Подобным образом вы будете использовать
rowspan
если вы хотите объединить две или более строк.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат:
Вы можете установить фон таблицы, используя один из следующих двух способов:
С атрибутом
bgcolor
Вы можете установить цвет фона для всей таблицы или только для одной ячейки.
С атрибутом
background
вы можете установить фоновое изображение для всей таблицы или только для одной ячейки.
Вы также можете установить цвет границы, используя атрибут
bordercolor
Примечание. Атрибуты
bgcolor background bordercolorустарели в HTML5. Не используйте эти атрибуты.
Вместо этого используйте атрибуты CSS
background-color border-color
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат:
Вот пример использования атрибута /p>
фон
Здесь мы будем использовать изображение, доступное в каталоге /images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат. Здесь фоновое изображение не применялось к заголовку таблицы.
Вы можете установить ширину и высоту таблицы, используя атрибуты
width height
Вы можете указать ширину или высоту таблицы в пикселях или в процентах от доступной площади экрана.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат:
Тег
caption
будет служить заголовком или пояснением к таблице и появится вверху таблицы. Этот тег устарел в более новой версии HTML/XHTML.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат:
Таблицы можно разделить на три части — заголовок, тело и подножье. Верхний и нижний колонтитулы очень похожи на верхние и нижние колонтитулы в текстовом документе, которые остаются одинаковыми для каждой страницы, в то время как тело является основным держателем содержимого таблицы.
Три элемента для разделения головы, тела и ножки стола:
− создать отдельный заголовок таблицы.
− для указания основной части таблицы.
− создать отдельный нижний колонтитул таблицы.
Таблица может содержать несколько
<tbody>
элементы для обозначения разных страниц или групп данных. Но примечательно, что теги
<thead>
и
<tfoot>
должен появиться перед
<tbody>
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>
Это даст следующий результат:
Вы можете использовать одну таблицу внутри другой таблицы. Не только таблицы, вы можете использовать почти все теги внутри тега данных таблицы.
<td>
Ниже приведен пример использования другой таблицы и других тегов внутри ячейки таблицы.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Это даст следующий результат: