Построение html таблиц: Учебник HTML 5. Статья «Таблицы» – Красивое оформление таблиц

Создание HTML-таблиц | Белые окошки

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

Для решения данной задачи используется такой HTML-элемент, как table. Как и многие другие элементы, он обладает открывающимся (обозначает начало таблицы) и закрывающимся (обозначает конец таблицы) тегом.

Внутри тегов table используются элементы tr, td, th и некоторые другие. Первым по порядку вложенности является элемент tr (table row) – им обозначают отдельную горизонтальную строку таблицы. Он также обладает открывающимся и закрывающимся тегом (они обозначают начало и конец строки соответственно)

. От того, сколько элементов tr расположено внутри элемента table, зависит общее количество строк в таблице. Для создания отдельных ячеек используется элемент td (table data). Между его открывающимся и закрывающимся тегом должно располагаться содержимое ячейки. Если поместить текст в какое-то другое место, к примеру, между tr и td или между table и tr, то он не попадет в таблицу, а вылезет перед ней (либо после). Вложенность элементов один в другой должна быть именно такой – сначала table, в нем – tr, а в нем – td. В одном элементе table может содержаться неограниченное количество tr, а в одном tr – неограниченное количество td. Главное – чтобы каждому открывающемуся тегу соответствовал закрывающийся, который находится на этом же уровне.

Вместо элемента td может быть использован элемент th (table head). Он обладает лишь двумя отличиями от td.

Отличие номер 1 – текст в ячейке становится полужирным. Отличие номер 2 – текст в ячейке выравнивается по центру. Как правило, th используют для формирования так называемых заголовочных ячеек первой строки таблицы (или первого столбца).

Ячейки HTML-таблицы можно объединять как по горизонтали, так и по вертикали. Для горизонтального объединения используется специальный атрибут элементов td и th под названием colspan (к примеру, colspan=”2”). Если вы хотите объединить несколько рядом стоящих ячеек, то у первой из них поставьте данный атрибут со значением, равным количеству ячеек. Все остальные ячейки, которые будут присоединяться к данной, просто удалите из кода. При вертикальном объединении используется атрибут rowspan. Он работает по тому же принципу, только удалять нужно ячейки, расположенные в нижних строчках.

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

При помощи CSS-правил можно задать таблице и ее отдельным элементам нужные нам свойства. К примеру, для самой таблицы можно задать параметры рамки, длину, ширину, основной и фоновый цвет и т.д. Почти то же самое можно сделать для отдельных строк или ячеек. К примеру, используя псевдоклассы CSS под названием nth-child, nth-last-child, а также простые формулы линейных уравнений из математики, можно работать с четными или нечетными строками / ячейками, с каждой третьей, четвертой, пятой строкой / ячейкой и т.д.

На картинках выше приведен пример создания простой таблички 3х3. Также показаны CSS-свойства для этой таблицы и ее внешний вид в браузере.

HTML-таблица — основы построения

Здравствуйте, уважаемые читатели!

Построение таблицы в HTML не потребует значительных усилий на изучение тегов и основных принципов.

На самом деле, их не много и все, что необходимо для получения хорошего результата — это внимательность в написании кода.

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

Как и для создания любого веб-сайта, при построении таблицы необходимо использовать базовые теги, предназначенные для корректного отображения данных:

• <thead></thead> — «голова» («шапка») или заголовки таблицы
• <tbody></tbody> — «тело» таблицы, внутри которого размещается код и данные
• <tfoot></tfoot> — «подвал» (нижняя строка (можно использовать, как итоговую))

Собственно, для создания самой таблицы применяют следующие теги:

• <table></table> — непосредственно формируют таблицу
• <th></th> — используются для определения заголовков таблицы
• <tr></tr> — для построения рядов (строк) таблицы
• <td></td> — для построения столбцов из ячеек таблицы
• <caption></caption> — оформление названия таблицы (может располагаться внизу или вверху)

Рассмотрим пример построения простейшей таблицы для каталога абстрактного интернет магазина, размером 3х3:

<html>
<head>
<title>HTML-таблица</title>
</head>
//переходим к телу таблицы
<body>
//Далее непосредственно сама таблица
<table>


<caption>Таблица №1. Каталог продукции</caption>
<thead>
<tr><th>Товар</th><th>Стоимость товара (у.е.)</th><th>Возможность заказа</th></tr>
</thead>
//первый ряд
<tbody>
<tr><td>Двери</td><td>1000</td><td>Отсутствует</td></tr>
//второй ряд
<tr><td>Витраж</td><td>500</td><td>В наличии</td></tr>
//третий ряд
<tr><td>Доборы</td><td>300</td><td>Под заказ</td></tr>
</tbody>
</table>
</body>
</html>

Получаем простой, но не очень привлекательный результат:

Таблица №1. Каталог продукции

Совар	Стоимость товара (у. е.)	Возможность заказа
Двери	1000	Отсутствует
Витраж	500	В наличии
Доборы	300	Под заказ

При построении таблицы могут быть использованы атрибуты форматирования или оформления. Сюда относятся:

• «width» — ширина столбцов и «height» — высота ячеек
• «background» — заливка рисунком или «bgcolor» — заливка цветом
• «border» — создание рамки заданной ширины
• «align» — выравнивание таблицы и текста по горизонтали
• «valign» — выравнивание текста по вертикали

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

<table border="2" align="center">
<caption>Таблица №2. Каталог продукции</caption>
<thead>


<tr align="center" bgcolor="red"><th>Товар</th><th>Стоимость товара (у. е.)</th><th>Возможность заказа</th></tr>
</thead>
<tbody>
<tr align="center"><td>Двери</td><td>1000</td><td>Отсутствует</td></tr>
<tr align="center"><td>Витраж</td><td>500</td><td>В наличии</td></tr>
<tr align="center"><td>Доборы</td><td>300</td><td>Под заказ</td></tr>
</tbody>
</table>

Получаем следующий результат:

Таблица №2. Каталог продукции

Товар	Стоимость товара (у. е.)	Возможность заказа
Двери	1000	Отсутствует
Витраж	500	В наличии
Доборы	300	Под заказ

Благодарю за внимание! С уважением,
Николай Мурашкин, автор NikMurashkin.ru

Тег TABLE. Создание HTML-таблицы | web-sprints

Довольно часто возникает необходимость добавить на сайт одну или несколько таблиц с данными. Конечно, можно нарисовать таблицу в графическом редакторе и вставить на страницу лишь изображение. Однако, гораздо более гибкий вариант – использование HTML—тега table. Это позволяет вам динамически менять внешний вид таблицы (через CSS)и ее содержимое (посредством PHP или JS).

Сам по себе тег table создает пустую таблицу без колонок и строк. Дабы в ней появились эти самые колонки и строки, необходимо добавить внутрь table другие теги, а именно – tr и td. Тег tr

позволяет сформировать отдельную пустую строку таблицы (без ячеек), а td – отдельную ячейку внутри текущей строки. Количество элементов td определит количество колонок в строке. Если в разных строках количество td отличается друг от друга, то таблица может перекоситься. Вот пример кода простой таблицы, состоящей из одной строки и двух ячеек в ней:

<table> <tr> <td>1_ячейка</td> <td>2_ячейка</td> </tr> </table>

<table> <tr> <td>1_ячейка</td> <td>2_ячейка</td> </tr> </table>

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

, а также tfoot. Первый элемент thead заключает в себе одну или несколько строк (tr), которые будут располагаться вверху таблицы (первые строки). tbody может заключать в себя строки, располагающиеся в средней части таблицы. tfoot может заключать в себя строки, располагающиеся в нижней части таблицы (в коде данный блок всегда должен идти сразу после thead). tbody может присутствовать внутри таблицы сразу в нескольких экземплярах. Что касается thead и tfoot, то их максимальное количество равно 1.

Вернемся к основному тегу table. Он может обладать множеством разных атрибутов. Ниже перечислим некоторые из них.

1. align. Задается тип выравнивания во всех ячейках таблицы (лево, право, центр).
2. cols. Задается число колонок (может высчитываться, исходя из количества элементов td, но явное указание немного ускоряет построение таблицы).
3. background. Указывается URL—адрес фоновой картинки.
4. width. Указывается ширина таблицы в пикселях или процентах от ширины родительского HTML—элемента.
5.  border. Задается толщина бордера (границы) таблицы.
6. cellpadding и cellspacing. Это внутренние отступы в каждой ячейке и расстояние между ячейками соответственно.
7. rules. Здесь указываются параметры отображения границ между ячейками (вокруг всех ячеек, вокруг групп thead / tbody / tfoot, вокруг колонок и т.д.).

Элемент td (отдельная ячейка таблицы) обладает почти теми же атрибутами. Тут тоже есть align, background, width и т.д. Кроме того, появляется несколько новых атрибутов. rowspan позволяет склеить несколько ячеек по горизонтали (в одной строке). Число в значении этого атрибута – это и есть количество объединяемых ячеек. colspan делает то же самое, только по вертикали (объединяет несколько ячеек в одной колонке). Атрибут valign позволяет применять к ячейке вертикальное выравнивание (верхний край, нижний край, центр).

Создание таблиц в HTML | bookhtml.ru

Таблицы — очень важная часть HTML и при создании любого сайта без таблиц не обойтись. Использование таблиц облегчает возможность придавать сайту нужный вид, так как мы можем свободно регулировать ширину и высоту таблицы.

В этом уроке html давайте займемся основами создания таблиц и какие при этом используются теги. Начнем с самого главного тега, отвечающего за создание таблицы — парного тега <table>.

Пример:

<table>

…

</table>

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

Строка в таблице создается с помощью парного тега <tr>, а столбец — с помощью парного тега <td>.

Пример:

<table>

<tr>

<td></td>

</tr>

</table>

Теперь можно сказать, что таблицу создали и в нее можно что-то записать. Давайте создадим в таблице наш первый абзац.

Пример:

<table>

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>

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

Первый атрибут таблиц — это атрибут border , который отвечает за рамку. По умолчанию в значении атрибута стоит «0» (рамка не видна). Если мы хотим увидеть рамку, мы должны поставить значение отличное от нуля, например «1»

Пример:

<table border=»1″>

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>

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

Теперь давайте увеличим ширину нашей таблицы, применив еще один атрибут — это атрибут width, который отвечает за ширину объекта. Ширину можно задавать и в пикселях и в процентах. Если мы задаем ширину таблицы в пикселях, то в значении атрибута просто пишем необходимое число.

Пример:

<table border=»1″>

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>

 

Ширина нашей таблицы стала 600 пикселей. Выравниваем по центру, используя уже известный нам атрибут align, отвечающий за выравнивание.

Пример:

<table border=»1″ align=»center»>

<tr>

<td><p>Первый абзац в таблице</p></td>

</tr>

</table>

Теперь давайте в нашей строке к одному столбцу добавим еще пару столбцов. Для этого нам необходимо прописать еще пару тегов <td>. Для каждого столбца — один тег.

Пример:

<table border=»1″ align=»center»>

<tr>

<td><p>Первый столбец таблицы</p></td>

<td><p>Второй столбец таблицы</p></td>

<td><p>Третий столбец таблицы</p></td>

</tr>

</table>

Если мы хотим задать каждому столбцу определенную ширину — прописываем каждому тегу <td> атрибут width с указанием соответствующей ширины.

Пример:

<table border=»1″ align=»center»>

<tr>

<td ><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

</table>

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

Далее добавим в нашей таблице еще одну строку, применив, соответственно еще один тег <tr>. И так же пропишем в эту строку три столбца.

Пример:

<table border=»1″ align=»center»>

<tr>

<td ><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

<td ><p>Третий столбец второй строки </p></td>

</tr>

</table>

Идем дальше в создании таблицы. Для изменения цвета рамки применяем атрибут bordercolor, отвечающий за цвет рамки. В значении атрибута прописываем тот цвет, который нам требуется.

Пример:

<table border=»1″ align=»center» bordercolor=»red»>

<tr>

<td ><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

<td ><p>Третий столбец второй строки </p></td>

</tr>

</table>

Рамка стала красного цвета.

Теперь сделаем отступы внутри каждой ячейки таблицы (текст внутри ячейки прижат к рамке). Делается это с помощью атрибута cellpadding ( cell — это ячейка, padding — внутренний отступ). В значении атрибута прописываем расстояние в пикселях, которое должно быть между текстом и рамкой ячейки.

Пример:

<table border=»1″ align=»center» bordercolor=»red» cellpadding=»10″>

<tr>

<td ><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

<td ><p>Третий столбец второй строки </p></td>

</tr>

</table>

А как бы нам текст в каждой ячейке первой строки выровнять по центру (по умолчанию он прижат к левому краю). Для этого к тегу первой строки добавляем атрибут align со значением «center».

Пример:

<table border=»1″ align=»center» bordercolor=»red» cellpadding=»10″>

<tr align=»center»>

<td ><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

<td ><p>Третий столбец второй строки </p></td>

</tr>

</table>

 

Текст в каждой ячейке первой строки выровнялся по центру.

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

Пример:

<table border=»1″ align=»center» bordercolor=»red» cellpadding=»10″>

<tr align=»center»>

<td ><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

<td ><p>Третий столбец второй строки </p></td>

</tr>

<tr>

<td>Третья строка</td>

</tr>

</table>

Проверяем в браузере. У нас появилась третья строка, но ширина ячейки в этой строке такая же как и всех ячеек. Если применить атрибут width и проставить нужное значение — то это нам ничего не дает (можете проверить). Для того что-бы ячейка третьей строки заняла ширину нескольких ячеек необходимо применить специальный атрибут colspan (объеденить несколько ячеек), а в значении атрибута указать количество объединяемых ячеек (две или три).

Пример:

<table border=»1″ align=»center» bordercolor=»red» cellpadding=»10″>

<tr align=»center»>

<td ><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

<td ><p>Третий столбец второй строки </p></td>

</tr>

<tr>

<td colspan=»3″>Третья строка</td>

</tr>

</table>

Вот так работает атрибут colspan.

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

Пример:

<table border=»1″ align=»center» bordercolor=»red» cellpadding=»10″>

<tr align=»center»>

<td rowspan=»2″><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

<td ><p>Третий столбец второй строки </p></td>

</tr>

<tr>

<td colspan=»3″>Третья строка</td>

</tr>

</table>

Проверяем в браузере. Что-то не то. Во второй строке у нас появилась лишняя ячейка. Не беда. Нам всего лишь надо удалить одну ячейку из второй строки.

Пример:

<table border=»1″ align=»center» bordercolor=»red» cellpadding=»10″>

<tr align=»center»>

<td rowspan=»2″><p>Первый столбец таблицы</p></td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

</tr>

<tr>

<td colspan=»3″>Третья строка</td>

</tr>

</table>

Готово. Теперь у нас все выглядит как мы и хотели.

Вот так атрибут rowspan объединяет ячейки по вертикали.

Еще мы можем в нашу созданную таблицу вставить еще одну. Это может нам пригодиться в нашей практике. Давайте как раз в объединенную ячейку вместо абзаца вставим еще одну таблицу. Что-бы было удобнее — увеличим ширину основной таблицы до 800 и ширину объединенной ячейки до 400.

Пример:

<table border=»1″ align=»center» bordercolor=»red» cellpadding=»10″>

<tr align=»center»>

<td rowspan=»2″>

<table border=»1″ bordercolor=»green»>

<tr>

<td><p> Первая строка встроенной таблицы</p></td>

</tr>

<tr>

<td><p>Вторая строка встроенной таблицы</p></td>

</tr>

</table>

</td>

<td ><p>Второй столбец таблицы</p></td>

<td ><p>Третий столбец таблицы</p></td>

</tr>

<tr>

<td ><p>Первый столбец второй строки</p></td>

<td ><p>Второй столбец второй строки </p></td>

</tr>

<tr>

<td colspan=»3″>Третья строка</td>

</tr>

</table>

Обратите внимание: значение атрибута width встроенной таблицы прописано в процентах. В нашем случае встроенная таблица занимает 100% объема ячейки.

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

И еще, что нам необходимо знать — это фоновый цвет таблицы. При создании таблицы у нее нет цвета фона. Фон у таблицы прозрачный т.е. фон таблицы будет таким же как и фон страницы.

Кстати, как задавать фон странице мы так и не поговорили. Это делается очень просто — тегу <body> прописываем атрибут bgcolor со значением того фона, который нам необходим.

Пример:

<body bgcolor=»green»>

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

Пример:

<table border=»1″ bgcolor=»white» align=»center» bordercolor=»red» cellpadding=»10″>

На этом закончим о создании таблиц.

Урок 6. HTML таблицы |

Еще каких-то лет 10 тому назад таблица была инструментом верстки всего сайта, сейчас встретить табличную версту можно только в шаблонах e-mail рассылки. Мы же с вами рассмотрим HTML таблицы, как инструмент представления табличных данных.

Суть всей серии мини-уроков по HTML – это предоставить минимально необходимую информацию, которая будет полезна на практике. Избавить от лишнего, например: изучение ненужных атрибутов. Научить пользоваться html элементами. Подготовить к скорейшему изучению CSS.

HTML таблицы

Таблицы – это тот элемент, который содержит массу ненужных атрибутов (которые заменяются свойствами CSS), по-этому, чтобы изучение таблицы было легким, рассмотрим этот html элемент на простом примере.

Таблицы состоит из рядов и ячеек, построим таблицу 3х3 в ячейках, которой будут номер строки и ячейки в этой строке, указанные через точку. (Например: 1.1, 1.2, 1.3, 2.1, 2.2 и т.д.)

<table>
	<tr>
		<td>1.1</td>
		<td>1.2</td>
		<td>1.3</td>
	</tr>
	<tr>
		<td>2.1</td>
		<td>2.2</td>
		<td>2.3</td>
	</tr>
	<tr>
		<td>3.1</td>
		<td>3.2</td>
		<td>3.3</td>
	</tr>
</table>

В создание простой таблицы участвует три html тега:

• table – родительский (главный) тег таблицы, имеет парную структуру, внутри его записываются строки (tr) и ячейки (td).
• tr – тег ряда таблицы, имеет парную структуру, внутри содержит ячейки (td).
• td – тег ячейки, имеет парную структуру, внутри себя содержит информацию (Например: текст, картинку, список, таблицу и т.д.)

 
Простая HTML таблица

 

В демо-примере присутствуют атрибуты:
border – задает ширину границы (рамки), указывать в реальной верстке не нужно, заменяется CSS свойством.
width, height – задает ширину и высоту таблицы, указывать в реальной верстке не нужно, заменяется CSS свойством.

HTML таблицы. Атрибуты colspan и rowspan

Два атрибута, достойные внимания:
colspan, прописывается в ячейке, объединяет соседние ячейки по горизонтали (колонки) начиная от той в которой был прописан данный атрибут. В качестве значение указывают число ячеек, которое необходимо объединить.
rowspan, тоже самое, что и colspan, только объединение ячеек происходит по вертикаль (ряды).

Пример таблицы с colspan

<table border="1">
	<tr>
		<td colspan="2">1.1 - 1.2</td>
		<td>1.3</td>
	</tr>
	<tr>
		<td>2.1</td>
		<td>2.2</td>
		<td>2.3</td>
	</tr>
	<tr>
		<td colspan="3">3.1 - 3.3</td>
	</tr>
</table>

Простая HTML таблица с colspan

Обратите внимание, если мы указываем атрибут colspan=”2″, то это означает, что данная ячейка займет 2 колонки, соответственно одну пару тегов TD из этого ряда мы удаляем!

 

 

Пример таблицы с rowspan

<table border="1">
	<tr>
		<td rowspan="3">1.1 - 3.1</td>
        <td>1.2</td>
		<td>1.3</td>
	</tr>
	<tr>
		<td>2.2</td>
        <td rowspan="2">2.3 - 3.3</td>
	</tr>
	<tr>
		<td>3.2</td>
	</tr>
</table>

Пример HTML таблицы. Атрибут rowspan

Обратите внимание, если мы указываем атрибут rowspan=”3″, то это означает, что данная ячейка займет 3 ячейки в одной колонке, соответственно две пары тегов TD из рядов под этой ячейкой мы удаляем!