Таблицы в html документах

29 апреля 2020 - Администратор

Таблицы в html документах

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

Создание таблицы на HTML странице 

Чтобы создать таблицу в HTML документе используется парный тег <table> </table>
Чтобы задать заголовки таблицы внутри тега <table>,  используется тег <th> 
</th>

Чтобы задать строку в HTML таблице на веб странице, используется тег <tr> </tr>
Чтобы задать столбцы в таблице в HTML документе используется тег <td> </td> 
Для каждого столбца используется свой тег <td></td>
Пример задания HTML таблицы на веб странице
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> 
<tr><td>Данные 1</td><td>Данные 2</td></tr> 
<tr><td>Данные 3</td><td>Данные 4</td></tr>
</table>

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

Чтобы задать  внешние границы таблицы(рамку), используется атрибут  border, в кавычках указывается толщина.
 Чтобы задать ширину таблицы, используется атрибут width, в кавычках указывается или процент от страницы, или ширина в пикселях. 
Чтобы  задать отступ текста от границы внутри ячейки, используется атрибут cellpadding. В кавычках указывается величина отступа.
Пример  html  страницы  с таблицей
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблица</title>
</head>
<body>
<table border="2" width="50%" cellpadding="25">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr> 
<tr><td>Данные 1</td><td>Данные 2</td></tr> 
<tr><td>Данные 3</td><td>Данные 4</td></tr>
</table>
</body>
</html>

В итоге получится html страница с таблицей

html страница с таблицей

Вернуться к содержанию курса html ^     Перейти к теме использование css>>

Полезно : Регистрация домена и размещение сайта на хостинге

Пример html сайта каталог сайтов

Пример html сайта Сайт с меню

Поделиться 

 
 
Комментарии (0)

Нет комментариев. Ваш будет первым!