Создание таблиц в html: Как создать таблицу в HTML: тег table

Как создать таблицу в html

Как создать таблицу в html в блокноте без использования дополнительных программ. Тема интересная и пользуется большим спросом, много материала написано в интернете, одни просто накидали тегов и на этом закончили, вторые показывают маленькие примеры, но без лишних пояснений. На самом деле все делается легко, никаких больших кодов писать не нужно. Главное быть внимательным, чтоб закрывать нужны теги.

Чтоб создать таблицу, в первую очередь вы должны знать и понимать такие понятия как столбцы и строки. Для общего восприятия откройте Microsoft Office Excel и посмотрите. Кстати, если вы хотите увидеть сколько по количеству столбцов и строк содержит один документ Excel, нажмите Ctrl+стрелочка вниз и Ctrl+стрелочка направо.

к оглавлению ^

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

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

Когда строчка заканчивается, закрывается тег </tr>. Еще раз… в начале указали <table>, потом открыли <tr>, в нем используете <td>, закрываете </tr> и закрываете </table>. Каждая из ячеек обязательно должна быть представлена элементов <td> и так же его закрытием </td>. Прочитайте статью до конца, с каждым новым тегом или атрибутом я навожу пример кода и конечного результата.

А в конце статьи я покажу пример почти всего, чего можно добавить в таблицу. Получилась такая небольшая каша, для примера я думаю сойдет. Основные теги для создания таблицы в html в блокноте:

к оглавлению ^

Написание кода в блокноте

Создаем и открываем обычный блокнот, в него копируем уже готовый код. После всех действий, вам нужно будет переименовать расширение txt блокнота на html. Каждая таблица начинается и должна быть закрыта тегом table. Каждая строка в таблице начинается и заканчивается тегом tr. В каждой строке существуют свои столбцы, которые должны быть заключены в тег td. Все из перечисленных тегов должны быть открыты и закрыты.

Если вспомнить основы html, к главному тегу таблицы table так же могут быть добавлены теги border, CELLspacing, CELLpadding, Width и Align. Про некоторые из них речь будет идти в этой статье. Каждый из них отвечает за свое свойство и тем самым добавляет дополнительные возможности вашей таблице. При желании, не обязательно использовать их в каждой таблице.

Скачай бесплатно пять техник верстки.

Каждая из ячеек в таблице может быть рассмотрена как дополнительная рабочая область для ваших действий. Все правила, которые работают с текстом, могут быть добавлены прямо в ячейку. Внутри ячейки можно использовать все допустимые теги, которые вы знаете и применяете внутри тега body. Не стоит бояться и упускать такие возможности.

<table>
<tr>
<td>Иванов</td>
<td>Петров</td>
<td>Сидоров</td>
<td>Лукашин</td>
<td>Михайлов</td>
<td>Березин</td>
<td>Комаров</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
<td>31</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
<td>131</td>
</tr>
</table>

к оглавлению ^

Готовый пример

В первую очередь нужно разобраться с заголовками. Для этого используется элемент <th>, данный элемент применяется так же как и элемент <td>, с помощью которого вы создаете ячейки. Но его предназначение создание конкретно заголовков в таблицах. Таким образом, все названия столбцов, которые были заключены в данные тег, выделяются жирным.

Не стоит забывать, если у вас должна быть одна или несколько ячеек пустыми, вы так же должны указать все элементы <td> или <th>, иначе вся таблица может сбиться. Посмотрим на пример, обратите внимание, заголовки выделяются жирным шрифтом.

<table>
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
<td>31</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
<td>131</td>
</tr>
</table>

Бывает такое, что нужно несколько ячеек обьединить в одну, для этого используется атрибут colspan. Его так же можно использовать с элементами <th> и <td>. Вы добавляете в элемент <td colspan=”3”>, тем самым говорите браузеру, что хотите обьединить три ячейки в одну. Всегда обращайте внимание и будьте внимательные, когда нужно открыть и закрыть объединение, чтоб в дальнейшем не запутаться и не искать часами ошибку.

<table>
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td colspan=»3″>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
<td>31</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
<td>131</td>
</tr>
</table>

к оглавлению ^

Как объединить ячейки

В процессе создания таблицы в html, можно соединить строки в таблице. Действия практически те же самые, как с вариантом со столбцами, только в этом случае используется атрибут rowspan. Так же само указывается количество строк, которые нужно обьединить в одну.

<table>
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td rowspan=»3″>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
</tr>
</table>

Html таблицам можно задать ширину и промежуток между ячейками. Данный метод уже считается устаревшим, так как все это сейчас используется в CSS, но все же существует. Вы можете указать ширину вашей таблицы в пикселях. В самом начале в теге <table> вы задаете ширину.

Атрибут width вам уже знаком из прошлых уроков, где было описано как работать с изображением в html. Чтобы задать промежуток между границами ячеек и ее промежутками, указывают элемент cellpading. Чтобы указать величину промежутка между ячейками, указывается атрибут cellspacing.

<table cellpadding=»25″ cellspacing=»15″>
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td rowspan=»3″>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
</tr>
</table>

к оглавлению ^

Как сделать границы

Таблицу вы сделали, задали ширину, все написали, теперь нужно привести ее в нормальный вид. Для этого таблице можно задать границу в пикселях. Делается это благодаря атрибуту border, который идет вместе с элементов <table>. Не задавайте слишком большие границы, лучше этим вы не сделаете никому.

1. Параметр Border.
2. Параметр CELLSPACING.
3. CELLPADDING.

Параметр BORDER выступает за рамку вокруг вашей таблицы или каждой ячейки. По умолчанию никакие рамки не рисуются, все необходимо задавать самому изначально при каждом написании новой таблички. Задается ширина рамки в пикселях целым числом, как это показано на примере. Как показывает практика, большие границы никто не практикует, большинство пользователей устанавливают значение не больше 1-2.

Как делается граница в таблице показано на примере. Кроме всего этого, таблицу часто выравнивают по центру, так же можно пр правому краю. При создании таблицы вы указывали ее начало тегом table, вот в него помещаете, что вам нужно. Приведу несколько примеров с подробным описанием.

Параметр CELLSPACING, задается так же в цифрах. В качестве числа выступает параметр в пикселях, который отвечает за расстояние между рамками ячеек, как по горизонтали так и по вертикали. По умолчанию уже стоит значение 2, но всегда можно сделать его больше или меньше.

Параметр CELLPADDING, так же задается в цифрах. В качестве числа задается величина в пикселях, который отвечает за величину свободного пространства между рамкой таблицы и данными внутри каждой ячейки. По умолчанию стоит значение единица, но при желании его тоже можно изменить в меньшую или большую сторону.

Вместе эти два параметра могут хорошо повлиять на отступы в вашей таблице, поэтому не стоит забыть про них, если у вас намечается создание крупной таблички, с которой в дальнейшем могут быть проблемы при расположении на странице.

