Как открыть таблицу html

Содержание
  1. 1.7. Таблицы HTML
  2. Создание таблиц в HTML
  3. 1. Как создать таблицу
  4. 2. Как создавать строки таблицы(строки)
  5. 3. Как создать ячейку заголовка столбца таблицы
  6. 4. Как создать основную ячейку таблицы
  7. 5. Как добавить заголовок (название) к таблице
  8. 6. Группировка строк и столбцов таблицы
  9. 7. Группировка разделов таблицы
  10. 8. Как объединить ячейки таблицы
  11. Таблицы
  12. Кратко
  13. Пример
  14. Структурные теги
  15. Логическая группировка Теги
  16. Атрибуты
  17. Советы
  18. На практике
  19. Алена Батицкая
  20. Организация данных с помощью таблиц
  21. Создать таблицу
  22. Строки таблицы
  23. Данные таблицы
  24. Предварительный просмотр таблицы
  25. Заголовок таблицы
  26. Отображать заголовки таблиц
  27. атрибут заголовков
  28. Структура таблицы
  29. Отображение заголовка таблицы
  30. Пример элемента групповой таблицы
  31. Объединить несколько ячеек
  32. Пример объединения ячеек
  33. Границы таблицы
  34. свойство border-collapse
  35. демонстрация границы-спейсинга
  36. Добавление границы для строк
  37. Пример добавления границ к строкам таблицы
  38. Вставка в таблицу
  39. Пример чередования строк в таблице
  40. Выравнивание текста
  41. Пример выравнивания текста в таблице
  42. Таблица с полным стилем
  43. Образец стиля таблицы
  44. На практике
  45. с именем докладчика и заголовком сообщения.
  46. в таблице, поэтому имя докладчика будет ближе к заголовку. Мы можем реализовать эти стили, используя следующий код:
  47. Демонстрация и исходный код
  48. Продолжить

1.7. Таблицы HTML

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

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

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

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

Создание таблиц в HTML

1. Как создать таблицу

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

Например, вы можете использовать эту разметку для создания таблицы, состоящей из z двух столбцы и две строки :

текст заголовка текст заголовка
данные data

Рисунок 1. Внешний вид таблицы без форматирования css-свойствами

По умолчанию таблицы и ячейки не имеют видимых границ. Границы задаются свойством границы:

Пробелы между ячейками в таблице удаляются с помощью свойства таблицы .

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

Если для таблиц установлены отступы и границы, ширина таблицы будет включать следующие значения: padding-left и padding-right , ширина левого поля плюс ширина правого поля последней ячейки в строке.

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

2. Как создавать строки таблицы(строки)

Строки или строки таблицы создаются с помощью элемента

. Количество горизонтальных строк в таблице определяется количеством элементов.

3. Как создать ячейку заголовка столбца таблицы

Элемент

создает заголовок столбца: специальную ячейку, текст которой выделен жирным шрифтом. Количество ячеек заголовка определяется количеством элементов. Атрибуты colspan, rowspan, заголовки. Для элемента доступны

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

Элемент

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

Количество пар ячеек

должно равняться количеству пар ячеек . Для элемента доступны атрибуты Colspan, rowspan, headers.

5. Как добавить заголовок (название) к таблице

Элемент создает заголовок таблицы. Добавляется сразу после тега

, без соединений или ячеек.

6. Группировка строк и столбцов таблицы

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

Добавляется непосредственно после

и/или тегов.

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

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

Рис. 2. Выделите столбцы таблицы другим цветом с помощью элементов a

7. Группировка разделов таблицы

Элемент

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

Элемент

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

, после и перед элементами и . Его можно использовать один раз в пределах одной таблицы.

Элемент

группирует основное содержимое таблицы. Используется в сочетании с и .

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

, перед элементами и .

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

в виде строк данных или, в лучшем случае, просто помещают соответствующие строки в начало и конец таблицы.

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

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

Рис. 3. Пример объединения ячеек таблицы по горизонтали с помощью colspan

