Содержание

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


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

 

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

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

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

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

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

Закрывающий тег обязательный.


<table></table>

○ тег TR

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

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

○ тег TD

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

 ячейка 1 ячейка 2
 ячейка 1 ячейка 2
 ячейка 1 ячейка 2

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

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

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

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

ряд -1 /столбик 1столбик 2столбик 3

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

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

ряд -1 /столбик 1столбик 2столбик 3
ряд -2 /столбик 1столбик 2столбик 3
ряд -3 /столбик 1столбик 2столбик 3


<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>

Результат:

ряд -1 /столбик 1столбик 2столбик 3
Попробуйте поменять значение в атрибуте 
 
«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>

Результат:

ряд 1 столбик 1
ряд 2 столбик 1ряд 2 столбик 2

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

Результат:

ряд 1 столбик 1ряд 1 столбик 2
ряд 2 столбик 1

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

 

<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>

 

Результат:

ряд -1 /столбик 1
столбик 2		столбик 3
ряд -2 /столбик 1столбик 2столбик 3столбик 4

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

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


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

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


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

Результат:

ряд 1 столбик 1столбик 2

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

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

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


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

Результат:

ряд 1 столбик 1столбик 2

○ Как сделать фон таблицы 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>

Результат:

ряд -1 /столбик 1столбик 2столбик 3
ряд -2 /столбик 1столбик 2столбик 3столбик 4

○ Как вставить картинку в таблицу 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>

Результат:

ряд 1 ячейка 1ячейка 2 

○ Ширина и высота таблицы 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>

Результат:

ряд 1 ячейка 1ячейка 2
ряд 2 ячейка 1ячейка 2