Кроме этого, для решения проблемы с отступами, не стоит забывать про первый параметр BORDER. Вся эта тройка живет своей жизнью отдельно и тем самым управлять каждым из них, можно тоже отдельно. Если хотя бы один из них не занесен к тегу table, все они будут принимать свое значение по умолчанию, тем самым вы даже не будете знать как можно добавить или уменьшить нужные отступы в таблице через блокнот.

<table border=»5″ CELLSPACING=»2″ >
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td rowspan=»3″>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>18</td>
<td>24</td>
<td>11</td>
<td>27</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<td>127</td>
</tr>
</table>

Можно задать цвет любой ячейке или всей таблице, добавляется атрибут bgcolor и к нему уже код любого цвета. Коды цветов html можно найти в интернете, но про них я напишу отдельно новую статью. Для удобства и простоты используют небольшую программу, с ее помощью можно быстро узнать код любого цвета. Называется она ColorMania.

<td bgcolor=»#cccccc»>14</td>
<td bgcolor=»##191970″>118</td>

к оглавлению ^

Пример готовой таблицы

При создании таблицы, вы можете использовать любые теги, которые касаются форматирования текста. Если нужно сделать текст по центру в ячейке, выделить его жирным, все это можно сделать. Добавляете необходимые теги к ячейкам и смотрите на результат. Самое главное, что нужно знать:

1. Границы и выравнивание.
2. Открытие и закрытие тегов tr и th.
3. Объединение строк.
4. Объединение столбцов.

<table border=»10″ align=»center» cellpadding=»1″ cellspacing=»9″>
<tr>
<th>Иванов</th>
<th>Петров</th>
<th>Сидоров</th>
<th>Лукашин</th>
<th>Михайлов</th>
<th>Березин</th>
<th>Комаров</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td align=»center»><font size=»5″ color=»red»>8</font></td>
<td>12</td>
<td align=»center»>1</td>
<td><font size=»7″ color=»red»>17</font></td>
<td>18</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td align=»center»>18</td>
<td>24</td>
<td>11</td>
<td align=»center»>27</td>
<td>31</td>
</tr>
<tr>
<td align=»center»>113</td>
<td>114</td>
<td>118</td>
<td>124</td>
<td>111</td>
<th align=»center»>127</th>
<td align=»center»>131</td>
</tr>
<tr>
<td>3</td>
<td align=»center»>4</td>
<td align=»center»>8</td>
<td>12</td>
<td>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td align=»center»>4</td>
<td>8</td>
<td align=»center»>12</td>
<td>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<th align=»center»>4</th>
<td>8</td>
<td>12</td>
<td>1</td>
<td align=»center»>17</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td align=»center»>8</td>
<td>12</td>
<td>1</td>
<td align=»center»>17</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td align=»center»>4</td>
<td>8</td>
<td>12</td>
<td align=»center»>1</td>
<td>17</td>
<th>18</th>
</tr>
<tr>
<td>3</td>
<th>4</th>
<th>8</th>
<td align=»center»>12</td>
<td align=»center»>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td align=»center»>8</td>
<td>12</td>
<td>1</td>
<td align=»center»>17</td>
<td>18</td>
</tr>
<tr>
<td align=»center»>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>17</td>
<td align=»center»>18</td>
</tr>
<tr>
<td>3</td>
<td align=»center»>4</td>
<td align=»center»>8</td>
<td>12</td>
<td align=»center»>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td align=»center»>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td align=»center»>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td>17</td>
<td align=»center»>18</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td align=»center»>1</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td align=»center»>3</td>
<td>4</td>
<td>8</td>
<td bgcolor=»#ffffff»>12</td>
<td>1</td>
<td>17</td>
<td align=»center»>18</td>
</tr>
<tr>
<td align=»center»>3</td>
<td bgcolor=»#000000″>4</td>
<td>8</td>
<td>12</td>
<td>1</td>
<td align=»center»>17</td>
<td>18</td>
</tr>
</table>

Кроме перечисленных параметров BORDER, CELLPADDING и CELLSPACING, существует еще несколько, которые так же пользуются популярностью и часть применяются на практике. Управление шириной и высотой таблицы (WIDTH и HEIGHT) и выравнивание по центру или по краям (ALIGN).

к оглавлению ^

Высота и ширина

При создании новой таблице в блокноте, ширина и высота каждой из них вычисляется автоматически браузером. При заполнении ячеек таблицы текстом, ваш браузер будет сам автоматически показывать ширину и высоту таблички, в зависимости от величины помещенного внутрь контента. Похожий пример можно посмотреть, если вы создадите и заполните табличку в текстовом редакторе Microsoft Word.

Но иногда бывают случаи, когда нужно самому принудительно указать ширину или высоту для таблички. для этого используется параметр Width и Height, который добавляется к тегу table. Значения можно задавать в пикселях или в процентах. Кроме все этого, данные значения можно указывать для конкретной ячейки, которая вас интересует. Пример показан ниже.

<table border=»10″ align=»center» cellpadding=»1″ cellspacing=»9″>

к оглавлению ^

Выравнивание

Точно так же, как с примером по границам и отступам, всей таблице можно задать выравнивание по одной из сторон или по центру. К главному тегу таблицы table добавляется параметр ALIGN, который отвечает за выравнивание по сторонам. Допустимое значение LEFT (выравнивание по левой стороне), RIGHT (выравнивание по правой стороне). Попробуйте установить CENTER, получить у вас выровнять таблицу по центру или нет?

Если дело касается цвета таблицы или конкретных ячеек, вы так же можете использовать атрибут bgcolor, чтобы задать цвет шапке вашей таблицы или нужным вам ячейкам. Выравнивайте таблицу по центру или по правому краю. Используйте в таблицах тег font для изменения шрифта ваших данных. Так же можно задать в таблице цвет текста, его размер… что угодно.

Евгений Несмелов

Создание таблиц html

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

Атрибуты таблицы<table></table>.
Состоит она из строки <tr></tr>
и столбца <td></td>.
Пересечение строки и столбца дает ячейку,в которую и надо вписывать данные.Ячейки <td> должны находиться внутри строки <tr>.

Необходимо соблюдать принцип вложенности тегов,иначе говоря столбец
<td></td> должен находиться между тегами строки <tr> </tr> вот так

<tr>
<td></td>
</tr>
а они должны быть между тегами таблицы <table></table>.
Это обязательное условие.

Составляем самую простую таблицу

<table>
<tr>
<td></td>
</tr>
</table>
Эта таблица состоит из одной строки и одной ячейки.

Выглядит она так:

Следующая таблица будет состоять из двух строк и двух столбцов,всего четыре ячейки.

<table>
<tr>
<td></td><td></td>
</tr>
<tr>
<td></td><td></td>
</tr>
</table>