Источник

Таблицы

Время чтения: 15 мин

Обновлено 5. Июнь 2022 г.

Кратко

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

В HTML есть набор смысловых тегов для создания таблиц:

Пример

Создадим таблицу с первыми тремя местами в топ-250 фильмов:

Структурные теги

Давайте вместе создадим таблицу и попутно разберемся с необходимыми тегами и атрибутами.

Наиболее важным тегом для создания таблицы является

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

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

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

. Сколько рядов необходимо; именно столько раз вы должны написать внутри .

Теперь добавим в таблицу три строки:

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

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

. Напишите столько в , сколько вам нужно в ячейках таблицы.

Ячейки образуют столбцы. В HTML нет специального тега для столбцов.

Теоретически ячейки могут существовать без тега

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

«td» означает «табличные данные» и переводится как «табличные данные».

Теперь в нашей таблице 3 строки. В каждой строке по две ячейки. Эти ячейки образуют два столбца.

Смысл данных в этой таблице в основном ясен. Но лучше добавить имена столбцов, чтобы избежать недоразумений.

В принципе, мы можем использовать знакомые

и :

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

Для заголовков ячеек или строк есть специальный тег

. Давайте заключим заголовок в эту пару тегов:

К ячейкам, заключенным в тег

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

«th» означает «заголовок таблицы» и переводится как «заголовок таблицы».

Логическая группировка Теги

Также есть

, и теги. Похоже, у нас уже есть отличный стол. Зачем все усложнять?

Во-первых, красиво 😄

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

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

Тег

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

семантически подобен тегу, только его «влияние» влияет на таблицу.

Наличие этих знаков на этикетке также уместно с точки зрения стиля. Вы можете использовать селекторы thead , tbody или table для одновременного оформления всего блока: not ( tbody ) (почему бы и нет? 😏)

Добавить

:

в нашу таблицу

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

s, чтобы разделить данные на отдельные блоки.

Этот тег семантически похож на , но внутри таблицы.

Давайте объединим все айфоны в один

и добавим пару андроидов, чтобы показать, что их может быть больше более одного блока данных:

Тег требуется для строки «Всего»: определенная строка с общим количеством данных таблицы. В таблице может быть только один блок.

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

Если по какой-то причине вы в них не использовали

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

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

Добавим в нашу таблицу строку со средней ценой всех телефонов :

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

Если вы не используете ни один из этих тегов, браузер автоматически добавит

при отображении таблицы.

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

Например, «Флагманские цены на iPhone и Xiaomi» идеально вписались бы в нашу таблицу. Добавим это в разметку (некоторые данные для краткости опущены):

Атрибуты

В дополнение к глобальным атрибутам, атрибуты colspan и rowspan могут быть очень полезны при работе с таблицами. . Оба атрибута предназначены для объединения ячеек. colspan это для соединения ячеек из 2 или более столбцов, а rowspan — для соединения ячеек из 2 или более строк.

Давайте разделим описание телефона на производителя и модель. Производитель будет повторяться, объединим ячейки с его названием во всех строках. Давайте добавим заголовок «Производитель» и в первые

каждого название модели и используем атрибут rowspan. Эти ячейки теперь занимают 3 и 2 ряды.

Но теперь количество ячеек в последней строке не соответствует общему количеству столбцов в таблице. Разверните первую ячейку на два столбца:

Советы

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

Границы не могут быть установлены для элементов

, и , поэтому установите их для тегов ,
или .

<27

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

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

💡 Ширина таблицы по умолчанию устанавливается на содержимое внутри, если вы не зададите другие свойства CSS.

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

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

На практике

Алена Батицкая

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

Сделаем, например, каждый второй ряд с коричневым фоном. Все, что вам нужно, это одно правило CSS с псевдоклассом nth — child() :

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

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

Это довольно легко сделать с position : sticky . Обратите внимание, что вы не можете использовать это свойство для тегов

или , поэтому используйте его для тегов .

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

