Свойство caption-side позволяет задать местоположение тега caption, используемого в таблицах. Свойство применимо к любому тегу с display: caption-side.
table {
caption-side: top;
}
Значения:
Свойство caption-side можно применять как к тегу table, так и к тегу caption, эффект будет одинаковый. Свойство перемещает блок с подписью (свойство display у подписи принимает значение table-caption), но никак не влияет на выравнивание тексту внутри. Текст внутри блока можно выровнять с помощью свойства text-align.
Если таблица находится в режиме vertical-rl, то надпись будет выводиться слева или справа, используя те же значения top и bottom.
Браузер Firefox дополнительно поддерживает четыре других свойства: left (подпись слева от таблицы), right (подпись справа от таблицы), top-outside (подпись сверху от таблицы, размер не зависит от таблицы), bottom-outside (подпись снизу от таблицы, размер не зависит от таблицы). Другие браузеры не стали поддерживать эти значения.
В черновиках CSS прописаны новые свойства: block-start, block-end, inline-start и inline-end.
<caption style="caption-side: top">Коты</caption>
Надпись Коты выводится сверху (top). Это значение по умолчанию.
| Барсик |
| Мурзик |
| Васька |
Надпись Коты выводится снизу (bottom).
| Барсик |
| Мурзик |
| Васька |
В CSS3 появились удобные средства для улучшения стилевых таблиц печати и разбиения контента на столбцы.
Создадим простую таблицу без стилей. Она будет выглядеть так.
| Название | Цена | Количество | Итого |
|---|---|---|---|
| Кружка | $10.00 | 5 | $50.00 |
| Рубашка | $20.00 | 5 | $100.00 |
| Ножницы | $9.00 | 4 | $36.00 |
| Промежуточный итог | $186.00 | ||
| Доставка | $12.00 | ||
| Всего | $198.00 | ||
Эффект зебры (чередование цвета строк) полезен тем, что упрощает просмотр данных по строкам. Раньше в строку таблицы приходилось включать дополнительные классы (например, odd и even для нечётных и чётных строк соответственно). При помощи новых селекторов мы можем добиться желаемого эффекта без изменения разметки.
Селектор nth-of-type находит каждый элемент конкретного типа, определяемый формулой или ключевыми словами. Чтобы каждая вторая строка таблицы была окрашена в другой цвет, проще всего найти все чётные строки таблицы и назначить им другой цвет фона. То же самое делается с нечётными строками. В CSS3 имеются ключевые слова even и odd, предназначенные именно для таких ситуаций. Фактически этот селектор означает: «Найти каждую чётную строку таблицы и задать ее цвет. Затем найти каждую нечётную строку таблицы и задать её цвет».
table{
border-collapse: collapse;
width: 600px;
}
th, td{
border: none;
}
th{
background-color: #000;
color: #fff;
}
tr:nth-of-type(even){
background-color: #F3F3F3;
}
tr:nth-of-type(odd){
background-color:#ddd;
}
| Название | Цена | Количество | Итого |
|---|---|---|---|
| Кружка | $10.00 | 5 | $50.00 |
| Рубашка | $20.00 | 5 | $100.00 |
| Ножницы | $9.00 | 4 | $36.00 |
| Промежуточный итог | $186.00 | ||
| Доставка | $12.00 | ||
| Всего | $198.00 | ||
По умолчанию текст во всех столбцах таблицы выравнивается по левому краю. Мы выровняем по правому краю все столбцы, кроме первого, чтобы цена и количество единиц товара лучше читались. Для этого мы воспользуемся селектором nth-child.
Селектор nth-child ищет дочерние элементы заданного элемента; по аналогии с nth-of-type, он может использовать ключевые слова или формулу. Формула определяется в виде an + b, где а — множитель, n — счётчик, начинающийся с 0, b — смещение. Принцип использования формул проще понять в контексте; давайте применим его в таблице.
Для выбора всех строк таблицы можно воспользоваться селектором вида:
table tr:nth-child(n)
В этом примере не указан ни множитель, ни смещение.
Все строки таблицы, кроме первой (строка с заголовками столбцов), выбираются при помощи селектора со смещением:
table tr:nth-child(n+2)
Счетчик равен 0, но со смещением 2, отсчёт начинается не от начала таблицы, а со второй строки.
Для выбора каждой второй строки таблицы используется множитель 2:
table tr:nth-child(2n)
Каждая третья строка выбирается при помощи множителя 3n.
Если прибавить к множителю смещение, то поиск будет начинаться не от начала таблицы, а с одной из следующих строк. Следующий селектор находит каждую вторую строку, начиная с четвертой:
table tr :nth-child(2n+4)
Итак, для выравнивания всех столбцов, кроме первого, используется следующая запись:
td:nth-child(n+2), th:nth-child(n+2){
text-align: right;
}
| Название | Цена | Количество | Итого |
|---|---|---|---|
| Кружка | $10.00 | 5 | $50.00 |
| Рубашка | $20.00 | 5 | $100.00 |
| Ножницы | $9.00 | 4 | $36.00 |
| Промежуточный итог | $186.00 | ||
| Доставка | $12.00 | ||
| Всего | $198.00 | ||
Хотите, чтобы нижняя строка выделялась жирным шрифтом? Воспользуемся селектором last-child, который находит последний дочерний элемент группы.
tr:last-child{
font-weight: bolder;
}
Выделим также последний столбец таблицы, чтобы суммы строк тоже выделялись на общем фоне:
td:last-child{
font-weight: bolder;
}
Наконец, при помощи селектора last-child можно увеличить размер шрифта общей суммы в правом нижнем углу таблицы. Мы находим последний столбец последней строки и изменяем его оформление.
tr:last-child td:last-child{
font-size:24px;
}
| Название | Цена | Количество | Итого |
|---|---|---|---|
| Кружка | $10.00 | 5 | $50.00 |
| Рубашка | $20.00 | 5 | $100.00 |
| Ножницы | $9.00 | 4 | $36.00 |
| Промежуточный итог | $186.00 | ||
| Доставка | $12.00 | ||
| Всего | $198.00 | ||
Если стоимость доставки снижена под действием скидки, то соответствующая строка таблицы должна выделяться цветом. Для быстрого поиска этой строки удобно использовать селектор nth-last-child. Вы уже видели, как селектор nth-child и формула аn+b используются для выбора конкретных дочерних элементов. Селектор nth-last-child работает практически так же, если не считать того, что он перебирает дочерние элементы в обратном порядке, начиная с последнего. Это позволяет легко найти предпоследний элемент группы.
Селектор определяет конкретный дочерний элемент — второй с конца.
tr:nth-last-child(2){
color: green;
}
В оформление таблицы осталось внести последний штрих. Ранее мы выровняли по правому краю все столбцы, кроме первого. Для строк с описаниями и ценами товаров такое выравнивание естественно, но последние три строки выглядят немного странно. Для них лучше использовать выравнивание по правому краю. Для решения этой задачи мы используем селектор nth-last-child с отрицательным множителем и положительным смещением.
tr:nth-last-child(-n+3) td{
text-align: right;
}
Такая формула реализует интервальный выбор. В ней используется смещение 3, а с селектором nth-last-child выбирается каждый элемент до заданного смещения. Если бы вместо него использовался селектор nth-child, то строки выбирались бы от начала таблицы.
| Название | Цена | Количество | Итого |
|---|---|---|---|
| Кружка | $10.00 | 5 | $50.00 |
| Рубашка | $20.00 | 5 | $100.00 |
| Ножницы | $9.00 | 4 | $36.00 |
| Промежуточный итог | $186.00 | ||
| Доставка | $12.00 | ||
| Всего | $198.00 | ||