Значения задаются в пикселях (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>Родительский тег таблиц (основной)
<thead>Тег строк заголовка таблицы (дополнительный)
<tr>ряд таблицы (основной)
<td>Ячейка (столбик) таблицы (основной)
<th>Ячейка заголовка таблицы
Должен использоваться внутри тега <thead> (дополнительный)
<caption>Описание или краткое содержание таблицы (дополнительный)

Пример:


<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>

Результат:

Таблица для StepkinBlog.ru
Название 1Название 2
12

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

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

stepkinblog.ru

Создание таблиц в HTML. Все о HTML таблицах

В HTML для создания таблиц используются теги группы table. К ним относятся:

  • <table> — тег обвертка таблицы;
  • <tr> — тег строки (ряда) таблицы;
  • <td> — тег обычной ячейки таблицы;
  • <th> — тег ячейки-заголовка таблицы;
  • <col> — тег колонки таблицы;
  • <colgroup> — тег группы колонок таблицы;
  • <thead> — тег верхнего колонтитула таблицы;
  • <tbody> — тег основной части таблицы;
  • <tfoot> — тег нижнего колонтитула таблицы;
  • <caption> — тег подписи таблицы.

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

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

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

Чтобы создать простую таблицу HTML достаточно 3 тега: <table>, <tr> и <td>.

Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.

Далее необходимо определить строки и ячейки — структуру таблицы.

В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> — во второй колонке и так далее.

Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк <tr> основной части таблицы используют тег <tbody>. Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег <tbody>.

Пример простой таблицы HTML

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

Исходный код простой таблицы HTML

<table>
<tbody>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
<td>Ячейка 3</td>
</tr>
<tr>
<td>Ячейка 4</td>
<td>Ячейка 5</td>
<td>Ячейка 6</td>
</tr>
<tr>
<td>Ячейка 7</td>
<td>Ячейка 8</td>
<td>Ячейка 9</td>
</tr>
</tbody>
</table>

Заголовки таблицы HTML

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

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

Пример HTML таблицы с заголовком th

Volkswagen AG Daimler AG BMW Group
Audi Mercedes-Benz BMW
Skoda Mercedes-AMG Mini
Lamborghini Smart Rolls-Royce

Исходный код таблицы HTML с заголовками th

<table>
<tbody>
<tr>
<th>Volkswagen AG</th>
<th>Daimler AG</th>
<th>BMW Group</th>
</tr>
<tr>
<td>Audi</td>
<td>Mercedes-Benz</td>
<td>BMW</td>
</tr>
<tr>
<td>Skoda</td>
<td>Mercedes-AMG</td>
<td>Mini</td>
</tr>
<tr>
<td>Lamborghini</td>
<td>Smart</td>
<td>Rolls-Royce</td>
</tr>
</tbody>
</table>

Объединение ячеек в таблице HTML

В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

Чтобы объединить ячейки по горизонтали используйте атрибут colspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Чтобы объединить ячейки по вертикали используйте атрибут rowspan=»х«, у ячейки <td> или <th>, где x — количество ячеек для объединения.

Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

<td colspan="3" rowspan="2">Текст ячейки</td>

Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan=»2″.

Пример HTML таблицы с объединением ячеек

Nissan
Модель Комплектация Наличие
Nissan Qashqai VISIA +
TEKNA +
Nissan X-Trail ACENTA +
CONNECTA —

Исходный код таблицы HTML с объединенными ячейками

<table>
<tbody>
<tr>
<th colspan="3">Nissan</th>
</tr>
<tr>
<th>Модель</th>
<th>Комплектация</th>
<th>Наличие</th>
</tr>
<tr>
<td rowspan="2">Nissan Qashqai</td>
<td>VISIA</td>
<td>+</td>
</tr>
<tr>
<td>TEKNA</td>
<td>+</td>
</tr>
<tr>
<td rowspan="2">Nissan X-Trail</td>
<td>ACENTA</td>
<td>+</td>
</tr>
<tr>
<td>CONNECTA</td>
<td>-</td>
</tr>
</tbody>
</table>

Колонтитулы и подпись в HTML таблицах

HTML таблицы можно поделить на 3 области: верхний колонтитул, основная часть, нижний колонтитул.

Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> — область нижнего колонтитулы, <tbody> — основную часть таблицы.

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

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

По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.

Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.

Пример HTML таблицы с колонтитулами и подписью

Комплектации Renault Sandero Stepway
Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
Наличие + + +
Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
Топливо бензин бензин дизель
Норма токсичности Евро-6 Евро-6 Евро-5

Исходный код таблицы с колонтитулами и подписью

<table>
<caption>Комплектации Renault Sandero Stepway</caption>
<thead>
<tr>
<th>Характеристика</th>
<th>SUTA 09H 6R</th>
<th>SUTA 09HR6R</th>
<th>SUTA 15H 5R</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Наличие</th>
<td>+</td>
<td>+</td>
<td>+</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Мощность двигателя</th>
<td>0,9 (90 л.с.)</td>
<td>0,9 (90 л.с.)</td>
<td>1,5 (90 л.с.)</td>
</tr>
<tr>
<th>Топливо</th>
<td>бензин</td>
<td>бензин</td>
<td>дизель</td>
</tr>
<tr>
<th>Норма токсичности</th>
<td>Евро-6</td>
<td>Евро-6</td>
<td>Евро-5</td>
</tr>
</tbody>
</table>

Колонки и группы колонок

HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.

Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).

Теги <col>и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.

Оба тега могут определять стили для одной или нескольких колонок. Атрибут span=»число«, указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

Теги <col> и <colgroup> похожи друг на друга, однако тег <colgroup> позволяет использование вложенных тегов <col>, таким образом можно задать стили группе колонок через <colgroup> и конкретной колонке внутри группы через элемент <col> (см. пример ниже).

Если внутри <colgroup> есть вложенные теги <col>, то атрибут span у тега <colgroup> не ставится, а количество колонок на которые влияет тег определяется вложенными <col> элементами.

Пример HTML таблицы с разделением на колонки

ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
дизель бензин дизель Топливо
АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

Исходный код таблицы HTML c <col> и <colgroup>

<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<tbody>
<tr>
<th>ZEN 2E2C AL A</th>
<th>ZEN 2E2C J5 A</th>
<th>INTENSE 2E3C AL A</th>
<th>Характеристика</th>
</tr>
<tr>
<td>1.5 (90 л.с.)</td>
<td>1.2 (115 л.с.)</td>
<td>1.5 (90 л.с.)</td>
<th>Мощность двигателя</th>
</tr>
<tr>
<td>дизель</td>
<td>бензин</td>
<td>дизель</td>
<th>Топливо</th>
</tr>
<tr>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<td>АКП6 (EDC)</td>
<th>Трансмиссия</th>
</tr>
</tbody>
</table>

