Соломоновы столбцы

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

    Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием «Полосатые таблицы».

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

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

    Существует простое, кроссбраузерное решение, основаное только на HTML/CSS. А именно colgroup. Решение это совсем не ново, но почему-то незаслужено забыто многими разработчиками. Перейдем прямиком к разметке:

    <table>
    <caption>Столбцы / колонки:</caption>
    <colgroup>
    <col />
    <col class="alt" />
    <col />
    <col class="alt" />
    <col />
    </colgroup>
    <tr>
    <th>FF2/3</th>
    <th>IE6/7</th>
    <th>Opera</th>
    <th>Safari</th>
    <th>Other</th>
    </tr>
    <tr>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    </tr>
    <tr>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    </tr>
    <tr>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    </tr>
    <tr>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    <td>Нет</td>
    <td>Да</td>
    </tr>
    </table>


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

    Вот так выглядит CSS:

    table {
    border: 1px solid #333;
    border-collapse: collapse;
    }
    th, td {
    padding: 2em;
    text-align: center;
    border-spacing: 1em;
    }
    th {
    background: #ddd;
    color: #fff;
    }
    /*Стиль для столбца*/
    col.alt {
    background: #ddf;
    }


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

    Проверено в FF2/3, IE6/7, Opera 9.5, Safari|(Win). Рабочий пример можно посмотреть.

    Upd: Список поддерживаемых стилевых правил.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 49

      0
      А есть какое-нибудь подобное решение для раскраски по горизонтали (т.е. строк, а не столбцов)?
        +2
        Я описывал у себя в блоге. www.webmakerslounge.com/css/striped-tables/
          +1
          Я имел в виду такого же плана решение, чтобы не прописывать классы к нескольким сотням tr'ов
            0
            «Чистое» решение есть в CSS3, но к сожалению для промышленной верстки оно пока неприменимо. Так что пока пользуемся «костылями» или server-side решениями.
          0
          Эмм… Стили к tr?
            0
            Или ждать селекторы в CSS3 (odd/even).
              0
              Неизвестно, как они будут кушать rowspan-ы…
              –6
              Не совсем. Класс для tr, а вот стили уже для td внутри класса.
              0
              Есть. Tr можно группировать в tbody, которых в одной таблице может быть несколько.
              +2
              Хм, во многих мануалах о colgroup не слова. Спасибо за информацию. В дальнейшем буду умнее)
                0
                Тут на хабре был просто шоколадный пост про таблицы. щас линк найду.
                    –6
                    Да, кстати. Неплохая информация по разметке таблиц. Но про стили там нет.
                      0
                      Да, правда Ваша («твоя»?). Просто очень много того, чего почти никто не знает :)
                        –6
                        Можно на «ты» :)

                        Скажем так, не то что никто не знает, а то, чего специально не интересующийся не знает ;)
                          0
                          Я думаю если заинтересуюсь, я в таком количестве эту инфу найду только в спецификации.
                            0
                            Ну а чем плохи спеки? ))
                              0
                              Нипанятные…
                      0
                      thank you very much)
                        0
                        thank you very much)
                          0
                          в рот мне ноги — опять цитируют :)
                          И новый Хабр опять поломал разметку… Я вот не представляю, как почти сотню своих статей пересмотреть и переформатировать под очередные требования Хабра. Наверное, стоит все же вынестись на свой отдельный технический блог…
                            –6
                            Давно пора :) А что с webo.in?
                              0
                              а с ним что-то не так?
                              просто on having layout как-то не в тему туда переносить…
                                –6
                                Все так :) Можно в Статьях подраздел создать :)
                                  0
                                  там и так уже подразделов — выше крыши — уже 60 статей по оптимизации…
                      • UFO just landed and posted this here
                          0
                          хм, и тут алигн…
                        0
                        Век живи, век учись.
                          0
                          Знатоки кроссбраузерного CSS, подскажите:

                          как с помощью colgroup задать не только цвет фона столбца, но и, например, центрирование содержимого?
                          Если в col.alt прописать text-align: center; — это работает в IE, но не работает в FF. Для совместимости с последним мне пока приходится задавать класс для каждой ячейки td в нужном столбце(
                            0
                            colgroup и col позволяет употреблять только очень ограниченный набор стилевых правил — фон, цвет шрифта, что-то ещё, кажется. сделать текст жирным, например, у вас не получится. про text-align гарантированно не скажу, но, видимо, он тоже не срабатывает
                              –6
                              Точно, список поддерживаемых стилевых правил невелик. Вот он.
                                0
                                Да, к великому сожалению.

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

                                Вообще, сложно понять разработчиков стандарта, зачем нужно было так ограничивать?
                                0
                                Скорее это ограничение не col и colgroup, а недостаточна поддержка браузерами.

                                Собственно, эти два тега — одни из наиболее сильно страдающих от недостаточной поддержки браузерами. Хуже всего дело обстоит в Firefox.

                                По схожей причине — слишком большие расхождения в рендеринге — в настоящее время сильно ограничено применение тега caption.
                                  0
                                  Ан нет, оказывается по стандарту такая ограниченная функциональность и должна быть, а в MS самовольно добавили поддержку text-align. Что на самом деле очень удобно при составлении больших таблиц с данными. Жаль, что в w3c думают не настолько широко.
                                  • UFO just landed and posted this here
                              0
                              Впервые встречаю данное решение. Видимо, действительно, в редких мануалах об этом упоминается. Спасибо за инфо! Взял на заметку.
                                +2
                                просто большинство этих «мануалов» написано неспециалистами.

                                Вообще лучше выделить одну недельку и вместо чтения хабра прочитать от и до Спецификацию HTML 4.01 или её перевод на русский — там очень много действительно полезной информации. Вы узнаете для себя очень много нового.

                                Это прекрасная систематизация знаний, которая прояснит многие ранее непонятные вещи. Уверен — большинство верстальщиков её не читали и имеют лишь практический опыт. Когда то, да — теория и практика сильно расходились. Да и приняли её только в 99 году. Но сейчас очень стоит прочесть.
                                  –6
                                  Полностью поддерживаю, с той лишь разницей, что я бы не стал всю спецификацию сразу читать, а делал бы это подходами, разбивая информацию на ключевые блоки.
                                    0
                                    > Уверен — большинство верстальщиков её не читали и имеют лишь практический опыт.

                                    Я один из таких. Ранее пытался начать читать данную спецификацию, но ее объемы испугали, поэтому органичился лишь мануалами, которые, как мы видим, много не расскрывают, однако, которые написаны более простым к усвоению языком.
                                      0
                                      Согласен. Правда лично я прочитал книгу Мейера, что было поинтереснее чем читать сухое изложение спецификации. Оттуда же узнал про colgroup и col для таблиц.
                                    0
                                    Что такое col, colgroup и чем они полезны — нужно при приеме верстальщика на работу спрашивать (впрочем, как заметили выше и про спецификацию тоже).
                                    Хороших верстальщиков — дефицит.

                                    Статью плюсую, конечно.
                                      0
                                      hasLayout — более важная вещь, чем colgroup, а о ней почти ничего не знают.
                                      Хотя, видимо, года через 2 это станет уже почти не актуально.
                                        –6
                                        Ну а пока технического блога нет — опять процитируем :) habrahabr.ru/blogs/webdev/31236/
                                          0
                                          Угу.
                                          А еще есть «проффесиональные верстальщики», которые не слышали о conditional comments. И «почему в IE png другого цвета». И т.д. и т.п.
                                          Эх… :)
                                        0
                                        Я бы ещё полезный аттрибут span добавил. Больше я его не встречал нигде.
                                          –6
                                          Я тольком не потестировал его, решил не писать про него, так как похоже там проблемы с кроссбраузерностью.
                                          +2
                                          Боюсь, что text-align не будет работать в firefox, для этого я использую css правило:
                                          .ff_tbl_fix tr td+td+td{text-align: right} теперь все столбцы начиная с третьего будут иметь стиль text-align: right
                                          • UFO just landed and posted this here
                                            +1
                                            table {

                                            border-collapse: collapse;
                                            }

                                            th, td {

                                            border-spacing: 1em;
                                            }


                                            border-spacing здесь не нужен, он проигнорируется

                                            Only users with full accounts can post comments. Log in, please.