Использование элементов HTML col и colgroup
22 июля 2017 | Опубликовано в css | 1 Комментарий »
Из всех элементов, которые применяются при создании таблиц, включая используемые для улучшения доступности, вероятно, наиболее обделенным вниманием является элемент col. Этот элемент контролирует отображение другого содержимого, при этом сам не появляется на странице, как минимум без применения кода CSS, и позволяет нам избежать необходимости неоднократного применения классов к отдельным ячейкам таблицы.
Элемент col записывается в структуре таблицы сразу после элемента подписи. Обратите внимание, что в коде HTML далее нет закрывающих тегов, которые не обязательны в HTML5, для экономии места, но в XHTML для каждого открывающего тега <col> должен быть определен закрывающий тег </col>.
Код HTML для примера таблицы ниже:
<table id=sprinters> <caption>World’s Fastest 100m Sprinters, 2012</caption> <col><col><col> <thead> <tr> <th>Name <th>Country <th>Best Time </thead> <tfoot> <tr> <td colspan="2">Average Time <td>9.66 seconds </tfoot> <tbody> <tr> <td>Usain Bolt <td>Jamaica <td>9.58 seconds <tr> <td>Tyson Gay <td>United States <td>9.69 seconds <tr> <td>Asafa Powell <td>Jamaica <td>9.72 seconds </tbody> </table>
Для этой разметки применяется следующий код CSS:
#sprinters { border-collapse: collapse; } #sprinters caption { font-size: larger; } #sprinters td, #sprinters th { padding: .5rem; } #sprinters tfoot tr td { border-top: 1px solid #000; } #sprinters col:last-child { background: #ddd; } #sprinters thead { background: #000; color: #fff; }
В результате получаем такую таблицу:
Количество элементов col должно совпадать с количеством ячеек таблицы в каждой строке. Можно растянуть элемент col, чтобы он управлял большим количеством столбцов, используя атрибут <span> в подобной записи:
<col span="2"><col>
С такой записью количество элементов col будет равняться трем, и любые стили, примененные к первому элементу col, будут влиять на внешний вид первых двух столбцов.
Столбцы таблицы могут быть сгруппированы вместе с помощью элемента colgroup, например, таким образом:
<colgroup> <col><col> </colgroup> <col>
И к элементу col, и к элементу colgroup можно применить стили для улучшения внешнего вида таблиц.
Автор урока Dudley Storey
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
- Использование множественных фоновых изображений CSS: основы
- Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
- Использование плавной прокрутки и ее недостатки
- Использование тега span для разделения слов в ссылках в CSS
- Использование порядка расположения множественных фоновых изображений
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191