Таблицы в макете страниц сайта

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

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

guruweba.com

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
2.0+1.0+2.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.

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

Синтаксис

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

Атрибуты

align
Определяет выравнивание таблицы.
background
Задает фоновый рисунок в таблице.
bgcolor
Цвет фона таблицы.
border
Толщина рамки в пикселах.
bordercolor
Цвет рамки.
cellpadding
Отступ от рамки до содержимого ячейки.
cellspacing
Расстояние между ячейками.
cols
Число колонок в таблице.
frame
Сообщает браузеру, как отображать границы вокруг таблицы.
height
Высота таблицы.
rules
Сообщает браузеру, где отображать границы между ячейками.
summary
Краткое описание таблицы.
width
Ширина таблицы.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Таблица размеров обуви</title>
 </head>
 <body>
  <table border="1">
   <caption>Таблица размеров обуви</caption>
   <tr>
    <th>Россия</th>
    <th>Великобритания</th>
    <th>Европа</th>
    <th>Длина ступни, см</th>
   </tr>
   <tr><td>34,5</td><td>3,5</td><td>36</td><td>23</td></tr>
   <tr><td>35,5</td><td>4</td><td>36⅔</td><td>23–23,5</td></tr>
   <tr><td>36</td><td>4,5</td><td>37⅓</td><td>23,5</td></tr>
   <tr><td>36,5</td><td>5</td><td>38</td><td>24</td></tr>
   <tr><td>37</td><td>5,5</td><td>38⅔</td><td>24,5</td></tr>
   <tr><td>38</td><td>6</td><td>39⅓</td><td>25</td></tr>
   <tr><td>38,5</td><td>6,5</td><td>40</td><td>25,5</td></tr>
   <tr><td>39</td><td>7</td><td>40⅔</td><td>25,5–26</td></tr>
   <tr><td>40</td><td>7,5</td><td>41⅓</td><td>26</td></tr>
   <tr><td>40,5</td><td>8</td><td>42</td><td>26,5</td></tr>
   <tr><td>41</td><td>8,5</td><td>42⅔</td><td>27</td></tr>
   <tr><td>42</td><td>9</td><td>43⅓</td><td>27,5</td></tr>
   <tr><td>43</td><td>9,5</td><td>44</td><td>28</td></tr>
   <tr><td>43,5</td><td>10</td><td>44⅔</td><td>28–28,5</td></tr>
   <tr><td>44</td><td>10,5</td><td>45⅓</td><td>28,5–29</td></tr>
   <tr><td>44,5</td><td>11</td><td>46</td><td>29</td></tr>
   <tr><td>45</td><td>11,5</td><td>46⅔</td><td>29,5</td></tr>
   <tr><td>46</td><td>12</td><td>47⅓</td><td>30</td></tr>
   <tr><td>46,5</td><td>12,5</td><td>48</td><td>30,5</td></tr>
   <tr><td>47</td><td>13</td><td>48⅔</td><td>31</td></tr>
   <tr><td>48</td><td>13,5</td><td>49⅓</td><td>31,5</td></tr>
  </table>
 </body>
</html>

htmlbook.ru

Создание таблицы в HTML | HTML/xHTML

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

Другими словами, в HTML оформление таблицы может быть вовсе не заметным, однако выполнять функцию каркаса, занимая всю веб-страницу.

Можно поместить, например, в её левый столбец меню, основную информацию в средний, а контактные данные — в правый.

Итак, как сделать таблицу в HTML?

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

<body>
<table>
<tr>
   <td>Столбец 1</td>
   <td>Столбец 2</td>
   <td>Столбец 3</td>
</tr>
</table>
</body>

В окне браузера только что созданная таблица выглядит следующим образом:


Таблица начинается с тега <table> и заканчивается парным ему </table>. Всё содержимое таблицы описывается сверху вниз по строкам, каждая из которых начинается с тега <tr> и заканчивается </tr>.

Ячейки строки описываются слева направо с помощью тегов <td> и </td>. В ячейку вы можете поместить как текст, так и графические файлы и даже другие таблицы.

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

<body>
<table border="1">
<tr>
   <td>Столбец 1</td>
   <td>Столбец 2</td>
   <td>Столбец 3</td>
</tr>
</table>
</body>