Вот ее вид:

Таблица в нашем уроке состояла из трех строк,трех столбцов и записывалась она так:

<table>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>

Это ее схема:

Подробно разберем эту таблицу и посмотрим как ее можно
изменить.Если вы составите HTML-код и сохраните таблицу, то скорей всего вы ее не увидите,потому что не все браузеры прорисовывают рамки таблиц.

Что бы увидеть таблицу, надо в теге таблицы указать рамку<table border=»1″> где 1-ширина рамки в пикселях и вы можете менять это значение на ваше усмотрение.
После заполнения контентом сайта можно убрать рамки таблицы- <table border=0>

Таблицы можно окрасить цветом так:
<table bgcolor=»#цвет»> или
<tr bgcolor=»#цвет»> или
<td bgcolor=»#цвет»>

Не делайте цвет таблицы и цвет текста одинаковым иначе вы ничего не увидите

Изменение размеров строк и ячеек

Измененение по высоте строки задается значением height в теге <tr>
<tr>
где «100» размер в пикселях, или в процентах «100%»,или <td>
<td.
Изменение по ширине задается значением width и также вставляется в тег
<td> (в пикселях) ,или например <td>
Следует обратить внимание на то что все браузеры должны показывать таблицы с одинаковым количеством ячеек в строке по всей таблице.Иными словами если у вас в первой строке находятся три ячейки,то и во второй и в следующих строках
тоже должно быть три ячейки.Ячейки можно объединять по высоте <td rowspan=»?»>
где»?» количество объединеных ячеек,а также по ширине <td colspan=»?»>

Посмотрим как будет выглядеть таблица после внесения вышеназванных атрибутов

<html>
<head><title></title>
</head>
<body>
<table
border=»1″ cellpadding=»2″ cellspacing=»2″>
<tbody>
<tr>
<td colspan=»2″>Объединеные ячейки</td>
<td colspan=»1″ rowspan=»2″>Объединеные ячейки</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
<tr>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
<td>Заполнение формы</td>
</tr>
</tbody>
</table>
</body>
</html>

Вид этой таблицы

Обратите внимание на то,что при переполнении содержимым ячейки
она будет растягиваться в разные стороны, поэтому выбирайте размер ячеек в соответствии с содержимым,иначе весь дизайн страницы превратиться в совсем другое,чем вы хотели.

На странице можно разместить несколько таблиц.Например:

<table border=»1″ bgcolor=»#E7FEE1″>
<tr>
<td>Первая таблица,первая ячейка</td><td>Первая таблица,вторая ячейка</td>
</tr>
</table>
<table border=»1″ bgcolor=»#FEFFE0″>
<tr>
<td>Вторая таблица,первая ячейка</td><td>Вторая таблица,вторая ячейка</td>
</tr>
</table>

Можно разместить таблицу в таблице.Зеленым цветом выделена вставляемая таблица,
а также вставим в ячейки числа,что бы был виден бордюр.

<table border=»1″height=»35%»>

<tr>
<td>1</td>
<td>2</td>
</tr>

<tr>
<td>3</td>
<td>

<table border=»1″>
<tr>
<td>4</td>
<td>5</td>
</tr>

<tr>
<td>6</td>
<td>7</td>
</tr>

</table>

</td>
</tr>
</table>

Выглядит она так

Дополнительно настроить прорисовку таблицы можно с помощью параметров FRAME и RULES тега <TABLE>.
Параметр FRAME управляет прорисовкой внешней линии таблицы и может принимать следующие значения:
BOX или BORDER — рамка рисуется со всех четырех сторон
ABOVE — только с верхней стороны
BELOW — только с нижней стороны
HSIDES — рисуется нижняя и верхняя сторона
VSIDES — рисуется левая и правая сторона
LHS — только с левой стороны
RHS — только с правой стороны
VOID — таблица без внешних рамок

Например:

<table border=1 CellSpacing=0 CellPadding=0 Align=»» vAlign=»» frame=»vsides»>

Параметр RULES управляет прорисовкой внутренних линий сетки таблицы и может принимать следующие значения:
ALL — рисуются все внутренние линии
GROUPS — рисуются только линии, разделяющие группы
ROWS — рисуются линии, разделяющие строки
COLS — рисуются линии, разделяющие столбцы
NONE — внутренние линии не рисуются

Например:

<table Border=1 CellSpacing=0 CellPadding=0 Align=»» vAlign=»» rules=»cols»>

Обратите внимание на то что параметры frame и rules работают только тогда когда в значении border установлена 1 и более.

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

Таблица —————<table></table>
Рамка таблицы—- ——<table border=?></table>
Расстояние между ячейками—<table cellspacing=?>
Ширина в пикселях——<table width=?>
Ширина в процентах——<table>
Строка таблицы ———<tr></tr>
Выравнивание ———-<tr align=left|right|center>|middle|bottom>
Ячейка таблицы ———-<td></td>.
Без перевода строки ——<td nowrap>
Объединение ячеек по ширине -<td colspan=?>
Объединение ячеек по высоте -<td rowspan=?>
Желаемая ширина ———<td width=?> (в точках)
Ширина в процентах ——<td>
Цвет ячейки ————-<td bgcolor=»#******»>
Заголовок таблицы ——-<th></th>
Выравнивание ————<th align=left|right|center|middle |bottom>
Запрет перевода строки —<th nowrap>
Растягивание по колонке -<th colspan=?>
Растягивание по строке —<th rowspan =?>
Ширина в пикселях ——-<th width=?>
Ширина в процентах ——<th>
Цвет ячейки ————-<th bgcolor=»#$$$$$$»>
Заглавие таблицы ———<caption></caption>
Выравнивание————-<caption align=top|bottom>(сверху/снизу таблицы)

Создание таблиц в HTML

В этой статье Вы познакомитесь с важнейшим моментом при создании своего сайта — таблицами!

Я думаю, что Вы обратили внимание на то, что в предыдущих статьях мы не занимались выравниванием, если, конечно, не считать выравнивание по левому краю, по центру и по правому краю браузера. Собственно, этого крайне недостаточно для красивого оформления страницы. Яркий тому пример — наша форма, которую мы создали в предыдущей статье. Как можно видеть, форма ОЧЕНЬ НЕРОВНАЯ. Вот, как раз для того, чтобы выравнивать элементы страницы более точно, чем просто по краям браузера, и были придуманы html таблицы.

Давайте для начала создадим простую html таблицу.

Но прежде, чем это делать, давайте восстановим код, который у нас остался после создания формы, то есть вот этот: Создание форм в HTML

Принцип создания таблиц в html таков: создаётся таблица, потом создаётся строка, потом все столбцы данной строки, потом очередная строка, снова все очередные столбцы данной строки и так далее.

