Как в HTML сделать таблицу? Урок — 9 (для начинающих)
Если использовать HTML без CSS, то таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д.
Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы:
Итак, как в HTML сделать простую таблицу?
Для постройки таблицы необходимо использовать три тега:
TABLE – этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример.
Закрывающий тег </table> обязателен.
Таблица состоит из ряда
| ряд 1 | ряд 1 |
| ряд 2 | ряд 2 |
| ряд 3 | ряд 3 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
TR – создает новый ряд таблицы. Закрывающий тег </tr> обязателен.
TD – создает новую ячейку в ряду. Закрывающий тег </td> обязателен.
Давайте рассмотрим пример, чтобы лучше понять все выше сказанное:
| ряд 1 ячейка1 | ряд1 ячейка2 |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
| ряд 3 ячейка 1 | ряд 3 ячейка 2 |
Давайте все объясню.
Перед каждым созданием новой таблицы открывается тег <table> .
Дальше, размещаем в середине контейнера <table> тег <tr> , что говорит о начале нового ряда.
В этом ряду вставляем две ячейки с содержанием при помощи тега
<td> ряд 1 ячейка1 </td> <td> ряд1 ячейка2 </td>
Закрываем ряд тегом </tr> .
Открываем другой ряд тегом <tr> и вставляем в него снова две ячейки.
Закрываем ряд тегом </tr> .
Открываем третий ряд тегом <tr> и вставляем в него снова две ячейки.
Закрываем ряд тегом </tr> .
Закрываем таблицу тегом </table> .
Я думаю, разобрались? Если кто-то забыл, что такое атрибут border , который я использую вместе с тегом <table> , напоминаю, что это толщина рамки. Если в border будет установлено значение «0» , тогда границы таблицы будут невидимые.
Посмотрите парочку примеров созданных таблиц и можно идти дальше:
| ряд 1 ячейка 1 |
| ряд 2 ячейка 1 |
| ряд 1 ячейка 1 | ряд 1 ячейка 2 | ряд 1 ячейка 3 |
Для того чтобы вставить картинку в таблицу, нужно владеть элементарными начальными знаниями о том, как вставляется изображение в HTML файл. Об этом я рассказываю в этой статье. Теперь, когда вы знаете основные нюансы об изображении в HTML, можно попробовать вставить картинку в таблицу. Это можно сделать следующим образом:
в строку между тегами <td> </td> вставить изображение.
| ряд 1 ячейка 1 | ряд 1 ячейка 2 |
А как объединить ячейки в таблице?
Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
COLSPAN – определяет количество столбцов.
По умолчанию значение 1.
ROWSPAN – определяет количество рядов.
По умолчанию значение 1.
Для лучшего понимания посмотрите пример:
объединяем ячейки в верхнем ряду с помощью атрибута colspan :
| ряд 1 ячейка 1+2 | |
| ряд 2 ячейка 1 | ряд 2 ячейка 2 |
Теперь соединим ряды в ячейки с помощью атрибута rowspan :
| Ячейка 1, ряд 1+2 | ряд1 ячейка2 |
| ряд 2 ячейка 2 |
Как установить размер таблицы?
Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:
WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.
Выравнивание содержимого в таблице
Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:
ALIGN – горизонтальное выравнивание содержимого в таблице.
К атрибуту ALIGN присваивается значения: left (по умолчанию), center , right .
left — прижать содержимое к левой части;
center – установить по центру;
right — прижать содержимое к правой части
VALIGN – вертикальное выравнивание содержимого в таблице.
К атрибуту VALIGN присваивается значения: top , bottom , middle .
top – прижать содержимое к верху;
bottom – прижать содержимое к низу;
middle – установить содержимое посередине
Как сделать фон таблицы?
Можно также задать фон таблице для всех ее ячеек вместе взятых, а также для каждой ячейки по отдельности. Можно задать фон цветом, а можно и картинкой. Для фона существуют два атрибута:
BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
BACKGROUND –фон в таблице заполняется рисунком.
Внимание: если вы ходите задать фон цветом или фоновым рисунком всей таблице, атрибуты нужно установить в теге <table> . А если только к определенной ячейке, тогда в тег <td> .
Для лучшего понимания посмотрите пример:
Внимание: если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки.
И напоследок расскажу еще о двух полезных атрибутах.
В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты:
CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом.
Как добавить картинку в таблицу html
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:
…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с помощью CSS. Я частенько использую таблицу на своем блоге или на сайте, вот например, как в этой статье.
Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.
Из каких основных тегов состоит таблица?
○ тег TABLE
Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.
○ тег TR
Внутри контейнера <table>……</table> размещаются ряды:
| ряд 1 | ряд 1 |
Ряды создаются с помощью тега <tr></tr> . Именно с помощью этого тега и определяется количество рядов.
Закрывающий тег обязателен.
○ тег TD
Внутри контейнеров <table><tr>……</tr></table> размещаются столбики (ячейки):
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
| ячейка 1 | ячейка 2 |
Столбики создаются с помощью тега <td></td> .
Закрывающий тег обязателен.
Внимание: без использования всех этих тегов таблицу создать не возможно.
Теперь попробуем воспользоваться теорией и создадим таблицу на практике.
Задание: создать таблицу из одного ряда, где будет три столбика.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
Задание: создать таблицу из трех рядов и трех столбиков.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
| ряд -2 /столбик 1 | столбик 2 | столбик 3 |
| ряд -3 /столбик 1 | столбик 2 | столбик 3 |
До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.
Теперь рассмотрим атрибуты для таблицы.
*Атрибуты
○ Границы таблицы в HTML
Чтобы была видна таблица, к тегу <table> применяется атрибут « border » .
Если значение атрибута «border» «0» , границы видно не будет, если не прописать к тегу <table> атрибут «border» , граница в таблице тоже видна не будет.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 |
○ Как объединить ячейки в таблице
Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу <td> .
- colspan — объединение ячеек по горизонтали;
- rowspan — объединение ячеек по вертикали.
В значениях указываете, сколько нужно объединить ячеек.
| ряд 1 столбик 1 | |
| ряд 2 столбик 1 | ряд 2 столбик 2 |
| ряд 1 столбик 1 | ряд 1 столбик 2 |
| ряд 2 столбик 1 |
Более сложный пример:
| ряд -1 /столбик 1 | столбик 2 | столбик 3 | ||
| ряд -2 /столбик 1 | столбик 2 | столбик 3 | столбик 4 | |
○ Как увеличить расстояние между ячейками таблицы
Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу <table>
В значениях у атрибута «cellpadding» указываете расстояние отступа
| ряд 1 столбик 1 | столбик 2 |
Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу <table>
В значениях у атрибута «cellspacing» указываете расстояние между ячейками
| ряд 1 столбик 1 | столбик 2 |
○ Как сделать фон таблицы HTML
Чтобы сделать фон таблицы HTML используют к тегу <table> и <td> такие атрибуты:
- BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
- BACKGROUND –фон в таблице заполняется рисунком.
| ряд -1 /столбик 1 | столбик 2 | столбик 3 | ||
| ряд -2 /столбик 1 | столбик 2 | столбик 3 | столбик 4 | |
○ Как вставить картинку в таблицу HTML
Чтобы вставить картинку в таблицу HTML, между тегом <td> вставляться тег <img> .
| ряд 1 ячейка 1 | ячейка 2 |
○ Ширина и высота таблицы HTML
Чтобы вставить ширину и высоту в таблицы HTML, используют к тегу <table> атрибут «width» и «height» :
- Width – ширина таблицы
- Height – высота таблицы
| ряд 1 ячейка 1 | ячейка 2 |
| ряд 2 ячейка 1 | ячейка 2 |
Значения задаются в пикселях (px) или в процентах (%)
○ Выравнивание содержимого в таблице HTML
Чтобы выровнять содержимое в таблице HTML, используют к тегу <td> атрибут «align» и «valign» :
ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:
- left— прижать содержимое к левой части (по умолчанию);
- center– установить по центру;
- right— прижать содержимое к правой части
VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:
- top– прижать содержимое к верху;
- bottom– прижать содержимое к низу;
- middle– установить содержимое посередине
| ячейка по умолчанию | содержимое выравниваем горизонтально по правому краю, вертикально — прижимаем к низу |
| содержимое выравниваем горизонтально по левому краю, вертикально — прижимаем к верху | содержимое выравниваем горизонтально по центру, вертикально — прижимаем посредине |
○ Как выровнять таблице HTML по центру
Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом <center></center> :
Дополнительные и основные теги к таблице
| Тег | Описание |
| <table> | Родительский тег таблиц (основной) |
| <thead> | Тег строк заголовка таблицы (дополнительный) |
| <tr> | ряд таблицы (основной) |
| <td> | Ячейка (столбик) таблицы (основной) |
| <th> | Ячейка заголовка таблицы Должен использоваться внутри тега <thead> (дополнительный) |
| <caption> | Описание или краткое содержание таблицы (дополнительный) |
| Название 1 | Название 2 |
|---|---|
| 1 | 2 |
Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.