Я должен использовать <colgroup> и <col>, и если да, то почему и как?

Question

Я пытался правильно использовать теги colgroup и col, но не понял. Я прочитал спецификацию и все такое, но я не понимаю ее цели или как ее реализовать.

Любой совет?

Answer 1

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

WAI имеет полную информационную страницу о том, как справиться с такой ситуацией: таблицы с нерегулярными заголовками и понимание использования col а также colgroup

Чтобы правильно связать заголовки первого уровня со всеми ячейками обоих столбцов, необходимо определить структуру столбцов в начале таблицы. <col> Элемент идентифицирует каждый столбец, начиная слева. Если заголовок охватывает два или более столбцов, используйте <colgroup> элемент вместо этого числа <col> элементы, и количество столбцов, охватываемых указывается в атрибуте span.

Тем не менее, лучший вариант использования этих элементов для стилизации столбцов без повторения style или же class атрибуты:

<table>
  <colgroup>
    <col style="background-color:red">
    <col style="background-color:yellow">
    <col style="background-color:blue">
  </colgroup>
  <tr>
    <th>First</th>
    <th>Second</th>
    <th>Third</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Answer 2

Вот почему мы должны использовать colgroup и col: Доступ ко всем, независимо от инвалидности.

Я кодирую последние 4 месяца, и я читаю, смотрю учебники, спрашиваю, снова пишу и т.д. Я лично считаю, что WWW должен быть для всех, и, узнав, я обнаружил, что HTML5 был создан с таким намерением. Несколько дней назад я кодировал таблицу, и меня познакомили с тегами, которых я никогда раньше не видел. colgroup и col теги. В начале я не обращал слишком много внимания, пока эти теги не начали беспокоить меня, почему они существуют? Как я должен это использовать? Обязательно их декларировать? Что произойдет, если я их вообще не использую?

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

Тег colgroup - это способ объявления группы столбцов в таблице, а col - способ объявления отдельных столбцов. Согласно спецификации W3C, тег col может быть внутри или снаружи тега colgroup, а если тег col находится внутри тега colgroup, то тег colgroup не может иметь атрибут span=””, так как span внутри тега col будет переписать это.

Пример 1 - хорошее использование тегов colgroup и col.

<col>
<colgroup span="2"></colgroup>
<colgroup>
<col span="3">
</colgroup>

Пример 2 - неправильное использование тегов colgroup и col.

<col>
<colgroup span="2"><colgroup>
<colgroup span="2">
<col span="3">
</colgroup>

В примере 2 было объявлено, что вторая группа colg охватывает 2 столбца, но внутри была объявлена ​​метка col, которая перезаписывает эту команду и теперь сообщает UA о том, что она охватывает 3 столбца вместо 2. И почему это является проблемой? Как я уже упоминал ранее, мне нравится знать, как все работает, поэтому, исследуя, я обнаружил нечто, называемое " разделом 508", который является частью "Акта о реабилитации", который бывший президент Клинтон подписал в 1998 году, и в этом разделе 508 говорится о как использовать современную технологию, чтобы сделать информацию доступной для людей с ограниченными возможностями. Теперь представьте себе человека, который плохо видит, и ему / ей приходится ретранслировать экранную программу, чтобы получить доступ к информации, размещенной на веб-сайте, на таком веб-сайте есть таблица, и если эта таблица имеет неправильную разметку… тогда, хорошо пользователь получит неверную информацию или может вообще ее не получить. И это проблема, говорит Тим Бернерс-Ли, директор W3C и изобретатель World Wide Web:

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

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

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

Предыдущая цитата на w3.org была найдена здесь:

Кроме того colgroup а также col есть и другие теги, которые мы должны использовать (это не обязательно реализовывать, но как веб-разработчики, и, на мой взгляд, наша обязанность разрабатывать и внедрять контент, доступный каждому, независимо от его способностей или отсутствия такового), например и что я не собираюсь объяснять, так как есть много хороших статей об этом. Мое намерение с этим вкладом состоит только в том, чтобы объяснить, что я не смог найти в Интернете, в качестве общего объяснения использования этих тегов (кроме сайта, который я упоминал ранее). Я надеюсь, что эта информация может быть полезна для кого-то, как и для меня.