kirupa.com - стиль красивых таблиц с использованием только CSS

1. Пример
2. Начиная
3. Указание границ
4. Указание отступа (и поля!)
5. Указание размера
6. Указание размера общей таблицы
7. Указание размера отдельных столбцов
8. Вещи не так просто
9. Текст и выравнивание
10. Указание стиля шрифта для всей таблицы
11. Изменение стиля шрифта для строки заголовка
12. Установка выравнивания
13. Раскрась свой стол
14. Установка цвета заголовка
15. Цвет фона для альтернативных рядов
16. Заключение
17. KIRUPA NEWSLETTER

Есть вопросы? Обсудите этот учебник HTML5 и CSS с другими на форумах.

Тьфу! Eww! Я говорю маме. Убирайся с моей тарелки! Это реакция, которую некоторые из вас, вероятно, испытывают, когда я упоминаю слово «таблицы» в контексте веб-дизайна. Хотя таблицы не используются, когда дело доходит до макета, они все же полезны для табличных вещей, таких как отображение табличных данных в столбцах и строках.

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

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

Пример

Во-первых, давайте посмотрим на то, что вы будете создавать. Ниже вы увидите таблицу с несколькими смайликами:

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

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

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

Начиная

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

<table id = "smileysTable"> <tr> <th> Mugshot </ th> <th> Имя смайлика </ th> </ tr> <tr> <td> <img alt = "#" src = "// www.kirupa.com/forum/images/smilies/bandit.gif "/> </ td> <td> Bandit </ td> </ tr> <tr> <td> <img alt =" # "src =" //www.kirupa.com/forum/images/smilies/happy.gif "/> </ td> <td> Normal </ td> </ tr> <tr> <td> <img alt =" # "src = "// www.kirupa.com/forum/images/smilies/alien.gif" /> </ td> <td> Alien </ td> </ tr> <tr> <td> <img alt = "# "src =" // www.kirupa.com/forum/images/smilies/robot.gif "/> </ td> <td> Robot </ td> </ tr> <tr> <td> <img alt = "#" src = "// www.kirupa.com/forum/images/smilies/temp.h2.gif" /> </ td> <td> Cool </ td> </ tr> <tr> <td> <img alt = "#" src = "// www.kirupa.com/forum/images/smilies/ninja.gif" /> </ td> <td> Ninja </ td> </ tr> <tr> < td> <img alt = "#" src = "// www.kirupa.com/forum/images/smilies/chinese.gif" /> </ td> <td> Asian </ td> </ tr> </ стол>

Просто добавьте эту таблицу в любом месте вашего HTML-документа, и все будет хорошо. Как видите, эта таблица очень проста. Есть только одна вещь, которую вы должны отметить, это то, что она имеет значение id smileysTable.

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

[yaaaaaaawn! ]

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

Указание границ

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

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

#smileysTable {border: 2px solid #CCCCCC; }

Идем дальше, создаем область стиля и добавляем к ней вышеуказанное правило стиля. Все, что мы делаем, это указываем свойство border для таблицы, значение id которой smileysTable.

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

Вы только что закончили первую часть. Вторая часть определяет границы ячеек внутри таблицы. Это делается путем нацеливания на элементы td и th:

#smileysTable td, #smileysTable th {border: 1px solid #CCC; }

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

Это выглядит немного странно, не так ли? Между всеми клетками есть пространство. Давайте избавимся от этого, установив для свойства border-collapse в нашей таблице значение collapse:

#smileysTable {border: 2px solid #CCCCCC; коллапс границы: коллапс; }

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

Это выглядит намного лучше. Это то, что я называю прогрессом!

Указание отступа (и поля!)

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

#smileysTable td, #smileysTable th {border: 1px solid #CCC; отступы: 10 пикселей; }

Идите дальше и добавьте выделенную строку в существующее правило ts #smileysTable. После того, как вы это сделаете, содержимое вашего стола будет иметь больше передышки:

Чтобы быть более точным, у вас есть 10 дополнительных пикселей дыхания.

Указание размера

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

Указание размера общей таблицы

Во-первых, давайте установим размер всей таблицы. Это делается путем установки свойства width в таблице напрямую:

#smileysTable {border: 2px solid #CCCCCC; коллапс границы: коллапс; ширина: 450 пикселей; }

Добавьте выделенную строку, чтобы таблица отображалась с шириной 450 пикселей.

Указание размера отдельных столбцов

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

Если вам приходилось говорить об этом с помощью HTML, первый столбец - это просто первый элемент td, который находится внутри каждого элемента tr:

