Таблица HTML. Тег TABLE. Создание HTML таблицы. HTML table. | IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.

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

Не забываем подписываться на RSS-ленту, twitter и на публичную страницу Вконтакте.

HTML тег <table>. Описание <table>.

Содержание статьи:

HTML тег <table>. Описание <table>.
Тег <table>. Синтаксис тега <table>
Тег <table>. Атрибуты тега <table>
Теги для создания таблицы HTML
Тег <table>. Пример использования тега <table>.

HTML тег <table> относится к тегам предназначенным для формирования HTML таблиц. Тег <table> создает HTML таблицу, является ее контейнером. Понятно, что каждая HTML таблица состоит из строк и ячеек таблицы, тег <table> служит контейнером, в котором будут расположены строки и ячейки. Строки создаются тегом <tr>, а ячейки тегом <td> или <th>

Внутри элемента <table> могут находиться только элементы таблиц HTML, такие как: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>.

Когда-то давно, таблицы использовали для создания макетов сайта или шаблонов сайта, так называемы табличные шаблоны. Делалось все просто: создавали таблицу нужной структуры, но с невидимыми границами между ячейками. Сейчас этот метод устарел и не рекомендуется его использовать для создания макетов сайта. Вместо табличной верстки следует использовать блочную верстку, которая реализуется при помощи элементов <div>.

Тег <table>. Синтаксис тега <table>

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

<table>Структура таблицы</table>

1	<table>Структура таблицы</table>

Тег <table>. Атрибуты тега <table>

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

align – атрибут align выравнивание всей таблицы по горизонтали
background – при помощи атрибута background можно задать фоновый рисунок для таблицы
bgcolor – атрибут bgcolor служит для задания цвета фона таблицы
border – атрибут border определяет толщину рамки таблицы в пикселах.
bordercolor – атрибут bordercolor позволяет изменить цвет рамки.
cellpadding – атрибут cellpadding позволяет установить отступ от рамки до контента ячейки
cellspacing – при помощи атрибута cellspacing можно изменять расстояние между ячейками
cols – атрибут cols устанавливает число колонок в таблице
frame – атрибут frame дает указание браузеру о том, как отобразить границу вокруг HTML таблицы
height – атрибут height задает высоту таблицы
rules – атрибут rules дает указание браузеру о том, где следует отображать границы между ячейками
summary – атрибут summary позволяет кратко описать HTML таблицу
width – атрибут width позволяет изменять ширину всей HTML таблицы

Теги для создания таблицы HTML

В языке HTML имеется целая группа тегов предназначенных для формирования HTML таблиц.

Теги формирующие таблицы HTML:

Тег <table>. Пример использования тега <table>.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Создание HTML таблицы</title>
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<table>
<caption>Заголовок HTML таблицы</caption>
<tr>
<th>Первая ячейка</th>
<th>Вторая ячейка</th>
<th>Третья ячейка</th>
</tr>
<tr>
<th>Четвертая ячейка</th>
<th>Пятая ячейка</th>
<th>Шестая ячейка</th>
</tr>
</table>
</body>

</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Создание HTML таблицы</title>

</head>

<body>

<table>

<caption>Заголовок HTML таблицы</caption>

<tr>

<th>Первая ячейка</th>

<th>Вторая ячейка</th>

<th>Третья ячейка</th>

</tr>

<tr>

<th>Четвертая ячейка</th>

<th>Пятая ячейка</th>

<th>Шестая ячейка</th>

</tr>

</table>

</body>

</html>

Если вы скопируете пример в текстовый редактор(рекомендую Notepad++, бесплатный редактор с подсветкой синтаксиса), а затем запустите его в браузере, то увидите:

<img class="aligncenter size-full wp-image-1333" title="Таблица HTML. Тег TABLE. Создание HTML таблицы." src="//zametkinapolyah.ru/wp-content/uploads/2012/12/caption2.png" alt="Таблица HTML. Тег TABLE. Создание HTML таблицы." width="396" height="96" />

1	<img class="aligncenter size-full wp-image-1333" title="Таблица HTML. Тег TABLE. Создание HTML таблицы." src="//zametkinapolyah.ru/wp-content/uploads/2012/12/caption2.png" alt="Таблица HTML. Тег TABLE. Создание HTML таблицы." width="396" height="96" />

На этом всё, спасибо за внимание, надеюсь, что был хоть чем-то полезен и до скорых встреч на страницах блога для начинающих вебразработчиков и вебмастеров ZametkiNaPolyah.ru