Устанавливаем фон заголовка, чтобы текст в ячейках не был виден при прокрутке. А чтобы избавиться от линий между ячейками, установите border для всей таблицы: Collar: Collar:

Хотя поддержка в целом хорошая, такое размещение в таблицах будет работать не во всех браузерах. Дополнительные сведения см. в разделе Могу ли я использовать.

Источник

Организация данных с помощью таблиц

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

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

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

Создание табличных данных остается сложной задачей. То, как таблица должна быть создана в HTML, во многом зависит от данных и от того, как они будут отображаться. Когда таблицы затем размечаются в HTML, они должны быть оформлены с использованием стилей CSS, чтобы сделать информацию более четкой и понятной для пользователя.

Создать таблицу

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

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

Мы будем использовать элемент

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

Строки таблицы

После того, как таблица определена в HTML, строки таблицы могут быть добавлены с помощью элемента

. Таблица может содержать несколько строк или элементов . В зависимости от объема отображаемой информации количество строк в таблице может быть значительным.

Данные таблицы

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

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

Предварительный просмотр таблицы

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

Чтобы назначить заголовок столбцу или строке ячеек, используйте элемент

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

Разница между этими двумя элементами аналогична разнице между заголовками (элементы

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

Заголовки таблиц можно использовать для столбцов и строк; данные в таблице определяют, где имена подходят. Атрибут scope помогает точно определить, какой контент связан с заголовком. Атрибут диапазона со значениями col, row, colgroup и rowgroup в элементе

применяется к строке или столбцу. Наиболее часто используемые значения — col и row. Смысловой столбец указывает, что каждая ячейка в столбце напрямую связана с заголовком таблицы, а строка указывает, что каждая ячейка в строке напрямую связана с заголовком таблицы.

Использование элемента

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

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

Отображать заголовки таблиц

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

атрибут заголовков

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

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

Структура таблицы

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

, и .

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

и по умолчанию отображаться вверху таблицы.

Отображение заголовка таблицы

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

(заголовок таблицы), (основная часть таблицы) и (нижний колонтитул таблицы) помогают организовать таблицы структурно.

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

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

После

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

Пример элемента групповой таблицы

Объединить несколько ячеек

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

или .

Атрибут colspan используется для получения одной ячейки из нескольких столбцов таблицы, а атрибут rowspan используется для получения одной ячейки из нескольких строк. Каждый атрибут имеет целочисленное значение, указывающее количество ячеек, которые он охватывает, где 1 — значение по умолчанию.

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

Пример объединения ячеек

Границы таблицы

Эффективное использование границ может помочь сделать таблицу более читабельной. Границы вокруг таблицы или отдельных ячеек могут иметь большое значение, когда пользователь пытается интерпретировать данные и быстро просмотреть информацию. При разработке границ с помощью CSS могут быстро пригодиться два свойства: border-collapse и border-spacing.

свойство border-collapse

Таблицы состоят из родительского элемента

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

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

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

демонстрация границы-спейсинга

Свойство границы-спейсинга работает только в том случае, если для свойства границы-коллапс установлено значение разделены, что является значением по умолчанию. Если свойство border-collapse ранее не было указано, мы можем безопасно использовать свойство border-spacing.

Кроме того, свойство border-spacing может принимать два значения размера: первое значение для горизонтального зазора и второй для вертикального пространства. Например, если ввести значение border-spacing: 5px 10px, расстояние между границами по горизонтали будет равно 5 пикселям, а по вертикали – 10 пикселям.

Добавление границы для строк

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

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

Начните с настройки свойства border-collapse таблицы на свертывание, затем добавьте нижнюю границу к каждой ячейке таблицы, будь то элемент

или . При желании мы можем удалить нижнюю границу ячеек в последней строке таблицы, используя псевдокласс :last-child для выбора последнего элемента в таблице и нацеливания на элементы в строке. Также, если в таблице используются структурные элементы, нам нужно убедиться, что последняя строка таблицы находится в элементе.

Пример добавления границ к строкам таблицы

Вставка в таблицу

Среди попыток сделать таблицы видимыми, обычной практикой проектирования является «переплетение» строк таблицы с разными цветами фона. Это делает линии более четкими и обеспечивает видимость при сканировании информации. Один из способов сделать это — поместить класс для каждого элемента

вместо одного и установить цвет фона для этого класса. Другой более простой способ — использовать псевдокласс :nth-child с нечетным или четным параметром для выбора каждого элемента один за другим.

Вот наша таблица book, в которой используется псевдокласс :nth-child с параметром even для выбора всех четных строк в таблице и использования серого фона. Следовательно, каждая строка будет больше одного в теле таблицы серый цвет.

Пример чередования строк в таблице

В этом коде есть нюансы, на которые стоит обратить внимание. Во-первых, у элемента

для свойства border-collapse явно задано значение, а для свойства border-spacing установлено значение 0. Это связано с тем, что элементы
содержат границы, а элементы — нет. Без отдельного свойства border-collapse границы элементов сделают тело и нижний колонтитул таблицы шире, чем заголовок.

Поскольку свойство border-collapse настроено на свертывание, нам нужно быть осторожными с тем, как границы применяются к элементам

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

Наконец, все элементы

получают синий фон, а каждый отдельный элемент получает серый фон через псевдокласс: nth ребенок.

Выравнивание текста

Помимо границ и полос, важную роль при создании таблицы играет выравнивание текста в ячейках. Заголовки, описания и тому подобное, как правило, выравниваются по левому краю, а числа и другие числа выравниваются по правому краю. Правильно. Другая информация, в зависимости от контекста, может располагаться по центру. Мы можем прокручивать текст по горизонтали, используя свойство text-align в CSS, как обсуждалось в Уроке 6 «Работа с типографикой».

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

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

Исправив HTML и CSS и включив свойства text-align и vertical-align, мы можем очистить наш оформление книжного стола. Обратите внимание, что табличные данные станут намного нагляднее и удобнее.

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

Таблица с полным стилем

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

Образец стиля таблицы

На практике

Теперь, когда мы знаем, как создавать и оформлять table мы закончим последнюю оставшуюся страницу нашего сайта Style Conference, расписание.

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

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

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

Сначала давайте опишем структуру первой таблицы, включая

, и .

Прямо сейчас, несмотря на то, что наша первая таблица не содержит никаких данных, к ней применены некоторые стили. В частности, сброс, который мы добавили в Уроке 1, устанавливает для свойства border-collapse и между границами свернутых таблиц значение 0. Нам нужны эти стили, так что давайте оставим их в покое. Однако мы собираемся создать новый раздел в нашем файле main.css, чтобы добавить дополнительные стили.

В нашем новом разделе стилей специально для страницы «Расписание» (которая отображается сразу под стилями страницы докладчика) установите элементы

должны иметь ширину 100% и нижнюю границу 44 пикселя.

Затем используйте псевдокласс :last-child, чтобы определить последний элемент

в разделе и установить его нижнюю границу на 0 пикселей. Это предотвращает конфликт этой таблицы с нижним отступом, принадлежащим элементу с классом row.

Новый раздел в нашем файле main.css пока выглядит следующим образом:

Теперь давайте добавим некоторые данные в нашу таблицу. Начнем с первого дня конференции, с воркшопа 24 августа.

Добавьте элемент

к элементу таблицы. Первой ячейкой в ​​строке будет элемент , указывающий середину дня: «Семинары» на этот день. Поскольку элемент является заголовком строки, мы также добавляем к нему атрибут области со значением row.

За элементом

следует элемент с датой «24. Август», в таком случае. Теперь у нас часто будет три столбца, первый из которых служит заголовком таблицы, задает время, а вторые два столбца — это обычные ячейки таблицы, которые отмечены спикерами в данный момент. Поскольку нам не нужны два отдельных динамика в этой строке, мы хотим добавить атрибут colspan со значением 2 к элементу , объединяя два столбца.

Код нашей таблицы теперь выглядит так:

Внутри элемента

заполните ежедневные события. Начнем с добавления элемента с элементами и прямо на строку.

Для всех следующих элементов

мы добавляем атрибут области со строкой значения, чтобы семантически идентифицировать этот элемент как заголовок строки. Затем добавьте к элементу элемент, отображающий время первого события: в данном случае 8:30. Мы также включаем атрибут datetime с элементом со значением времени в часах, минутах и ​​секундах — 08:30:00.

В элемент

, который следует за элементом , введите название мероприятия (поскольку выступающих в это время нет) — в данном случае «Регистрация». . Поскольку на данный момент есть только одно событие, мы также включаем атрибут colspan со значением 2 в элемент .

В общем, код для нашей первой таблицы выглядит так:

Для второй строки внутри элемента

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

После

добавьте два элемента , чтобы два говорящих говорили одновременно. Непосредственно внутри каждого элемента мы добавляем элемент, который ссылается на расположение спикера на странице спикера. Помните, что мы добавляем атрибуты id с именем каждого выступающего в родительский элемент? С этим значением атрибута id, которому предшествует имя файла Speaker.html и знак решетки #, мы можем напрямую связать описание спикера с его биографией на странице спикера.

с именем докладчика и заголовком сообщения.

Код для первых двух семинаров выглядит следующим образом:

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

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

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

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

и

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

, как и раньше.

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

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

и . Добавьте для них нижний отступ в 22 пикселя и вертикальное выравнивание по верхнему краю. В частности, для элемента добавьте отступ справа 45 пикселей, выравнивание текста по правому краю и ширину 20%. Затем для элементов добавьте ширину 40%.

При существующей программе и стилях таблиц код должен выглядеть так:

Далее мы добавим стиль в заголовок таблицы. и содержащиеся в нем элементы. Мы установим высоту строки 44 пикселя только для элемента

, цвет #648880 и размер шрифта 24 пикселя для всех элементов , вложенных в элемент . Наши новые стили включают следующее:

Заголовок таблицы выглядит хорошо, так что давайте добавим стиль к телу таблицы. Начнем с элементов

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

Мы также добавим некоторые стили к элементам

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

Мы добавляем все эти горизонтальные отступы, используя псевдоклассы :first-of-type, :last-of-type и :only-of-type. Эти псевдоклассы работают аналогично псевдоклассу :last-child, который мы использовали ранее.

Псевдокласс :first-of-type выбирает первый элемент этого типа в родительском элементе. В нашем случае селектор td:first-of-type выбирает первый элемент

внутри элемента . Псевдокласс :last-of-type выбирает последний элемент этого типа в родительском элементе.

В нашем случае селектор td:last-of-type снова выбирает последний элемент

в элементе . Наконец, псевдокласс :only-of-type выбирает элемент, только если он является элементом этого типа в родительском элементе. Здесь селектор td:only-of-type выбирает элемент , только если он является единственным элементом в элементе , например, когда объединяет два столбца.

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

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

При разработке отчетов ‘ также удалит нижние поля у элементов

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

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

Мы » сделает это, создав новый класс, запланировав сдвиг и назначив ему цвет со значением #a9b2b9.

Как только класс будет на месте, добавьте его ко всем элементам

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

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

рис. 11.01. Страница «План» содержит несколько таблиц для конференции стилей

Демонстрация и исходный код

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

Продолжить

Хорошо, теперь мы знаем, как семантически стилизовать табличные данные в HTML, а также делать это интуитивно с помощью CSS. Дискуссия за столом была нашей последней большой барьер для изучения HTML и CSS, и на этом мы официально завершаем наши страницы Styles Conference.

Для тестирования в этом руководстве мы рассмотрели следующее:

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

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

Источник

Читайте также:  Как открыть стиральную машину hotpoint ariston если она заблокировалась
Поделиться с друзьями
Решатор