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

Добавил пользователь Дмитрий К.
Обновлено: 05.10.2024

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

First Name	Last Name	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points	Points
Jill	Smith	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50	50
Eve	Jackson	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94	94
Adam	Johnson	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67	67

Чтобы создать адаптивную таблицу, добавьте элемент-контейнер overflow-x:auto вокруг :

Пример

Перейдите в наш Учебник CSS таблицы, чтобы узнать больше о том, как стиль таблиц.

На заре интернета таблицы были инструментом вёрстки страниц: с их помощью люди создавали многоколоночные сайты, сложные композиции, вложенные меню и многие другие полезные штуки. Ранний интернет (где-то до года 2005–2007-го) в буквальном смысле держался на таблицах.

Потом в CSS появились параметры для позиционирования элементов, и началась эра вёрстки на

Прочитайте нашу подборку о CSS Grid

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

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

За таблицы в вёрстке отвечает такой набор тегов:

Теперь разберём каждый тег отдельно:

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

Таким способом можно сделать таблицу любого размера — хоть 100 строк по 500 ячеек в каждой.

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

Настраиваем внешний вид

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

сделаем синие границы;
толщина границ — 2 пикселя;
расстояние между ячейками — 10 пикселей.

Также можно было бы указать, что это оформление для какой-то конкретной таблицы на странице (а не для всех, как сейчас). Тогда можно было бы сказать таблице class="kakoi-to" , а в стилях сказать table.kakoi-to <. >— и прописать в фигурных скобках все нужные параметры оформления.

Ещё можно можно настроить стили у каждой ячейки отдельно. Например, в первой строке у 2 и 3 ячейки сделать жёлтый фон:

Или можно было бы сказать , а в стилях прописать .highlighted — это имеет смысл делать, если у вас в таблице будет много выделенных ячеек или вы захотите потом обращаться к ним через JavaScript.

Чтобы сделать видимые границы у всех ячеек, добавим параметр border:

Сразу стали видны расстояния между ячейками, которые мы прописывали в стилях.

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

Заголовки в таблице

За заголовок в таблице отвечает отдельный тег :

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

Объединение ячеек

Если нужно, чтобы содержимое занимало сразу несколько ячеек, используют параметр colspan для горизонтальных ячеек и rowspan — для вертикальных. В качестве параметра для них просто указываем количество ячеек, которые нужно с ними объединить:

Что можно размещать в ячейках

Ячейки — это контейнеры для содержимого, куда можно класть всё:

текст,
картинки,
видео,
песни,
другие таблицы.

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

Чтобы этого не было, можно задать общую ширину таблицы:

И после этого указать, что картинка может занимать 100% доступной ширины ячейки, а не всего экрана:

Что дальше

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

Стей тюнед и всё такое.

А если хотите научиться верстать по-современному, почитайте вот этот цикл:

Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.

Необходимые знания:	Базовый HTML (Введение в HTML).
Цель:	Изучить более продвинутые возможности HTML таблиц и их доступность.

Добавление заголовка к таблице с помощью

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

Упражнение: Добавление заголовка

Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.

Откройте расписание занятий школьного учителя по языку в конце статьи HTML таблицы основы, или сделайте копию нашего timetable-fixed.html файла.
Добавьте подходящий заголовок к таблице.
Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.

Примечание: Этот пример можно найти на GitHub по ссылке timetable-caption.html (живой пример).

Добавление структуры с помощью , и

Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя (en-US) , и (en-US) , которые позволяют вам разметить header, footer и body секции таблицы.

Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.

Элементом нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете / (en-US) элемент, тогда заголовок должен находиться ниже его.
Элементом нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
Элементом необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).

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

Упражнение: Добавление структуры таблицы

Давайте используем эти новые элементы.

В первую очередь, сделайте копию spending-record.html и minimal-table.css в новой папке.
Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
Поместите очевидную строку заголовка внутрь элемента, строку "SUM" внутрь элемента и оставшийся контент внутрь элемента.
Сохраните, перезагрузите и вы увидите, что добавление элемента привело к тому, что строка "SUM" опустилась к нижней части таблицы.
Далее, добавьте атрибут colspan , чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в вашего HTML документа вы увидите пустой элемент . Внутри этого элемента добавьте следующие строки CSS кода:

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

Я хочу развернуть и свернуть строки таблицы при нажатии на столбцы заголовка. Я только хочу развернуть / свернуть строки, которые находятся под определенным заголовком (щелкнуто).

вот моя структура таблицы:

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

одна идея, которую я могу придумать, это использовать класс css в каждой строке, которая различает строки в под каждым заголовком и использовать JQuery, чтобы развернуть / свернуть эти строки только при нажатии на заголовок. Но если моя таблица имеет 10-15 заголовков, то, кажется, трудно отслеживать классы css.

пожалуйста, предложите подходящий способ для достижения этой цели.

вы можете попробовать этот способ:-

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

вы также можете использовать promise для переключения значка/текста span после завершения переключения в случае анимации тумблер.

.promise()

.slideToggle()

или просто с псевдо-элементом css для представления знака расширения / коллапса и просто переключите класс в заголовке.

CSS: -

JS: -

addClass() .
click() .
css() .
filter() .
find() .
hide() .
nextUntil() .

HTML тег

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

Синтаксис тега

Между открывающим тегом

и закрывающим тегом

находится тело таблицы. Тело состоит из строк и столбцов. Таблица заполняется построчно.

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

Приведем пример, html код:

Преобразуется на странице в следующее:

Обратите внимание на ячейку . Мы используем специальный атрибут colspan для объединения ячеек по горизонтали. Его численное значение указывает число объединяемых столбцов. Также существует аналог этого атрибута: тег (заголовок таблицы), где нужно также прописать colspan. Результат будет таким же. Но зачастую используют обычный td.

Атрибуты и свойства тега

1. Свойство align="параметр" - задает выравнивание таблицы. Может принимать следующие значения:

left - выравнивание по левому краю
center - выравнивание по центру
right - выравнивание по правому краю

В разобранном выше примере мы выравнивали таблицу по центру align="center" .

2. Свойство background="URL" - задает фоновой рисунок. Вместо URL должен быть написан адрес фонового изображения.

Преобразуется на странице в следующее:

В рассмотренном примере наше фоновое изображение находится в папке img (которая находится в той же директории, что и html-страница), а называется изображение fon.jpg . Обратите внимание на то, что в теге мы добавили style="color:white;" . Поскольку фон почти черный, то для того, чтобы текст не слился с фоном, мы сделали текст белым.

Более подробно про фон читайте в статье: как сделать фон для сайта

3. Свойство bgcolor="цвет" - задает цвет фона таблицы. В качестве цвета можно выбрать любой из всей палитры (см. коды и названия html цветов)

4. Свойство border="число" - задает толщину рамки таблицы. В предыдущих примерах мы указывали border="1" , что означает толщина рамки - 1 пиксель.

5. Свойство bordercolor="цвет" - задает цвет рамки. Если border="0" , то рамки не будет и цвет рамки не будет иметь смысла.

6. Свойство cellpadding="число" - отступ от рамки до содержимого ячейки в пикселях.

7. Свойство cellspacing="число" - расстояние между ячейками в пикселях.

8. Свойство cols="число" - число столбцов. Если его не задать, то браузер сам определит число столбцов. Разница лишь в том, что указание этого параметра, скорее всего, ускорит загрузку таблицы.

9. Свойство frame="параметр" - как отображать границы вокруг таблицы. Может принимать следующие значения:

void - не отрисовывать границы
border - граница вокруг таблицы
above - граница по верхнему краю таблицы
below - граница снизу таблицы
hsides - добавить только горизонтальные границы (сверху и снизу таблицы)
vsides - рисовать только вертикальные границы (слева и справа от таблицы)
rhs - граница только на правой стороне таблицы
lhs - граница только на левой стороне таблицы

10. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах.

11. Свойство rules="параметр" - где отображать границы между ячейками. Может принимать следующие значения:

all - линия рисуется вокруг каждой ячейки таблицы
groups - линия отображается между группами, которые образуются тегами , , , или
cols - линия отображается между колонками
none - все границы скрываются
rows - граница рисуется между строками таблицы, созданными через тег

12. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах.

13. Свойство class="имя_класса" - можно указать имя класса, которому принадлежит таблица.

14. Свойство style="стили" - стили можно задать индивидуально для каждой таблицы.

Атрибуты и свойства и

1. Свойство align="параметр" - задает выравнивание отдельной ячейки таблицы. Может принимать следующие значения:

left - выравнивание по левому краю
center - выравнивание по центру
right - выравнивание по правому краю

2. Свойство background="URL" - задает фоновое изображение ячейки. Вместо URL должен быть написан адрес фонового изображения.

3. Свойство bgcolor="цвет" - задает цвет фона ячейки.

4. Свойство bordercolor="цвет" - задает цвет рамки ячейки.

5. Свойство char="буква" - задает букву, от которой нужно сделать выравнивание. Значение атрибута align должно быть установлено как char.

6. Свойство colspan="число" - задает число объединяемых горизонтальных ячеек.

7. Свойство height="число" - задает высоту таблицы: либо в пикселях, либо в процентах %.

8. Свойство width="число" - задает ширину таблицы: либо в пикселях, либо в процентах %.

9. Свойство rowspan="число" - задает число объединяемых вертикальных ячеек.

10. Свойство valign="параметр" - выравнивание содержимого ячейки по вертикали.

top - выравнивание содержимого ячейки по верхнему краю строки
middle - выравнивание по середине
bottom - выравнивание по нижнему краю
baseline - выравнивание по базовой линии

Как сделать, чтобы границы ячеек в таблице не склеивались

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

Более подробно про это свойство читайте в специальной статье border-collapse CSS

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

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