Как сделать в css таблицу: Стилизация таблиц — Изучение веб-разработки

Совет

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

Твит

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

Использование CSS flex для

переопределяет его родную семантику, делая его бесполезным для программы чтения с экрана. Избегайте.adrianroselli.com/2015/10/html-s…

Адриан Роселли (@aardrian) 19 февраля 2018 г.

Я последовал за ним, чтобы добавить некоторые детали:

Я должен добавить, используя display: block | сетка | встроенный | … в табличных элементах также переопределяет нативную семантику. Не уникален для гибкости.

Адриан Роселли (@aardrian) 19 февраля 2018 г.

Собрано ответов

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

• Разработчики нарушали семантику HTML-таблиц с помощью свойств отображения еще до появления CSS flex и grid.
• Это не должно усложнять или делать невозможным создание адаптивных таблиц. Я написал несколько простых и менее простых способов создания адаптивных таблиц.
• CSS уже оказывает влияние на семантику HTML — отображение: нет тому пример.
• Если программы чтения с экрана в каждом случае отдают предпочтение разметке над стилем, то 9Дисплей 0023: нет
  больше не будет работать.
• Параметр display: table и связанные с ним не передают семантику таблицы HTML макетам (
  ), которые использовали его для таких вещей, как вертикальное центрирование.
• Это функция не только программ чтения с экрана, поскольку они получают информацию о специальных возможностях из браузера.
• Программе чтения с экрана для понимания страницы требуется нечто большее, чем DOM, поэтому просить его игнорировать все, кроме DOM, нецелесообразно.
• Пользователи не хотят, чтобы мы могли обнаруживать средства чтения с экрана, и мы не должны этого делать, и уж точно не в качестве обходного пути для адаптивных таблиц.
• Даже если бы вы могли обнаруживать программы чтения с экрана, как бы вы узнали, какая треть из этих пользователей не является слепой?
• Даже если вы прослушиваете действия мыши в качестве прокси для зрячих пользователей программ чтения с экрана, как вы учитываете людей с нарушениями подвижности, которые не используют мышь? Или пользователи мобильных устройств чтения с экрана, которые полагаются на сенсорные жесты?
• Таким образом, отключение CSS сайта для пользователей программ чтения с экрана нецелесообразно (и ужасная, ужасная идея).
• Использование flex или grid для таблицы HTML уже означает, что вы рискуете испортить порядок содержимого по сравнению с исходным порядком (не только для таблиц).
• Использование сетки CSS для макета HTML-таблицы может быть уместным, но семантически это все равно не будет таблицей
• Значительная часть того, почему у нас сложилась такая ситуация, связана с тем, что в течение многих лет мы полагались на HTML-таблицы для макета, у которых были изменены свойства отображения, давая понять программам чтения с экрана, что они предназначены только для макета.
• Средства чтения с экрана уже имеют собственные эвристики для работы с таблицами, главным образом из-за многих лет плохой практики разработчиков. с текущим поведением, отслеживаемым PowerMapper.
• Хотя ARIA предоставляет роли для таблиц, для этого требуется, чтобы вы хорошо понимали свои таблицы и не отставали от тестирования программ чтения с экрана по мере появления новых выпусков.
• Применение ролей ARIA для сохранения семантики таблицы может быть проблематичным для адаптивных таблиц, в которых отбрасываются ячейки заголовков или другие ячейки, что является распространенным шаблоном в примерах адаптивных таблиц. См. предыдущий раздел этого поста.
• Как правило, не используйте ARIA для переопределения CSS не только потому, что CSS может не загрузиться, но и потому, что это не является целью ARIA.

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

Если вы обнаружите, что хотите использовать CSS flex, grid, block, inline или другие свойства отображения для таблицы, то, возможно, подумайте, какого черта вы делаете с таблицей.

Различные спецификации CSS

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

CSS 2.x пытается разбить роль CSS для таблиц, а именно оставить HTML для определения семантики:

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

презентация использование CSS 2.1.

Спецификация каскадных таблиц стилей уровня 2, редакция 1 (CSS 2.1), рекомендация W3C от 7 июня 2011 г., отредактировано 12 апреля 2016 г.: 17.1 Введение в таблицы

CSS 2. x также учитывает не-HTML-страницы, где он добавляет семантику и создает вокруг себя необходимые анонимные табличные объекты:

В других языках документов (таких как XML-приложения), могут отсутствовать предопределенные элементы таблицы. Таким образом, CSS 2.2 позволяет авторам «сопоставлять» элементы языка документа с элементами таблицы через свойство «отображать». Для например, следующее правило заставляет элемент FOO вести себя как HTML Элемент TABLE и элемент BAR действуют как элемент CAPTION:

Спецификация каскадных таблиц стилей , уровень 2, редакция 2 (CSS 2.2), первый общедоступный рабочий проект W3C, 12 апреля 2016 г.: 17.1 Введение в таблицы

Я не могу найти нигде в спецификации CSS 2.x (в частности, в модели визуального форматирования), где свойство display должно переопределять собственную семантику языка исходного документа (HTML).

Самое близкое утверждение о взаимодействии с таблицами, которое я могу найти в спецификации Flexbox, — это примечание, адресованное создателям пользовательских агентов, и ничего не говорит об изменении семантики:

Примечание. Некоторые значения display обычно вызывают создание анонимных блоков вокруг исходного блока. Если такой ящик является гибким элементом, он сначала блокируется, поэтому создание анонимного ящика не произойдет. Например, два смежных flex-элемента с display: table-cell станут двумя отдельными flex-элементами display: block вместо того, чтобы быть заключенными в одну анонимную таблицу.

Модуль CSS Flexible Box Layout, уровень 1, рекомендация кандидата W3C, 19Октябрь 2017 г.: 4. Flex Items

CSS Grid имеет аналогичный язык:

Примечание. Некоторые значения display обычно вызывают создание анонимных блоков вокруг исходного блока. Если такой ящик является элементом сетки, он сначала блокируется, поэтому создание анонимного ящика не произойдет. Например, два смежных элемента сетки с display: table-cell станут двумя отдельными элементами сетки display: block вместо того, чтобы быть заключенными в одну анонимную таблицу.

CSS Grid Layout Module Level 1, рекомендация кандидата W3C, 14 декабря 2017 г. : 6.1. Отображение элемента сетки

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

Пример

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

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

Что вы можете сделать

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

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

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

Возможно, оцените обсуждение [Proposal] нового атрибута для указания фокуса и порядка чтения на WICG Discourse.

Обновление: 3 марта 2018 г.

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

Обновление: 4 марта 2018 г.

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

[Я] это вольно или невольно виноват разработчик или браузер. Но в чем мы можем быть уверены в этих случаях, так это в том, что это не вина программы чтения с экрана.

Краткое примечание о том, как отображаемые свойства CSS влияют на семантику таблицы

Обновление: 27 марта 2018 г.

Стоит отметить, что display:contents на

,

,
и т. д. также скрывает его от программ чтения с экрана. Конечно, уже поздно, и я пока тестировал только в Firefox и NVDA, но вы можете попробовать сами (встроено ниже или посетите его непосредственно на CodePen):

См. Pen Table with display:contents Адриана Роселли (@aardrian) на CodePen.

Прочтите сообщение Ире Адеринокун, Как отображать: содержимое; Работает для других способов отображения : содержимое может влиять на содержимое страницы.

Обновление: 19 февраля 2020 г.

Большой прогресс. Chrome 80 больше не сбрасывает семантику для таблиц HTML, когда отображает свойства flex , используется сетка , встроенный блок или содержимое . Новый Edge (ChromiEdge) следует их примеру. Firefox по-прежнему выводит семантику таблицы только для display:contents . Safari сбрасывает семантику таблиц для всего.

Chrome v80 больше не сбрасывает семантику таблицы при применении гибкости CSS.

Тест: cdpn.io/aardrian/debug/xxGEKKJ

Свойство display не только влияет на паритет с Firefox, но и проходит Firefox (поскольку display:contents по-прежнему потребляет семантику таблицы в Firefox, но больше не в Chrome). pic.twitter.com/4iuitwgWhS

Адриан Роселли (@aardrian) 19 февраля 2020 г.

Обновление: 29 сентября 2020 г.

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

Посмотрите, как программы чтения с экрана перемещаются по таблицам данных на YouTube. 9Обновление 0016: 7 декабря 2022 г.

Я должен был сделать ссылку на свой обновленный пост раньше: Середина 2022 года, и браузеры (в основном Safari) по-прежнему не поддерживают доступ через свойства дисплея

С Chrome сейчас все в порядке, последняя ошибка Firefox только что устранена и должна появиться в ближайшее время, а Safari по-прежнему остается в беспорядке после неоднократных заверений, что она исправлена.

Теги

доступность, ARIA, css, html, стандарты, таблицы, удобство использования, UX

Другие сообщения

Предыдущая запись: GitHub Contributions Chart

Более свежий пост: CSUN 2018: все, что я знаю о специальных возможностях, которые я узнал из переполнения стека

Как создать таблицу CSS HTML из MS Office Word | Topbullets

29 мая 2014 г. ~ Дипеш Сингх

Сегодня я писал блог, и мне нужно было вставить HTML-таблицу в статью. Чтобы создать красивую HTML-таблицу CSS, требуется много усилий и знаний различных стилей CSS. У меня есть сведения о различных веб-сайтах, которые предоставляют бесплатный код CSS, но сегодня я попробовал это по-своему. Мне понравилось, и создание прекрасной таблицы CSS HTML без знаний CSS заняло всего 2 минуты. Вам просто нужно знать 3 основные вещи, а именно 3 тега html. html, заголовок и тело. 🙂 Делаем. Вам обязательно понравится. Было бы веселее, если бы вы владели дизайном MS Word и таблиц. Пожалуйста, проверьте ниже шаги и изображения.
Шаг 1: Откройте Word и создайте новую таблицу. Вставьте таблицу в соответствии с вашими потребностями и вставьте данные.

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


Шаг 3: Теперь сохраните файл Word как веб-страницу. При сохранении файла выберите «Веб-страница» в раскрывающемся меню «Сохранить как». Нет необходимости сохранять его как abc.html. Если вы выберете «веб-страницу», она автоматически получит расширение .html.


Шаг 4: Теперь откройте html-страницу и нажмите Cltr+U, чтобы проверить исходный файл, или щелкните правой кнопкой мыши и перейдите к «Исходный код страницы». У него много сложных HTML-кодов, но не волнуйтесь. Перейти к тегу body, а затем к тегу table. Или нажмите Ctr+F и введите ‘

Шаг 5: Скопируйте весь код. От тега открытой таблицы к тегу закрывающей таблицы. Вставляйте эти коды в любое время. Вроде я вставил эти коды ниже этого абзаца. Вы также можете проверить код. Откройте блокнот. Вставьте код внутри тега body и сохраните его как abcnew.html 9.0313


Я вставил этот код в свой блог. Вы можете увидеть результат.

Имя	Возраст	Пол
Дипеш	23	Мужской

Copyright © 2014 · Все права защищены · Повторная публикация или копирование этой статьи или любой ее части без ссылки подпадает под действие Закона об авторском праве WordPress.

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

Подпись

Дипеш Сингх

Оценить:

Нравится:

Нравится Загрузка...

Эта запись была размещена в Компьютеры и Интернет, Программирование и программное обеспечение с метками CSS, CSS Table, HTML, HTML 5, HTML Table, MS Office, office, Word. Добавьте постоянную ссылку в закладки.

• 1 229 610 человек

Поиск КатегорииВыберите категориюАнализ рекламы  (8)Аналитика  (7)Компьютеры и Интернет  (56)Общие статьи  (88)Групповые обсуждения  (20)Программирование и ПО  (44)WebAfflatus  (27)

• Как загрузить данные из Weather Underground – TopBullets.

  Добавить комментарий Отменить ответ

  Ваш адрес email не будет опубликован. Обязательные поля помечены *

  Комментарий *

  Имя *

  Email *

  Сайт