Для того чтобы указать фон ячейки таблицы HTML, строки или отдельной ячейки, к тегам <table>, <td> и <tr> можно применить следующие параметры:

  • background — в качестве фона используется изображение. Указать можно либо имя файла, либо путь к нему;
  • bgcolor — фоном является определённый цвет. Указать можно как название интересующего оттенка, так и шестнадцатеричный код.

Для того чтобы изменить цвет текста в таблице HTML, необходимо использовать тег <font>.

Например:

<table border="1" bgcolor="green">
<tr bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

В HTML отступы в таблице задаются с помощью тега <table>:

  • cellspacing — расстояние между границами соседних ячеек;
  • cellpading — расстояние между содержимым и границей ячейки.

Например:

<table border="1" bgcolor="green" cellspacing="20" cellpadding="20">
<tr bgcolor="blue">
    <td><font color="white">Ячейка 1</font></td>
    <td bgcolor="red"></td>
</tr>
<tr>
    <td>
 background="http://t2.gstatic.com/images?q=tbn:ANd9GcRfByY7DCMopoeaahCdF4Yi7HWMo89lEYTZVJb4GAew7ZlZNiPW">Ячейка 3</td>
    <td>Ячейка 4</td>
</tr>
</table>

Визуальное отображение данного кода в браузере таково:

Вы можете для каждой отдельной ячейки или строки задать два параметра, которые выполняют горизонтальное (align) и вертикальное (valign) выравнивание текста в таблице HTML.

Параметр align может иметь следующие значения:

  • left — выравнивание по левой границе;
  • right — выравнивание по правой границе;
  • center — выравнивание по центру.

Параметр valign может иметь такие значения:

  • bottom — выравнивание по нижней границе;
  • top — выравнивание по верхней границы;
  • middle — выравнивание посередине.

Пример:

<table border= "1">
 <td>Текст 1</td>
   <td align="right" valign="top">Текст 2</td>
</table>


Как сделать таблицу по центру в HTML? С помощью упомянутого значения center.

Например:

<table cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table cellpadding="60" cellspacing="4" border="1">
        <tr>
          <td>
            Текст таблицы
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

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

Например:

<table border= "1">
<tr align="left"> 
   <td><img src="http://amadeya.users.photofile.ru/photo/amadeya/1288508/xlarge/42642197.jpg"></td> 
   <td> Содержимое 2 ячейки </td> </tr>
<tr align="right"> 
   <td> Содержимое 3 ячейки </td>
    <td> Содержимое 4 ячейки </td> </tr>
</table>


Дополнительными атрибутами в данном случае являются:

  • width — ширина;
  • height — высота;
  • alt — альтернативный текст, который отображается в браузере при отключенной функции отображения изображений;
  • title — подпись к картинке;
  • align — горизонтальное выравнивание;
  • valign — вертикальное выравнивание.

Кроме того, облачив изображение в специальный тег <a href=»страница, на которую ведёт ссылка»><img src=»имя файла.jpg»></a>, его можно использовать в качестве ссылки.

Соседствующие ячейки внутри одного столбца или строки можно объединить с помощью параметров rowspan и colspan тега <td>.

Объединение столбцов одной строчки выглядит так:

<table border="1">
<tr>
   <td colspan="3">Текст 2</td>
</tr>
<tr>
   <td>Текст 2</td>
   <td>Текст 3</td>
   <td>Текст 4</td>
</tr>
</table>


У HTML таблицы объединение ячеек одного столбца выглядит следующим образом:

<table border="1">
<tr>
   <td rowspan="3">Текст 1</td>
   <td>Текст 2</td>
</tr>
<tr>
   <td>Текст 3</td>
</tr>
<tr>
   <td>Текст 4</td>
</tr>
</table>

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

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

Одним из наиболее распространенных генераторов таблиц является русскоязычный сервис http://rusws.ru/genertabtag. В его арсенале имеется множество настроек для построения таблиц: вы можете задать цвет фона, выравнивание, ширину таблицы, толщину рамки и т.д.


Несмотря на то, что сервис http://www.2createawebsite.com/build/table_generator.html является зарубежным, настроек для генерации таблицы здесь меньше, чем в предыдущем примере. Имеются лишь самые необходимые — количество столбцов, строк, ширина, размер, цвет границы.