Таблица создаётся с помощью тега <table>, а заканчивается тегом </table>. Это, думаю, понятно. У таблицы есть строки и столбцы, поэтому их необходимо создать. Теперь согласно принципу создания таблиц, необходимо создать строку. Строка создаётся с помощью тега <tr>. Соответственно, сигналом к окончанию строки является закрывающий тег </tr>. Внутри тега <tr> необходимо создавать столбцы, которые создаются с помощью тега <td>. И уже внутри этого тега находятся те элементы, которые должны быть расположены внутри данной ячейки. После того, как все элементы уложили, то можно закрывать столбец с помощью тега </td>. Дальше открывается новый тег <td>. В него снова помещаются элементы, после этого закрывается </td>. Это сигнал к концу второго столбца. И так далее, столько столбцов, сколько Вам нужно. В конце закрывается строка тегом </tr>. Затем следующая строка и так далее. А заканчивается всё закрывающим тегом </table>.

Чтобы стало понятнее, давайте сразу после формы напишем следующие строки:

<table>
  <tr>
    <td>(1, 1)</td>
    <td>(1, 2)</td>
  </tr>
  <tr>
    <td>(2, 1)</td>
    <td>(2, 2)</td>
  </tr>
</table>

Здесь мы создали таблицу, состоящую из двух строк (два тега <tr>) и двух столбцов (по два тега <td> в каждом теге <tr>). В качестве элемента я решил взять обычный текст, в виде координат ячейки. Соответственно, первая цифра означает номер строки, а вторая — номер столбца. Это был яркий пример таблицы.

Теперь поговорим об атрибутах. Сначала атрибуты тега <table>.

1) Атрибут «border«, значение которого задаёт толщину рамки таблицы в пикселях. По умолчанию, рамки вообще нет. Давайте поставим значение этого атрибута в «2«.

2) Атрибуты «width» и «height» задают ширину и высоту таблицы соответственно. Размер может быть указан, как в абсолютных единицах (пиксели, px), так и в относительных (проценты, %). Относительный размер, чем хорош, так это тем, что он всегда подстроится под любое разрешение монитора пользователя и любой браузер. А абсолютные тем хороши, что при любых браузерах и любых разрешениях монитора не будет сюрпризов с дизайном, связанные, например, с растягиванием элементов (если монитор широкоэкранный, к примеру). Какой выбрать: решать Вам, но я, лично, предпочитаю, в основном, относительные размеры, изредка разбавляя абсолютными, в зависимости от ситуации. Давайте поставим значение атрибутов «width» и «height» по «30%«.

Думаю, что атрибутов Вам дал достаточно. Таким образом, тег <table> выглядит так:

<table border = "2" width = "30%" height = "30%">

Посмотрите в браузере, как выглядит теперь наша таблица.

Теперь поговорим об атрибутах тега <tr>:

1) Атрибут «height«. Заметьте, что у тега <tr> нет атрибута «width«, впрочем, это логично, ведь тег <tr> отвечает за строку, а, следовательно, за высоту. А за ширину отвечают столбцы.

Собственно, даже атрибут «height» не особо-то и используется, поэтому можно сказать, что атрибутов у тега <tr> и вовсе нету.

Наиболее богатым по количеству атрибутов является тег <td>, отвечающий за ячейку таблицы:

1) Атрибут «width«. Объяснение то же, что и для атрибута тега <tr>. Соответственно, атрибута «height» нет.

2) Атрибут «colspan«. Значение этого атрибута означает количество столбцов, которое занимает данная ячейка. Поставьте этот атрибут в значение «2«, где у нас координаты «(1, 1)«. Сразу посмотрите на результат.

3) Атрибут «rowspan«. Значение этого атрибута означает количество строк, которое занимает данная ячейка. Поставьте этот атрибут в значение «2«, где координаты «(1, 2)«. Сразу посмотрите на результат.

4) Атрибут «align«. Значение этого атрибута означает выравнивание элемента внутри ячейки по горизонтали. Бывают три значения: «left» (по левому краю), «center» (по центру), «right» (по правому краю). По умолчанию стоит выравнивание по левому краю. Давайте выравняем координаты «(1, 1)» по центру, а координаты «(2, 1)» по правому краю. Посмотрите результат.

5) Атрибут «valign«. Значение этого атрибута означает выравнивание элемента внутри ячейки по вертикали. Снова имеются только три значения: «top» (по верху), «middle» (по середине), «bottom» (по низу). По умолчанию стоит значение «middle«. Давайте поменяем значение этого атрибута у элемента «(2, 1)» на «top«. А также у элемента «(2, 2)» поставим значение «bottom«. Сразу посмотрите на результат.

Таким образом, Ваша таблица имеет такой HTML-код:

<table border = "2" width = "30%" height = "30%">
  <tr>
    <td colspan = "2" align = "center">(1, 1)</td>
    <td rowspan = "2">(1, 2)</td>
  </tr>
  <tr>
    <td align = "right" valign = "top" >(2, 1)</td>
    <td valign = "bottom">(2, 2)</td>
  </tr>
</table>

В принципе, с теорией всё. А вот на практике необходимо научиться применять эти знания. И в качестве практики, мы сейчас выравняем нашу форму. Для начала сотрите все теги <br>, так как теперь на новую строку у нас будет переходить тег <tr>.

Теперь помещаем всё содержимое формы в таблицу, то есть сразу после тега <form> пишем тег <table>, а сразу перед тегом </form> закрываем таблицу с помощью тега </table> (не забываем про принцип вложенности!). Рекомендую поставить временно рамку у таблицы, чтобы видеть, как всё выравнивается, и как делится общее пространство между элементами таблицы.

Теперь каждую строку формы помещаем в отдельный тег <tr>. И делаем два столбца: первый для описания элемента, а второй для самого элемента формы. И так делаем вплоть до <textarea>.

С текстовой областью поступаем так: во-первых, пояснение (далее буду называть меткой) запихиваем в одну строку, причём ширину делаем в два столбца. Текстовую область на следующей строке таблицы, и также шириной в два столбца. Более того, выравниваем и метку, и текстовую область по центру.

Далее всё помещаем в одну строку и одну ячейку, но шириной эта ячейка будет в два столбца.

Вот и всё, что необходимо знать для успешного использования таблиц, а дальше лишь надо набивать руку. Я Вам скажу так: таблица наиболее часто используемая возможность при создании HTML-страницы, и без них не обходится почти ни один сайт. Правда, таблицы и наиболее сложная тема в основных знаниях по HTML, для усвоения которой необходимо потренироваться, а также избавиться от стереотипа о том, что элементом таблицы может быть только текст (уж, так нас научили в школе, учебниках и вообще в жизни). И когда Вы избавитесь от этого стереотипа и поймёте, что под элементом может подразумеваться не только текст, но и картинки, ссылки, формы, элементы формы, и даже целые таблицы, тогда можно считать, что дело сделано.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