<таблица> <tr> <th> столбец 1 </ th> <th> столбец 2 </ th> </ tr> <tr> <td> столбец 1 </ td> <td> столбец 2 </ td> < / tr> <tr> <td> Столбец 1 </ td> <td> Столбец 2 </ td> </ tr> <tr> <td> Столбец 1 </ td> <td> Столбец 2 </ td> < / tr> </ table>

То, что мы хотим сделать, это использовать CSS для нацеливания на первый элемент td и th, найденный внутри каждого элемента tr. Мы собираемся сделать это с помощью псевдоселектора nth-of-type (n). Вот как выглядит CSS для установки ширины первого столбца 75 пикселей:

#smileysTable td: nth-of-type (1), #smileysTable th: nth-of-type (1) {width: 75px; }

То, что говорит псевдо-селектор nth-типа (1), довольно просто. Получите мне первый элемент td внутри родительского элемента, дочерним элементом которого является td. Это работает одинаково и для элемента th. В этом случае родительским элементом является tr. Первый дочерний элемент с типом td или th внутри элемента tr становится целевым - именно этого мы и хотим, поскольку первые элементы tr и th соответствуют ячейке в первом столбце!

После добавления этой последней части CSS ваша таблица будет выглядеть следующим образом:

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

Вещи не так просто

Если бы вы думали, что ширина второго столбца составляет 375 пикселей (450 - 75 пикселей), вы бы ошиблись. Из-за того, что отступы, поля и размеры границ сливаются для создания окончательного размера, у вас будет несколько пикселей. Эти пиксели также немного различаются между браузерами.

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

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

Указание стиля шрифта для всей таблицы

Давайте определим общий шрифт и размер для всей таблицы. Это довольно просто:

#smileysTable {border: 2px solid #CCCCCC; коллапс границы: коллапс; ширина: 450 пикселей; семейство шрифтов: Cambria, Cochin, Georgia, serif; размер шрифта: 14 пикселей; }

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

Изменение стиля шрифта для строки заголовка

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

#smileysTable th {font-weight: bold; размер шрифта: 16 пикселей; }

Видите, некоторые вещи довольно легко и просто сделать!

Установка выравнивания

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

#smileysTable td: nth-of-type (1), #smileysTable thd: nth-of-type (1 {ширина: 75px; выравнивание текста: центр;}

Просто добавьте свойство text-align к правилу стиля, которое у вас уже есть для ориентации на первый столбец. Текст в вашем элементе th, вероятно, уже выровнен по центру. Это работает для первого столбца, но мы не хотим этого для второго столбца.

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

#smileysTable th: nth-of-type (2) {text-align: left; }

После внесения изменений в этом разделе ваша таблица должна выглядеть примерно так:

Хорошо, мы почти закончили. Еще один раздел остался до того, как вы станете участником, несущим карты, в клубе Make Tables Beautiful !

Раскрась свой стол

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

Установка цвета заголовка

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

#smileysTable th {font-weight: bold; размер шрифта: 16 пикселей; цвет фона: # DDE9FF; }

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

Цвет фона для альтернативных рядов

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

Чтобы придать каждой альтернативной строке свой стиль, мы добавим новый поворот в псевдоселектор n-го типа, который мы использовали. Псевдо-селектор n-го типа принимает число в качестве аргумента. Этот номер указывает, какой элемент в родительском объекте должен быть целевым. Это то, что вы видели, например, с помощью nth-of-type (1).

Псевдоселектор n-го типа - это волшебник. Он также может принимать числовое выражение в качестве аргумента. Вместо того, чтобы просто вводить одно число, вы можете указать такое выражение, как n + 2 или 2n-1 и так далее. Значение выражения определяет, какой элемент на самом деле будет выбран. Чтобы мысленно выяснить, на какие элементы будет нацелен такое выражение, замените 0, 1, 2, 3, 4 и т. Д. На n в каждом выражении, чтобы получить окончательное число.

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

#smileysTable tr: nth-of-type (2n + 2) {background-color: # ECF7FF; }

Это правило указывает на то, что ваш 2-й, 4-й, 6-й, 8-й и т. Д. Строки будут целевыми. Добавьте это правило в ваш документ и просмотрите таблицу. Вы должны увидеть что-то, что выглядит следующим образом:

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

#smileysTable tr: nth-of-type (2n + 3) {background-color: #FBFDFF; }

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

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

Заключение

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

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

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

KIRUPA NEWSLETTER

Получите крутые советы, хитрости, селфи и многое другое ... лично доставленные вручную на ваш почтовый ящик!

( Посмотреть прошлые выпуски за идею о том, что ты упускал все это время! )

Похожие

Комментарии