Это — отличный вариант для генерации простейших таблиц, однако для более серьёзных целей рекомендуем воспользоваться другими сервисами:


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

Этот же сервис имеет довольно удобный HTML редактор, в котором можно построить, заполнить таблицу, а затем получить её код:


Таким образом, таблица является не только важным статистическим элементом во всех сферах жизни, но и неотъемлемой частью веб-дизайна и вёрстки.

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

Желаем успехов!

www.internet-technologies.ru

Создание таблицы в HTML — красивые примеры

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

Раньше HTML таблицы использовались для вёрстки сайтов. Она так и называлась – табличная вёрстка. Потом на смену ей пришла вёрстка дивами (при помощи тегов div ) которая оказалась намного удобнее и проще. А сейчас наступает эра вёрстки сайтов по технологии flexbox, которая призвана еще больше упростить жизнь web-мастерам.

Однако, несмотря на всё выше сказанное, таблицы в html по-прежнему современны, актуальны и вовсю используются на сайтах. Правда уже не как структура, а как элемент статей сайта.

Создание таблиц в html примеры

Перед началом обучения создания таблицы в HTML, что бы мои и ваши таблицы смотрелись одинаково — сделайте 3 простые вещи:

  1. Создайте файл index.html
  2. Откройте его в браузере
  3. Добавьте туда следующий код:
<style>
  table{
    margin: 50px 0;
    text-align: left;
    border-collapse: separate;
    border: 1px solid #ddd;
    border-spacing: 10px;
    border-radius: 3px;
    background: #fdfdfd;
    font-size: 14px;
    width: auto;
  }
  td,th{
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 3px;
  }
  th{
    background: #E4E4E4;
  }
  caption{
    font-style: italic;
    text-align: right;
    color: #547901;
  }
</style>

Создание простой HTML таблички

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

<table></table>

Но использование одного этого тега мало, ведь таблицу ещё надо наполнить. И там тоже есть свои правила, которые надо неукоснительно соблюдать.

Как вы знаете, в каждой таблице есть свои строки и колонки, которые на пересечении формируют ячейки. Однако в HTML – таблицы строятся немного по другому принципу. Изначально мы задаём им строки, а внутри строк задаём ячейки. И именно от количества ячеек в строке и будет завесить количество столбцов. Давайте попробуем сделать таблицу в html в блокноте.

Создание строк и ячеек

Строки задаются при помощи тегов tr. И внутри строк мы задаём ячейки тегами td. А сейчас мы по-быстрому забабахаем простую таблицу, с одной строкой и четырьмя ячейками. Вот её код:

<table>
  <tr>
    <td>Ячейка 1</td>
    <td>Ячейка 2</td>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
</table>

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

Ячейка 1Ячейка 2Ячейка 3Ячейка 4

А сейчас я предлагаю немного её усложнить, и добавить ещё три строки!

<table>
  <tr>
    <td>Строка1 Ячейка1</td>
    <td>Строка1 Ячейка2</td>
    <td>Строка1 Ячейка3</td>
    <td>Строка1 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка2 Ячейка1</td>
    <td>Строка2 Ячейка2</td>
    <td>Строка2 Ячейка3</td>
    <td>Строка2 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
    <td>Строка3 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
    <td>Строка4 Ячейка4</td>
  </tr>
</table>

Выглядеть она у нас будет вот так:

Строка1 Ячейка1Строка1 Ячейка2Строка1 Ячейка3Строка1 Ячейка4
Строка2 Ячейка1Строка2 Ячейка2Строка2 Ячейка3Строка2 Ячейка4
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3Строка3 Ячейка4
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3Строка4 Ячейка4

Кода получилось довольно много, однако оно того стоило! Думаю, теперь вам ясно, как работает создание таблиц в HTML. Однако это далеко не всё, мы ещё с вами только начали и дальше нас ждёт еще много интересного

Название таблицы — тег caption

Давайте мы немного модернизируем табличку и добавим ей небольшое название. Это делается при помощи тега caption. Этот тег надо размещать самым первым, сразу после открывающего тега table. Вот как это выглядит в коде:

<table>
  <caption>Пример таблицы с названием</caption>
  <tr>
    <td>Строка1 Ячейка1</td>
    <td>Строка1 Ячейка2</td>
    <td>Строка1 Ячейка3</td>
    <td>Строка1 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка2 Ячейка1</td>
    <td>Строка2 Ячейка2</td>
    <td>Строка2 Ячейка3</td>
    <td>Строка2 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
    <td>Строка3 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
    <td>Строка4 Ячейка4</td>
  </tr>
</table>

А вот, что у нас получится в итоге:

Пример таблицы с названием
Строка1 Ячейка1Строка1 Ячейка2Строка1 Ячейка3Строка1 Ячейка4
Строка2 Ячейка1Строка2 Ячейка2Строка2 Ячейка3Строка2 Ячейка4
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3Строка3 Ячейка4
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3Строка4 Ячейка4

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

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

Видео 1: HTML таблицы – тег table

Управление ячейками таблицы

И так друзья, теперь мы будем понемногу усложнять нашу таблицу. И повышать ваши умения и практику. HTML-таблица, которую мы сделали с вами выше очень проста. Однако, чаще всего, надо предоставить данные в более сложном формате:

  1. Вывести заголовочную строку
  2. Объединить некоторые ячейки по вертикали
  3. А другие объединить по горизонтали

Вот этим мы и займёмся. И начнем мы, пожалуй, с…

Ячейки-заголовки в таблице

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

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

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

Давайте в таблице из прошлого примера в первой строке заменим теги td на th . А также чуточку изменим их содержимое:

<table>
  <caption>Таблица с тегом th</caption>
  <tr>
    <th>Столбец 1</th>
    <th>Столбец 2</th>
    <th>Столбец 3</th>
    <th>Столбец 4</th>
  </tr>
  <tr>
    <td>Строка2 Ячейка1</td>
    <td>Строка2 Ячейка2</td>
    <td>Строка2 Ячейка3</td>
    <td>Строка2 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
    <td>Строка3 Ячейка4</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
    <td>Строка4 Ячейка4</td>
  </tr>
</table>

А вот и результат кода выше, выполненный в браузере:

Таблица с тегом th
Столбец 1Столбец 2Столбец 3Столбец 4
Строка2 Ячейка1Строка2 Ячейка2Строка2 Ячейка3Строка2 Ячейка4
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3Строка3 Ячейка4
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3Строка4 Ячейка4

Как видите, текст в этих ячейках автоматически делается жирным.

Объединение ячеек по горизонтали и вертикали

Ребята, прежде, чем начать объяснять, хочу оговориться – если информация по объединению ячеек будет для Вас слегка запутанной. А с непривычки это именно так, уж поверьте мне. Ниже есть видео, где я показываю и объясняю всё в живом режиме и на практике.

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

Для этого мы будем использовать 2 атрибута, которые задаются непосредственно самим ячейкам:

  1. Атрибут colspan – указывает сколько надо объединить ячеек по столбцам (горизонталь), начиная с текущей
  2. Атрибут rowspan – указывает сколько надо объединить ячеек по стокам (вертикаль) начиная с текущей

Эти атрибуты должны иметь целое число, начиная с 1 и более.

Помните! Если Вы объединяете ячейку с другими ячейками таблицы, она их замещает собой и растягивается. А это значит, что ячейки, которые замещены – надо удалить из HTML кода.

Это правило очень важно, так как если вы не удалите ячейки, которое были объединены, таблица будет отображаться в браузере некорректно.

Давайте попробуем в нашей таблице объединить 2 ячейки:

  1. Ячейку 1 в строке 2 объединим по столбцам (горизонталь) с ячейками 2 и 3 в той же строке. Для этого мы зададим ей атрибут rowspan=“3”
  2. Ячейку 4 в строке 2 объединим по строкам (вертикаль) с ячейками 4 в строках 3 и 4. Для этого мы зададим ей атрибут colspan=“3”

И теперь, для правильного отображения таблицы, нам необходимо удалить из кода ячейки, которые были добавлены при объединении. То есть для первого примера мы удаляем из кода ячейки 2 и 3 в строке 2. А для второго – удаляем ячейку 4 в строке 3 и ячейку 4 в строке 4.

В итоге у нас получится вот такой код:

<table>
  <caption>Объединение ячеек таблицы</caption>
  <tr>
    <th>Столбец 1</th>
    <th>Столбец 2</th>
    <th>Столбец 3</th>
    <th>Столбец 4</th>
  </tr>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td>Строка3 Ячейка1</td>
    <td>Строка3 Ячейка2</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка1</td>
    <td>Строка4 Ячейка2</td>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

А на деле, наша таблица будет выглядеть следующим образом:

Объединение ячеек таблицы
Столбец 1Столбец 2Столбец 3Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1Строка3 Ячейка2Строка3 Ячейка3
Строка4 Ячейка1Строка4 Ячейка2Строка4 Ячейка3

Как видите, всё отображается ровно и красиво, как и было задумано. Для закрепления материала, советую посмотреть практическое видео ниже.

Видео 2: HTML таблицы — ячейки и управление ими

Объединение ячеек сразу по 2-ум направлениям

Так же мы можем объединять ячейки не только по какой-либо одной стороне. Но и сразу по двум! Что мы сейчас и проделаем с нашей таблицей.

Давайте объединим ячейку 1 строки 3:

  1. С ячейкой 2 строки 3
  2. С ячейкой 1 строки 4
  3. С ячейкой 2 строки 4

Для этого мы пропишем ячейке 1 строки 3 следующие 2 атрибута:

  1. colspan=“2”
  2. rowspan=“2”

Помним, что объединённые ячейки замещаются, поэтому ячейки из списка выше, нам надо будет удалить из кода. В итоге вот такой код будет у нашей таблички:

<table>
  <caption>Объединение ячеек по 2-ум направлениям</caption>
  <tr>
    <th>Столбец 1</th>
    <th>Столбец 2</th>
    <th>Столбец 3</th>
    <th>Столбец 4</th>
  </tr>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

А вот так, будет выглядеть наша таблица сейчас:

Объединение ячеек по 2-ум направлениям
Столбец 1Столбец 2Столбец 3Столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Шапка, тело и подвал HTML таблицы.

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

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

Тег thead — шапка HTML таблицы

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

Фишки тега thead:

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

Теперь вернёмся к нашей таблице, и давайте первую строку завернём в этот тег:

<table>
  <caption>Тег thead в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

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

Тег tfoot – подвал HTML таблицы

Хоть это и подвальчик, но помните, что этот тег рекомендуется размещать сразу после тега thead .

Фишки тега tfoot:

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

Давайте мы заведём ещё одну строку в таблице, и завернём её с ячейками сразу в тег tfoot :

<table>
  <caption>Тег tfoot в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tr>
    <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
    <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
    <td>Строка3 Ячейка3</td>
  </tr>
  <tr>
    <td>Строка4 Ячейка3</td>
  </tr>
</table>

А вот и наша табличка:

Тег tfoot в таблице
Столбец 1Столбец 2Столбец 3Столбец 4
Подвал столбец 1Подвал столбец 2Подвал столбец 3Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Посмотрите внимательно, несмотря на то, что мы разместили тег tfoot в середине таблицы, его содержимое выводится в её конце!

Тег tbody – тело таблицы.

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

Вот такой код получится в итоге:

<table>
  <caption>Тег tbody в таблице</caption>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

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

И как обычно, для закрепления материала на практике, советую Вам глянуть видео №3.

Видео 3. HTML таблицы – шапка, тело и подвал

Кроме разбора на практике самих тегов, в этом видео, дополнительно, вы увидите, как оформить шапку, контент и подвал таблицы при помощи стилей.

Управление колонками в HTML таблицах

Осталось совсем немного ребята. Уже очень скоро таблицы полностью покоряться ваши рукам, головам, ногам или что там у вас ещё имеется в арсенале?

Мы рассмотрим ещё 2 тега, которые позволяют управлять колонками в таблицах.

Тег col

Этот тег позволяет задать определённые стили и атрибуты для определённой колонки. Задаётся он сразу после тега caption . И количество этих тегов может быть столько, сколько и колонок в таблице. То есть каждый последующий тег col отвечает за следующую колонку.

Что бы понять, как это всё работает, давайте первым двум колонкам — зададим ширину в 100 пикселей, третьей 150, а четвертой 200 пикселей. Для этого мы заведём 4 тега col , и каждому из них пропишем свой атрибут style с определённым значением ширины:

<table>
  <caption>Тег col в таблице</caption>
  <col>
  <col>
  <col>
  <col>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

В итоге наша таблица выглядит уже так (обратите внимание на ширину каждой колонки):

Тег col в таблице
Столбец 1Столбец 2Столбец 3Столбец 4
Подвал столбец 1Подвал столбец 2Подвал столбец 3Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Тег col можно сократить, если у него одинаковые параметры при помощи атрибута span . В нашем случае, у нас заданы одинаковые параметры для первой и второй колонки. Давайте сократим эти теги и допишем атрибут, вот такой код выйдет:

<table>
  <caption>Тег col в таблице</caption>
  <col span="2">
  <col>
  <col>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

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

Тег colgroup

Этот тег используется для объединения колонок по группам. Что бы понять, как он работает, давайте мы первые 3 колонки объединим в этот тег и зададим им какой-нибудь общий стиль. Например, сделаем заливку ячеек другим цветом.

Вот какой код ввёл я:

<table>
  <caption>Тег colgroup в таблице</caption>
  <colgroup>
    <col span="2">
    <col>
  </colgroup>
  <col>
  <thead>
    <tr>
      <th>Столбец 1</th>
      <th>Столбец 2</th>
      <th>Столбец 3</th>
      <th>Столбец 4</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Подвал столбец 1</td>
      <td>Подвал столбец 2</td>
      <td>Подвал столбец 3</td>
      <td>Подвал столбец 4</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td colspan="3">Строка2 Ячейка1 (соединена с ячейками 2 и 3)</td>
      <td rowspan="3">Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)</td>
    </tr>
    <tr>
      <td colspan="2" rowspan="2">Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)</td>
      <td>Строка3 Ячейка3</td>
    </tr>
    <tr>
      <td>Строка4 Ячейка3</td>
    </tr>
  </tbody>
</table>

В результате ячейки первых 3-ёх колонок окрасились в указанный нами цвет:

Тег colgroup в таблице
Столбец 1Столбец 2Столбец 3Столбец 4
Подвал столбец 1Подвал столбец 2Подвал столбец 3Подвал столбец 4
Строка2 Ячейка1 (соединена с ячейками 2 и 3)Строка2 Ячейка4 (соединена с ячейкой 4 в строках 3 и 4)
Строка3 Ячейка1 (соединена с ячейкой 2 строки 3 и ячейками 1 и 2 строки 4)Строка3 Ячейка3
Строка4 Ячейка3

Для закрепления материала рекомендую посмотреть последнее видео из этой серии под номером 4.

Видео 4. HTML таблицы – управление колонками

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

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

master-css.com

Как создать таблицу в HTML5 и указать её параметры через стили?

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
8.0+1.0+4.0+1.0+1.0+1.0+1.0+

Задача

Создать таблицу и указать её параметры (поля и расстояние между ячейками) через стили.

Решение

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

Пример 1. Создание таблицы

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег table</title>
 </head>
 <body>
  <table border="1">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Порядок расположения ячеек и их вид показан на рис. 1.

Рис. 1. Результат создания таблицы с четырьмя ячейками

Атрибут border тега <table> допустимо добавлять только с пустым значением (<table border>) или равным 1. Все остальные значения не проходят валидацию.

Для управления полями внутри ячеек используется стилевое свойство padding, которое добавляется к селектору td. Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table, браузер IE понимает его только с версии 8.0.

Пример 2. Поля внутри ячеек

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег table</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы */
    background: white; /* Цвет фона таблицы */
    color: white; /* Цвет текста */
    border-spacing: 1px; /* Расстояние между ячейками */
   }
   td, th {
    background: maroon; /* Цвет фона ячеек */
    padding: 5px; /* Поля вокруг текста */
   }
  </style>
 </head> 
 <body>
  <table>
   <tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
   <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr>
  </table>
 </body>
</html>

Таблица с полями и расстоянием между ячейками показана на рис. 2. Аналогичного результата можно добиться и с помощью рамки белого цвета вокруг ячеек.

Рис. 2. Поля в ячейках таблицы

htmlbook.ru

Таблица внутри таблицы в 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>

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

Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2

Теперь внутри ячейки 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>

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

Ячейка 1.1 Ячейка 1.2
Ячейка 1.1 Ячейка 1.2
Ячейка 2.1 Ячейка 2.2
Ячейка 2.2

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

daruse.ru

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *