Как сделать красивую таблицу

Обновлено: 06.07.2024

Хотя Microsoft Excel, Google Sheets, Excel Online — это три лучших инструмента для создания таблиц, но в некоторых случаях вы можете использовать эти бесплатные онлайн-инструменты.

1. Tables Generator

Tables Generator позволяет создавать таблицы LaTeX, HTML, текстовые таблицы, таблицы markdown, таблицы MediaWiki и так далее. Вы можете создать таблицу с таким количеством столбцов и строк, сколько захотите.

2. Div Table

Div Table — это минимальный пользовательский интерфейс, возможность изменить тему, шрифт, фон и цвет текста, управлять рамками и так далее. Создает HTML-таблицу.

3. Rapid Tables

Rapid Tables — это еще один полезный инструмент, который вы можете использовать для создания HTML-таблиц.

4. Quackit

Quackit — простой генератор HTML таблиц. Есть возможность изменить цвет текста, цвет фона, цвет заголовка, ширину таблицы и многое другое.

5. Truben Table Editor

Редактор таблиц Truben Table Editor, вероятно, имеет самый простой пользовательский интерфейс с минимальными опциями. Недостатком является то, что у вас не будет возможности настроить таблицу.

6. Bootstrap Table Generator

Если у вас есть минимальные знания HTML, вам может пригодиться Bootstrap Table Generator.

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

Последние

СЧЕТЧИКИ

РЕКЛАМА И ДОНАТЫ

Социальные сети

Данный блог является личным дневником, содержащим частные мнения автора. В соответствии со статьей 29 Конституции РФ, каждый человек может иметь собственную точку зрения относительно его текстового, графического, аудио и видео наполнения, равно как и высказывать ее в любом формате. Блог не имеет лицензии Министерства культуры и массовых коммуникаций РФ и не является СМИ, а, следовательно, автор не гарантирует предоставления достоверной, не предвзятой и осмысленной информации. Сведения, содержащиеся в этом блоге не имеют никакого юридического смысла и не могут быть использованы в процессе судебного разбирательства. Автор блога не несёт ответственности за содержание комментариев к его записям.

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

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

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

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

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

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

Таблица начинается с тега

и заканчивается парным ему

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

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

Границы и рамки

Цвет фона и текста

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

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

Отступы таблицы в HTML

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

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

Выравнивание таблицы в HTML

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

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

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

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

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

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

Вставка изображения в HTML таблицу

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

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

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

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

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

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

Генераторы HTML таблиц

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

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

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

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

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

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

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

В предыдущих уроках мы говорили о Сетке в фотошопе и направляющих. Эти знания вам пригодятся, чтобы нарисовать таблицу в Photoshop.

Нарисовать таблицу можно при помощи разных программ — Power Point, Excel, Word и т.п. Но в случае, если таблица содержит в себе изображения, лучшим вариантом будет программа Adobe Photoshop. Огромное количество инструментов и функций этого графического редактора позволяют создавать таблицы, которые можно сделать различного размера,типа и цвета, не ограничивая фантазию рамками стандартов.

Создавать эскиз таблицы при помощи Направляющих и Сетки
Рисовать таблицу с помощью инструмента Линия
Добавлять в таблицу текст и изображения

Подготавливаем таблицу, расставляем направляющие

Переходим в меню Просмотр — Линейки (View — Rulers) и включаем Линейки.

Снова переходим в меню Просмотр для отображения Направляющих (Просмотр — Показать — Направляющие (View — Show — Guides)):

Переходим в меню Редактирование — Установки — Направляющие, сетка и фрагменты (Edit- Preferences — Guides, Grid & Slices) либо нажимаем сочетание клавиш Ctrl+K и Ctrl+8.

Я изменила настройки на следующие, поменяв только частоту расположения линий на 200 пикселей:

Чтобы изменить положение уже добавленной направляющей, активируйте инструмент Перемещение (Move Tool) клавишей V на клавиатеру и перетащите Направляющую.

Вот какой эскиз таблицы получился в итоге:

Рисуем таблицу в фотошопе

В верхней панели настроек инструмента изменяем цвет (1) и толщину линий (2), включаем или отключаем обводку (3):

Рисуем линии. Чтобы нарисовать ровную линию, зажмите клавишу Shift, сделайте клик левой клавишей мыши в начале линии, проведите линию к ее окончанию, отпустите клавишу мыши и Shift.

Добавляем в таблицу текст и картинки

Осталось только при помощи инструмента Текст (Type Tool) (можно активировать клавишей T)написать текст и вставить картинки.

Чтобы добавить картинки, перейдите в меню Файл — Поместить (File-Place) и поочередно выберите изображения с собаками.

Отключить направляющие и таблицу в фотошопе, чтобы они не мешали обзору таблицы.

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

Если вы нашли ошибку/опечатку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1. Отслеживание веса и параметров фигуры

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

2. Силовые тренировки

Эта таблица помогает контролировать тренировки с отягощениями — по два занятия в неделю (впрочем, вы можете подкорректировать её под себя). Тут можно отслеживать как ваш индивидуальный прогресс, так и улучшение показателей нескольких человек, если вы занимаетесь в группе.

3. Работа по дому

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

4. График дежурств

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

5. Список дел

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

6. Ежедневник

Если вышеуказанный список дел кажется слишком уж простеньким, вам подойдёт такой ежедневник. Его можно сохранить в Google Drive и просматривать запланированные задачи с любого устройства. Ну или при желании распечатать и заполнять от руки.

7. Бюджет путешествия

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

8. Маршрут путешествия

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

9. Календарь

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

10. Личный и семейный бюджет

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

11. Инвентарный список

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

12. Калькулятор сбережений

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

13. Планирование вечеринок

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

14. Сравнение автомобилей

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

15. Журнал техобслуживания

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

16. Журнал пробега

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

17. Список контактов

18. Диаграмма Ганта

Диаграмма Ганта — это популярный тип столбчатых диаграмм (гистограмм), который используется для иллюстрации плана или графика работ по какому-либо проекту. С помощью этого шаблона вы сможете составлять детальный план действий и отслеживать их выполнение.

19. Семейное древо

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

20. Коммунальные платежи

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

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

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

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

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

Создайте файл index.html
Откройте его в браузере
Добавьте туда следующий код:

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

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

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

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

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

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

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

Ячейка 1

Ячейка 2

Ячейка 3

Ячейка 4

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

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

Строка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. Вот как это выглядит в коде:

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

Пример таблицы с названием

Строка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-таблица, которую мы сделали с вами выше очень проста. Однако, чаще всего, надо предоставить данные в более сложном формате:

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

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

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

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

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

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

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

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

Таблица с тегом 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 атрибута, которые задаются непосредственно самим ячейкам:

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

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

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

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

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

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

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

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

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

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

Столбец 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:

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

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

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

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

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

Столбец 1	Столбец 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:

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

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

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

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

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

Фишки тега tfoot:

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

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

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

Тег 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 – тело таблицы.

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

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

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

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

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

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

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

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

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

Тег col

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

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

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

Тег 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 . В нашем случае, у нас заданы одинаковые параметры для первой и второй колонки. Давайте сократим эти теги и допишем атрибут, вот такой код выйдет:

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

Тег colgroup

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

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

В результате ячейки первых 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 таблиц – задавайте их в комментариях.

Читайте также: