Теги HTML — таблица с примерами

html таблицы - теги для создания html таблиц

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

Теги, создающие таблицу HTML:

<table> — открывает таблицу,

<tr> — открывает строку в таблице,

<td> — открывает ячейку таблицы,

</td> — закрывает ячейку таблицы,

</tr> — закрывает строку таблицы,

</table> — закрывает таблицу.

Рекомендую открыть редактор html и выполнить примеры, описанные в статье. Если вы еще пользуетесь стандартным блокнотом, рекомендую прочитать статью редактор notepad++. Пользуясь данным редактором, вы освоите html быстрее и будете делать гораздо меньше ошибок.

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

Результат

Ячейка 1

Добавим вторую ячейку

Результат:

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

Создадим таблицу из 9 ячеек, 3 строки и 3 столбца

Результат

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

Далее будем работать с этой таблицей.

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

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

Ячейки таблицы можно объединить по горизонтали и вертикали. Для этого используются атрибуты тега <td> colspan и rowspan соответственно. Кстати, кликнув на эти атрибуты вы попадете в таблицу html тегов с расшифровкой, таблица представляет определенную ценность для начинающих мастеров.

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

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

Результат

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

Обратите внимание на то, что в первой строке остается одна html ячейка, объединяющая в себе три.

Объединить ячейки html по вертикали

Объединим первую и четвертую ячейки.

Результат

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

Обратите внимание на то, что во второй строке уже нет четвертой ячейки, так как она объединена с первой.

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

Объединим 1,2,4 и 5 ячейки.

Результат

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

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

 

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

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