HTML и CSS 0

Как сделать таблицу в таблице в html?

Всем привет. Сегодня я разберу не совсем обычный вопрос — как сделать таблицу в таблице в html-коде? Наверняка многим из вас интересен этот вопрос. Кажется, я уже не раз ранее писал о том, что в обычной ячейке таблицы может быть любой контент, в том числе и другая таблица.

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

Как делать html вложенные таблицы?

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

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

Как управлять внешний видом вложенной таблицы?

Естественно, что вложенная таблица по своим параметрам едва ли будет копировать родительскую. Во-первых, она будет меньшего размера и в ней, вероятно, будут меньше отступы. Также вы можете сделать ее другого цвета, назначить другой шрифт и т.д. Для этого нужно использовать селектор td td, то есть обращаться к ячейкам, вложенным в другую ячейку. Информация об оформлении таблицы с помощью css вы можете найти здесь.

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

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5