StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
09.11.2015
14:07
62494
18
Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML. А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:
…но это уже в прошлом, так как на сегодняшний день есть более эффективные способы создания каркасов для сайта с помощью CSS. Я частенько использую таблицу на своем блоге или на сайте, вот например, как в этой статье.
Я думаю, вы разобрались, для чего нужно учиться создавать таблицу.
Из каких основных тегов состоит таблица?
○ тег TABLE
Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.
<table></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 |
<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="300" height="200">
- Width – ширина таблицы
- Height – высота таблицы
Пример:
<table border="1" width="300" height="200"> <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" width="100%" height="200"> <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>
Результат:
| Название 1 | Название 2 |
|---|---|
| 1 | 2 |
Вот и закончили с таблицами. Вы теперь сможете самостоятельно создать таблицу любой сложности. Закрепите данный урок. Попробуйте самостоятельно создать любую таблицу.
Жду вас в следующем уроке. Подписывайтесь на обновления моего блога.
Случайные записи:
- Работа с файлами-2 (удаление, копирование, переименование и перемещение файлов). Основы PHP с нуля. Урок №20
- Вывод переменной и строки в php на экран. Основы PHP с нуля. Урок №6
- Позиционирование блоков CSS. Основы CSS для начинающих. Урок №14
- Коды цвета в CSS - / R G B / HTML. Основы CSS для начинающих. Урок №7
- Уведомления для веб-страниц. Основы bootstrap 3 для начинающих. Урок №16
Здравствуйте подскажите как можно сделать в таблице Слова ссылками пример обычная таблица с двумя столбцами как там все слова сделать с ссылками ровно красиво. Вот такой тег явно топорный.
Ответить
17 января, 2017 at 10:26
Здравствуйте, Антон! Не совсем Вас понял!
Попробуйте еще раз все объяснит по порядку.
Ответить
17 января, 2017 at 11:01
Вот к примеру таблица как у вас дав ряда и четыре ячейки в каждой из ячейки четыре разных слова. При нажатие на слова чтоб открывалась другая страница сайта. Меня не волнует сома таблица мне надо сделать столбец из двух строк к примеру Маша Рома, при нажатие на Машу или Рому открывалась другая страница сайта.
17 января, 2017 at 13:17
Здесь вы найдете ответ "Основы HTML"!
Посмотрите урок "Как вставить ссылку в HTML." и "Создание простого мини сайта."
Проходил ваш тест - №8 Чтобы создать столбик в таблице HTML, используют тег. Дал ответ , поидее в вопросе заведомо ошибка присутствует.
Серьёзно, столбик ? Столбик КРАЛ!
Ответить
3 февраля, 2017 at 20:02
нет ошибки, там все верно!
Столбик, тег:
В чем ошибка?
Ответить
С таблицей всю нормальна,вы знаете как делать таблицу для быстрых ссылок Яндекса.
Ответить
12 февраля, 2017 at 13:08
Именно таблицу для быстрых ссылок Яндекса? Впервые слышу.
Для чего это нужно? Вы про сниппеты?
Ответить
Да я имел виду сниппеты..,подскажите как правильно сделать.
Ответить
17 февраля, 2017 at 19:57
Антон, с большим уважением отношусь к Вам, но давайте писать комментарий по теме! Не нужно захламлять страницу!
Ответить
Вопрос:я сделал две таблицы и мне нужно поставить их в один ряд.
С помощью атрибута align,который я применил к первой таблице, у меня это вышло. НО обе таблицы стоят так близко друг к другу,что кажется,что это одна таблица
Помогите
Ответить
22 апреля, 2017 at 17:22
Я сам решил свою предыдущую проблему,но возникла на её месте другая:как менять расстояние между таблицами?
для того,чтобы вы дали мне наиболее точный и полезный ответ,вот программа
Родословная моей семьи
Костин Н.А.
1883-1936
Костина А.А.
18..-1953
Ответить
24 апреля, 2017 at 14:13
В CSS пропишите:
table { display:inline; margin-right:10px; }В строке №10 меняйте параметры и расстояние между таблицами будет меняться.
24 апреля, 2017 at 14:05
Нужно через CSS:
table { display:inline; margin-right:10px; }Ответить
Не моё собачье дело, но использование тега center, атрибутов align и valign, как то не кошерно на сегодня.
Ответить
17 июня, 2017 at 22:59
а что кошерно?
Ответить
Здравствуйте!
По поводу создания таблицы вопросов нет. Все предельно ясно и хорошо объяснили. Но есть другой вопрос, как создать таблицу, в которой можно вводить определенные значения с клавиатуры и потом сохранять их? Это делается как то при помощи form или css?
Ответить
2 апреля, 2018 at 22:59
Здравствуйте, Андрей!
Тут уже нужен не формы HTML + PHP
Ответить