Всем привет. Сегодня я разберу не совсем обычный вопрос — как сделать таблицу в таблице в html-коде? Наверняка многим из вас интересен этот вопрос. Кажется, я уже не раз ранее писал о том, что в обычной ячейке таблицы может быть любой контент, в том числе и другая таблица.
Вообще если так посудить, то в ячейке может находиться таблица, в ячейках которой будут другие таблицы. Уровень вложенности и сложности разметки может быть абсолютно любым.
Как делать html вложенные таблицы?
В прошлой статье, где я показывал вам основные теги для построения табличных данных, мы создали простую табличку. Чтобы сделать внутри одной ячейки вложенную таблицу, достаточно всего лишь создать ее в нужной ячейке, можно даже скопировать ее полностью.
Присмотритесь внимательно к коду на скриншоте и вы увидите, что здесь предоставлен обычный табличный ряд, состоящий из двух клеток (ячеек). В одной из них только текст, а вторая содержит в себе полноценную таблицу с тремя рядами по две клетки в каждом. В итоге все это выглядит так:
Как управлять внешний видом вложенной таблицы?
Естественно, что вложенная таблица по своим параметрам едва ли будет копировать родительскую. Во-первых, она будет меньшего размера и в ней, вероятно, будут меньше отступы. Также вы можете сделать ее другого цвета, назначить другой шрифт и т.д. Для этого нужно использовать селектор td td, то есть обращаться к ячейкам, вложенным в другую ячейку. Информация об оформлении таблицы с помощью css вы можете найти здесь.
Но это уже дополнение, а на основной вопрос я вроде ответил. Все достаточно просто, если говорить о вложенных таблицах. Единственное, что такая вложенность порождает громоздкую разметку, в которой чрезвычайно трудно разбираться и ориентироваться, особенно новичку. В основном таблицы как раз и ругают за громоздкий код, который нужен для их создания.