• 
  Создано 30.04.2010 10:47:05

• 
  
  Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Создаем сложную таблицу HTML

    Кроме обязательных тегов, используемых в таблице, таких как , и , о которых говорилось в предыдущем сообщении, параметры таблицы задаются такими прерменными, как ALIGN, BGCOLOR, BORDER, BORDERCOLOR, CELLPADDING, CELLSPACING, HEIGHT, WIDTH, COLSPAN, NOWRAP, ROWSPAN, VALIGN. Остановимся на них подробнее.    Сначала рассмотрим те, которые задают параметры самой таблицы:

ALIGN — Выравнивание таблицы по правому (right) или левому (left) краю.
BGCOLOR — цвет фона таблицы.  
BORDER — толщина бордюра в пикселях.  
BORDERCOLOR — цвет бордюра.  
CELLPADDING — расстояние между бордюром и содержимым ячейки.  
CELLSPACING — расстояние между двумя рамками таблицы (т.к. по умолчанию, таблица имеет двойную рамку, и если задать значение cellspacing=0, то рамка будет одинарная.
HEIGHT — высота таблицы, может измеряться как в пикселях ( в этом случае единицу измерения опускаем, т.е. например,, так и в % (тогда это будет выглядеть следующим образом:).
WIDTH — ширина таблицы, так же как и высота измеряется в пикселях и в процентах.
style=»float: left; margin: 0 5px 2px 0;» — обтекание таблицы текстом слева,
style=»float: right; margin: 0 0 2px 5px;» — обтекание таблицы текстом справа.
    Параметры ячеек таблицы:
 ALIGN — так же означает выравнивание содержимого ячеек таблицы.
BGCOLOR — цвет фона ячейки,
BORDERCOLOR — цвет рамки ячейки,
COLSPAN — число ячеек таблицы, объединенных по горизонтали, таким образом можно задать, например, шапку таблицы.
NOWRAP — заставляет содержимое ячейки отображаться в ней без переноса по строке.
ROWSPAN — показывает число ячеек, объединенных по вертикали.
VALIGN — вертикальное выравнивание содержимого ячейки. Переменные: top — по верхнему краю, middle — по середине, bottom — по нижнему краю.
Пример таблицы, с объединенными ячейками по вертикали. 

..
<table border=»3″ borderColor=»#008080″ align=»Left» CellPadding=»2″ CellSpacing=»2″>  
<tr>
<td rowspan=2 align=center>Содержимое, объединенных по вертикали</td>
 <td>Ячейка 1 строки1</td>
 <td>Ячейка 2 строки1</td></tr>
 <tr> 
<td>Ячейка 1 cтроки 2 </td>
<td>Ячейка 2 cтроки 2</td> 
</tr></table>     

Пример таблицы, с объединенными ячейками по горизонтали. 
<table border=»3″ borderColor=»#008080″ align=»Left» CellPadding=»2″ CellSpacing=»2″> 
 <tr> <td colspan=2 align=center> Содержимое объединенных по горизонт.</td></tr>
<tr> 
<td>Ячейка1 строки1</td>  
<td>Ячейка2 строки2</td> <td>Ячейка3 второй строки</td> </tr> </table>

 P.S. Не стоит забывать о том, что не все теги и не все параметры HTML могут адекватно отображаться на Вашей страницы. Это в первую очередь, зависит, от выбранного Вами блогохостинга, а также может зависить от браузера.

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14

Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:

…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с помощью CSS. Я частенько использую таблицу на своем блоге или на сайте, вот например, как в этой статье.

Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.

Из каких основных тегов состоит таблица?

○ тег TABLE 
Это  главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.

<table></table>

○ тег TR

Внутри контейнера <table>……</table> размещаются ряды:

Ряды создаются с помощью тега <tr></tr>. Именно с помощью этого тега и определяется количество рядов.
Закрывающий тег обязателен.

○ тег TD

Внутри контейнеров <table><tr>……</tr></table> размещаются столбики (ячейки):

Столбики создаются с помощью тега <td></td>.
Закрывающий тег обязателен.

Внимание: без использования всех этих тегов таблицу создать не возможно.

Теперь попробуем воспользоваться теорией и создадим таблицу на практике.

Задание: создать таблицу из одного ряда, где будет три столбика.

<table>
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>

Задание: создать таблицу из трех рядов и трех столбиков.

<table>
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
<tr>
<td>ряд -2 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
<tr>
<td>ряд -3 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>

До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.

Теперь рассмотрим атрибуты для таблицы.

*Атрибуты

○ Границы таблицы в HTML

Чтобы была видна таблица, к тегу <table> применяется атрибут «border».

<table border="1">

Если значение атрибута «border» «0», границы видно не будет, если не прописать к тегу <table> атрибут «border», граница в таблице тоже видна не будет.

<html>
<head>
<title>Границы таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>
</body>
</html>

Результат:

Попробуйте поменять значение в атрибуте «border» на «10» . 

○ Как объединить ячейки в таблице

Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу <td> .

• colspan — объединение ячеек по горизонтали;
• rowspan — объединение ячеек по вертикали.

<td colspan="2"> 

<td rowspan="2">

В значениях указываете, сколько нужно объединить ячеек.

<table border="1">
<tr>
<td colspan="2">ряд 1 столбик 1</td>
</tr>
<tr>
<td>ряд 2 столбик 1</td>
<td>ряд 2 столбик 2</td>
</tr>
</table>

Результат:

<table border="1">
<tr>
<td rowspan="2">ряд 1 столбик 1</td>
<td>ряд 1 столбик 2</td>
</tr>
<tr>
<td>ряд 2 столбик 1</td>
</tr>
</table>

Результат:

Более сложный пример:

<html>
<head>
<title>Таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td colspan="3">столбик 2 </td>
<td rowspan="2">столбик 3</td>
</tr>
<tr>
<td>ряд -2 /столбик 1</td>
<td >столбик 2 </td>
<td>столбик 3</td>
<td>столбик 4</td>
</tr>
</table>
</body>
</html>

Результат:

○ Как увеличить расстояние между ячейками таблицы

Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу <table>

<table border="1" cellpadding="10">

В значениях у атрибута «cellpadding» указываете расстояние отступа

<table border="1" cellpadding="20">
<tr>
<td>ряд 1 столбик 1</td>
<td>столбик 2</td>
</tr>
</table>

Результат:

Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу <table>

<table border="1" cellspacing="7" >

В значениях у атрибута «cellspacing» указываете расстояние между ячейками

<table border="1" cellspacing="7" >
<tr>
<td>ряд 1 столбик 1</td>
<td>столбик 2</td>
</tr>
</table>

Результат:

○ Как сделать фон таблицы HTML

Чтобы сделать фон таблицы HTML используют к тегу <table> и <td> такие атрибуты:

• BGCOLOR –  цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
• BACKGROUND –фон в таблице заполняется рисунком.

<html>
<head>
<title>Таблицы в HTML – StepkinBlog.ru</title>
</head>
<body>
<table border="1" cellpadding="20" background="fon.jpg">
<tr>
<td bgcolor="#33FF99">ряд -1 /столбик 1</td>
<td colspan="3">столбик 2 </td>
<td rowspan="2">столбик 3</td>
</tr>
<tr>
<td bgcolor="red">ряд -2 /столбик 1</td>
<td >столбик 2 </td>
<td>столбик 3</td>
<td>столбик 4</td>
</tr>
</table>
</body>
</html>

Результат:

○ Как вставить картинку в таблицу HTML

Чтобы вставить картинку в таблицу HTML, между тегом <td> вставляться тег <img>.

<td><img src="1.gif"></td>

Пример:

<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ячейка 2</td>
<td><img src="1.gif"></td>
</tr>
</table>

Результат:

○ Ширина и высота таблицы HTML

Чтобы вставить ширину и высоту в таблицы HTML, используют к тегу <table> атрибут «width» и «height»:

<table border="1">

• Width – ширина таблицы
• Height – высота таблицы

Пример:

<table border="1">
<tr>
<td>ряд 1 ячейка 1</td>
<td>ячейка 2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td>
<td>ячейка 2</td>
</tr>
</table>

Результат:

Значения задаются в пикселях (px)  или  в процентах (%)

○ Выравнивание содержимого в таблице HTML

Чтобы выровнять содержимое в таблице HTML, используют к тегу  <td> атрибут «align» и «valign»:

ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:

• left — прижать содержимое к левой части (по умолчанию);
• center – установить по центру;
• right — прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:

• top – прижать содержимое к верху;
• bottom – прижать содержимое к низу;
• middle – установить содержимое посередине

<td align="center" valign="middle">текст</td>

Пример:

<table border="1">
<tr>
<td>ячейка по умолчанию</td>
<td align="right" valign="bottom">содержимое выравниваем горизонтально по правому краю, вертикально - прижимаем к низу</td>
</tr>
<tr>
<td align="left" valign="top">содержимое выравниваем горизонтально по левому краю, вертикально - прижимаем к верху</td>
<td align="center" valign="middle">содержимое выравниваем горизонтально по центру, вертикально - прижимаем посредине</td>
</tr>
</table>

Результат:

○ Как выровнять таблице HTML по центру

Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом <center></center>:

<center>
Код таблицы
</center>

Пример:

<center>
<table border="1">
<tr>
<td>ряд -1 /столбик 1</td>
<td>столбик 2 </td>
<td>столбик 3</td>
</tr>
</table>
</center>

Дополнительные и основные теги к таблице

Пример:

<table border="1">
<caption>Таблица для StepkinBlog.ru</caption>
<thead>
<tr>
<th>Название 1</th>
<th>Название 2</th>
 </tr>
 </thead>
<tr>
<td>1</td>
<td>2</td>
 </tr>
</table>

Результат:

Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.

Предыдущая запись
Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13
Следующая запись
Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

создание таблиц в HTML

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали как вставлять ссылки и изображения в html. В этой статье я хочу рассказать о достаточно важной теме — это создание таблиц в HTML.
Практически на любом сайте можно встретить HTML-таблицы. Таблицы позволяют нам расположить элементы так, как мы считаем нужным. Сразу перейдём к делу, напишем небольшой код и разберем его:

<html>
<head>
<meta charset="utf-8"/>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table>
	<tr><td>(1,1)</td><td>(1,2)</td></tr>
	<tr><td>(2,1)</td><td>(2,2)</td></tr>
</table>
</body>
</html>

Таблица создаётся с помощью тега <table> и заканчивается тегом </table>.

Вообще принцип создания таблиц следующий: сначала пишется тег <table>, затем добавляются теги строк <tr></tr;, в зависимости от того, сколько нам нужно строк. Затем внутри тегов <tr> и </tr> создаются ячейки таблицы с помощью тегов <td> и </td>. В конце не забываем закрывать нашу таблицу тегом </table>. Обязательно наберите этот код и посмотрите, как выглядит наша таблица на текущий момент. Как-то не совсем похоже на таблицу.

Давайте сейчас разберем, какие атрибуты есть у тегов <table>, <tr> и <td>. Как всегда на примере:

<html>
<head>
<meta charset="utf-8"/>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="1px">
	<tr><td>(1,1)</td><td>(1,2)</td></tr>
	<tr><td align="right">(2,1)</td><td valign="center" align="center">(2,2)</td></tr>
	<tr><td colspan="2"></td></tr>
</table>
</body>
</html>

У тега <table> есть атрибут border, который отвечает за рамку таблицы (без этого атрибута таблица совсем и не похожа на таблицу). Также есть атрибуты width и height, которые соответственно задают ширину и высоту таблицы. Тут все просто: можно задавать либо в относительных единицах (%), либо в абсолютных (в «px»). В нашем случае написано, что ширина таблица равна 50% — это означает, что она всегда будет занимать половину ширины от родительского элемента, в нашем случае — это окно браузера.

Также у таблицы есть и другие атрибуты:

• «align» — выравнивание таблицы относительно страницы
• «cellspacing» — задание отступов между ячейками
• «cellpadding» — задание расстояния между контентом и рамкой ячейки
• «bgcolor» — задание цвета фона таблицы
• «bordercolor» — задание цвета рамки для таблицы

У тега строки <tr> есть всего один атрибут — это высота строки height. Можно также задавать либо в относительных единицах, либо в абсолютных.

Также много атрибутов имеет тег <td>, отвечающий за ячейку таблицы. Рассмотрим их более подробно:

1) Атрибут «width». Данный атрибут отвечает за ширину ячейки, атрибута height у тега <td> нет.

2) Атрибут «colspan». Значение этого атрибута отвечает за количество столбцов, которое будет занимать данная ячейка. Если поставить colspan = «2» (как в примере), то ячейка будет занимать 2 столбца.

3) Атрибут «rowspan». Значение этого атрибута отвечает за количество строк, которое будет занимать данная ячейка.

4) Атрибут «align». Значение этого атрибута отвечает за горизонтальное выравнивание элементов внутри ячейки. По умолчанию стоит выравнивание по левому краю. У данного атрибута есть 3 значения: left (выравнивание по левому краю), right (выравнивание по правому краю), center (выравнивание по центру).

5) Атрибут «valign». Значение этого атрибута отвечает за вертикальное выравнивание элементов внутри ячейки. По умолчанию стоит выравнивание по центру. У данного атрибута есть 3 значения: top (выравнивание по верхнему краю), center (или middle) (выравнивание по центру), bottom (выравнивание по нижнему краю).

Как видите ничего сложного здесь нет, самый важный момент при освоении таблиц — это практика. Поэтому вот вам домашнее задание:

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

В данной статье вы научились создавать таблицы в html.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Следующая статья >

Таблица внутри таблицы в html

Редко очень возникает потребность в создании таблицы, внутри которой находится ещё одна таблица.

Если вы хорошо знаете HTML, то у вас не возникнет проблемы, но всётаки давайте попробуем это сделать.

Для начала, давайте создадим простую таблицу 2х2:

<table border="1">
	<tr>
		<td>Ячейка 1.1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>Ячейка 2.1</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

Получили простую таблицу:

Теперь внутри ячейки 2.1 мы вставим таблицу:

<table border="1">
	<tr>
		<td>Ячейка 1.1</td>
		<td>Ячейка 1.2</td>
	</tr>
	<tr>
		<td>
    		<table border="1">
            	<tr>
            		<td>Ячейка 2.1 - 1.1</td>
            		<td>Ячейка 2.1 - 1.2</td>
            	</tr>
            	<tr>
            		<td>Ячейка 2.1 - 2.1</td>
            		<td>Ячейка 2.1 - 2.2</td>
            	</tr>
            </table>
		</td>
		<td>Ячейка 2.2</td>
	</tr>
</table>

И мы получим следующие:

Вот так просто и создаётся таблица в таблице. Также попробуйте наш генератор html-таблиц.

HTML-таблиц — Учебное пособие по HTML

столов!

Все в порядке.

Введение

Некоторый контент, естественно, подходит для представления в виде таблицы. Большинству людей тоже нравятся таблицы, поскольку их легко быстро сканировать и воспринимать содержимое. В этом разделе мы узнаем, как создавать таблицы в HTML.

Отображение таблицы

Таблица — один из наиболее сложных элементов для создания в HTML.Вам потребуется изрядное количество тегов, чтобы они собрались вместе. Как вы увидите ниже, существует несколько различных вариантов, но базовая компоновка выглядит следующим образом:

Приведенный выше код создает таблицу с одной строкой таблицы ( tr ). Внутри строки находятся два столбца или две ячейки, определяемые тегами данных таблицы ( td ).

Для каждой строки, которую вы хотите в вашей таблице, вы включаете еще одну пару тегов tr . Тогда каждая строка может иметь столько тегов td внутри себя, сколько необходимо.

Мы также можем заменить td на th для любых ячеек, которые мы хотим использовать в качестве заголовков.

Вот пример:

simple_table.html

2. Некоторые цитаты Монти Пайтона:

4. <таблица>
6. Фильм
7. Год
8. Цитата
11. Монти Пайтон и Святой Грааль
12. 1975
13. Ну она превратила меня в тритона!
16. Монти Пайтон из жизни Брайана
17. 1979
18. Он не Мессия, он очень непослушный мальчик!
21. Смысл жизни Монти Пайтона
22. 1983
23. И получите машину, которая пингует!

Простые столы

Некоторые цитаты Монти Пайтона:

Группы строк

Стандартная таблица, как определено выше, создает объект с набором строк и столбцов.HTML должен описывать содержимое, и таблица нередко имеет разные разделы. Обычно у нас есть заголовки для наших столбцов вверху, затем содержание в середине и сводка внизу. Чтобы отразить это, мы можем разделить таблицу на заголовок таблицы ( thead ), тело таблицы ( tbody ) и нижний колонтитул таблицы ( tfoot ). Вот пример:

table_sections.html

2. Некоторая планетарная статистика:

4. <таблица>
7. Планета
8. Диаметр
9. Известные Луны
12. <тело>
14. Земля
15. 12,756 км
16. 1
19. Марс
20. 6,794 км
21. 2
24. <фут>
26. Среднее
27. 9775 км
28. 1.5

Разделы таблицы

Некоторая планетарная статистика:

Вы заметите, что визуально это не сильно меняется. Это нормально. С помощью CSS (который мы рассмотрим в другом руководстве) вы можете изменить внешний вид разделов по отдельности. Основное преимущество — для людей с программами чтения с экрана и другими средствами доступа к вашим страницам, поскольку это значительно упрощает понимание содержимого таблицы. Использование thead , tbody и tfoot необязательно, но в зависимости от того, кто ваши посетители, это может сделать их намного счастливее.

Использование thead также имеет преимущества в некоторых других областях. Если люди печатают ваш контент, а у вас большая таблица, браузер может воспроизводить заголовок таблицы вверху каждой страницы, чтобы облегчить читателю задачу. Некоторые устройства с меньшим экраном (например, телефоны и планшеты) могут также исправить заголовок таблицы и позволить строкам тела таблицы прокручиваться.

Colspans и Rowspans

Иногда имеет смысл разделить ячейку на несколько строк или несколько столбцов.Мы можем добиться этого в HTML с помощью атрибутов colspan и rowspan .

Колспанс

Colspans позволяют растянуть ячейку на несколько столбцов.

содержание

Вот пример:

colspan_example.html

2. Некоторые бессмысленные данные:

4. <таблица>
6. 100%
9. 33%
10. 33%
11. 33%
14. 33%
15. 67%

Ряд пролетов

Рядов позволяет растянуть ячейку на несколько рядов.

содержание

Вот пример:

rowspan_example.html

2. Еще ерунда:

4. <таблица>
6. 100%
7. 33%
8. 33%
11. 33%
12. 67%
15. 33%

Возможно, чтобы в ячейке одновременно были определены rowspan и colspan .У вас также может быть смесь ячеек с промежутками между строками и другими ячейками с промежутками в одной таблице. Однако, если их слишком много, это может быстро запутаться.

Сводка

Создайте таблицу.

Создайте строку таблицы.

Создайте ячейку заголовка таблицы.

Создайте ячейку данных таблицы.

Создайте заголовок таблицы.

Создайте тело таблицы.

Создайте нижний колонтитул таблицы.

Создайте ячейку, занимающую несколько столбцов.

Создайте ячейку, занимающую несколько строк.

Соответствующее содержание

Для правильного содержания списки — отличный способ представить его.

Отступ

Структуру кода для списков намного легче читать, если код имеет соответствующий отступ.

Мероприятия

Теперь давайте добавим немного графического оформления нашему контенту.

• Добавьте таблицу к своему содержимому. Посмотрите, что произойдет, если вы создадите строку с большим или меньшим количеством ячеек, чем другие строки.
• Создайте таблицу из нескольких строк и столбцов. Теперь представьте несколько интервалов и интервалов . Поэкспериментируйте с размещением большего количества ячеек в строке или удалением некоторых и посмотрите, как это повлияет на таблицу. Что произойдет, если вы сделаете colspan или rowspan больше, чем общее количество строк или столбцов в таблице?

По мере того, как мы работаем с этим руководством, в каждый раздел будут добавляться новые теги, позволяющие делать больше интересных вещей. Я предлагаю вам выбрать интересующую вас тему или тему и создать страницу об этом.По мере проработки каждого раздела добавляйте и улучшайте страницу с помощью новых выученных тегов.

.

Как создать HTML-таблицу

2. Программирование
3. Как создать HTML-таблицу

Стив Суэринг, Джанет Валадж

При создании веб-страниц вам необходимо знать, как добавлять различные типы данных и элементы, включая таблицы. Чтобы создать веб-страницу с таблицей, выполните следующие действия:

1. Откройте текстовый редактор.

2. В текстовом редакторе создайте новый текстовый документ.

   Большинство текстовых редакторов открываются с пустым или пустым документом.Если у вас есть что-то в документе, удалите его, прежде чем продолжить.

3. Введите следующий HTML-код:

    
   
   
   
   
   
    Моя таблица 
   <таблица>
       
            Код аэропорта 
            Обычное название / город 
       
       
            CWA 
            Центральный аэропорт Висконсина 
       
       
            ЗАКАЗ 
            Чикаго О'Хара 
       
       
            LHR 
            Лондонский аэропорт Хитроу 
       
   
   
    

4. Сохраните файл как таблицу.html.

   Сохраните файл с расширением .html. Файл должен быть сохранен в корне вашего документа.

5. Просмотрите файл в своем браузере.

   Откройте веб-браузер и введите http: //localhost/table.html в адресную строку. Откроется такая страница.

   Обратите внимание, что вокруг таблицы нет границ. Если вы хотите добавить границы, продолжайте выполнять это упражнение.

6. Открытый стол.html в текстовом редакторе.

   Если вы закрыли текстовый редактор, откройте его снова и загрузите table.html.

7. Измените код в table.html на следующий:

    
   
   
   
   
   
    Моя таблица 
    border = "1" >
       
   
           
    Код аэропорта 
           
    Обычное название / город 
       
       
   
           
    CWA 
           
    Центральный аэропорт Висконсина 
       
       
   
           
    ЗАКАЗ 
           
    Чикаго О'Хара 
       
       
   
           
    LHR 
           
    Лондонский аэропорт Хитроу 
       
   
   
    

   Обратите внимание, что единственное изменение — это добавить пробел, а затем границу = ”1 ″ внутри элемента

   .

   Перезагрузите table.html в своем браузере.

   Если вы закрыли браузер, снова откройте его и перейдите по адресу http: //localhost/table.html . Если ваш браузер все еще открыт, нажмите Ctrl + R, чтобы обновить страницу (Command + R на Mac). Теперь вы видите рамку вокруг стола, как показано здесь.

   Об авторе книги

   Стивен Сюринг — архитектор технологий и автор или редактор нескольких популярных книг по технологиям.Джанет Валад — технический писатель, веб-дизайнер, программист и системный аналитик. Она провела различные технические семинары и написала несколько книг, в том числе PHP и MySQL для чайников, 4-е издание .

   .

   Таблицы Основные понятия • Таблицы • Учебники по веб-доступности WAI

   Технологии, описанные в этом руководстве:

   HTML4
   HTML5
   WAI-ARIA

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

   Ячейки заголовка должны быть помечены

   , а ячейки данных —	, чтобы таблицы были доступны. Для более сложных таблиц могут потребоваться явные ассоциации с использованием атрибутов области , id и заголовков . Из этого туториала Вы узнаете, как применять соответствующую структурную разметку к таблицам. Включает следующие страницы: Таблицы с одним заголовком для строк или столбцов: для таблиц с легко различимым содержимым пометьте ячейки заголовка	, а ячейки данных —	элементами. Таблицы с двумя заголовками имеют простой заголовок строки и простой заголовок столбца: для таблиц с нечеткими направлениями заголовка определите направление каждого заголовка, установив для атрибута scope значение col или row . Таблицы с нерегулярными заголовками имеют ячейки заголовка, которые охватывают несколько столбцов и / или строк: для этих таблиц определите группы столбцов и строк и установите диапазон ячеек заголовков, используя значения colgroup и rowgroup атрибута области . Таблицы с многоуровневыми заголовками имеют несколько ячеек заголовков, связанных с каждой ячейкой данных: для таблиц, которые настолько сложны, что ячейки заголовка не могут быть связаны строго горизонтальным или вертикальным способом, используйте id и атрибутов заголовков для явно свяжите заголовок и ячейки данных. Заголовок и сводка: Заголовок определяет общую тему таблицы и полезен в большинстве ситуаций.Сводка предоставляет подсказки для ориентации или навигации в сложных таблицах. Некоторые форматы документов, отличные от HTML, например PDF, предоставляют механизмы, аналогичные структурам таблиц разметки. Приложения для обработки текстов также могут предоставлять механизмы для таблиц разметки. Разметка таблиц часто теряется при преобразовании из одного формата в другой, хотя некоторые программы могут предоставлять функции, помогающие преобразовать разметку таблицы. Многие инструменты веб-разработки и системы управления контентом (CMS) предоставляют функции для определения ячеек заголовков во время создания таблицы без необходимости редактировать код вручную. Примечания: В этом руководстве представлены инструкции по созданию таблиц, используемых для отображения данных в сетке. Этот учебник не применяется к таблицам, используемым для разметки. Как правило, таблицы не предназначены для использования в целях разметки. Вместо этого лучше всего использовать каскадные таблицы стилей (CSS) для визуального представления. Почему это важно? Таблицы без структурной разметки для различения и правильной связи между ячейками заголовка и данных создают барьеры доступности.Для создания доступной таблицы недостаточно полагаться только на визуальные подсказки. С помощью структурной разметки заголовки и ячейки данных могут быть определены программно с помощью программного обеспечения, что означает, что: Люди, использующие программы чтения с экрана , могут читать вслух заголовки строк и столбцов во время навигации по таблице. Программы чтения с экрана озвучивают одну ячейку за раз и ссылаются на связанные ячейки заголовка, поэтому программа чтения не теряет контекст. Некоторые люди используют альтернативные способы визуализации данных , например, используя настраиваемые таблицы стилей для более заметного отображения ячеек заголовков.Подобные методы позволяют им изменять размер и цвета текста и отображать информацию в виде списков, а не сеток. Код таблицы должен быть правильно структурирован, чтобы обеспечить возможность альтернативного отображения. Эти руководства содержат практические рекомендации по реализации специальных возможностей в различных ситуациях. На этой странице собраны следующие критерии успеха и методы WCAG из разных уровней соответствия: Критерии успеха: 1.3.1 Информация и отношения: информация, структура и отношения, передаваемые через презентацию, могут быть определены программно или доступны в тексте. (Уровень A) Мы приветствуем ваши идеи Присылайте любые идеи, предложения или комментарии в (общедоступный) список рассылки [email protected]. Вы также можете внести свой вклад в код прямо на Github. Создайте и отредактируйте эту страницу на Github . No related posts. Share : Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт