Выравнивание текста в css таблице: Выравнивание содержимого в ячейках — Знакомство с таблицами — HTML Academy

CSS: Таблицы

Свойство caption-side

Свойство caption-side

Свойство caption-side позволяет задать местоположение тега caption, используемого в таблицах. Свойство применимо к любому тегу с display: caption-side.


table {
    caption-side: top;
}

Значения:

  • top — подпись сверху таблицы (по умолчанию)
  • bottom — подпись снизу таблицы
  • inherit — значение наследуется от значения caption-side родительского элемента

В Bootstrap подпись по умолчанию выводится снизу.

Свойство 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>Коты</caption>

Надпись Коты выводится сверху (top). Это значение по умолчанию.

Коты
Барсик
Мурзик
Васька

Надпись Коты выводится снизу (bottom).

Коты
Барсик
Мурзик
Васька

В CSS3 появились удобные средства для улучшения стилевых таблиц печати и разбиения контента на столбцы.

  • :nth-of-type [p:nth-of-type(2n+l){color: red;}] — Поиск всех элементов определенного типа.
  • :first-child [р: first-child{ color: blue;}] — Поиск первого дочернего элемента.
  • :nth-child [p:nth-child(2n+l){color: red;}] — Поиск заданного дочернего элемента в прямом направлении (от начала к концу).
  • :last-child [p:last-child{color:blue;}] — Поиск последнего дочернего элемента.
  • :nth-last-child [p:nth-last-child(2){color: red;}] — Поиск заданного дочернего элемента в обратном направлении.
  • :first-of-type [p:first-of-type{color:blue;}] — Поиск первого элемента заданного типа.
  • :last-of-type [р:last-of-type{color:blue;}]
    — Поиск последнего элемента заданного типа.

Поддержка столбцов

  • [#content{ column-count: 2; column-gap: 20рх; column-rule: lpx solid #ddccb5; }] — Разбиение области контента на несколько столбцов.
  • :after [span.weight:after { content: «lbs»; color: #bbb; }] — Используется с content для вставки контента после заданного элемента.
  • [media=»only all and (max-width: 480)»] — Применение стилей в зависимости от параметров устройства.

Создадим простую таблицу без стилей. Она будет выглядеть так.

Название Цена Количество Итого
Кружка $10.00 5 $50.00
Рубашка $20.00 5 $100.00
Ножницы $9.00 4 $36.00
Промежуточный итог $186.00
Доставка $12.00
Всего $198.00

Зебра (:nth-of-type)

Эффект зебры (чередование цвета строк) полезен тем, что упрощает просмотр данных по строкам. Раньше в строку таблицы приходилось включать дополнительные классы (например, 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-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)

Хотите, чтобы нижняя строка выделялась жирным шрифтом? Воспользуемся селектором 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-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
Реклама

Параметры таблиц | Параметры отступов и рамок

Рассмотрим некоторые параметры таблиц, применяемые при создании таблиц на Web-странице.

Параметры выравнивания

Для выравнивания содержимого ячеек таблицы по горизонтали мы применим атрибут стиля text-align, описанный в главе 9:

TD, TH { text-align: center }

Этот же атрибут стиля пригоден для выравнивания текста в заголовке таблицы (теге <CAPTION>):

CAPTION { text-align: left }

Содержимое ячеек таблиц по вертикали мы выровняем с помощью атрибута стиля vertical-align:

vertical-align: baseline|sub|super|top|text-top|middle|bottom|

text-bottom|<промежуток между базовыми линиями>|inherit

Применительно к другим элементам Web-страниц он был описан в главе 8, но в случае ячеек таблиц ведет себя несколько по-другому.

— top — выравнивает содержимое ячейки по ее верхнему краю (обычное поведение).

— middle — выравнивает содержимое ячейки по ее центру.

— bottom — выравнивает содержимое ячейки по ее нижнему краю.

Остальные значения этого атрибута стиля действуют так же, как и для других элементов Web-страниц (см. главу 8):

TD, TH { vertical-align: middle }

Параметры отступов и рамок

 

Параметры таблиц — параметры отступов и рамок.

Для задания отступов мы можем пользоваться атрибутами стиля, знакомыми нам по главе 11.

— Для задания внутренних отступов между содержимым ячейки и ее границей — атрибутами стиля padding-left, padding-top, padding-right, padding-bottom и padding.

— Для задания внешних отступов между границами соседних ячеек — атрибутом стиля border-spacing.

Параметры рамок зададим через соответствующие атрибуты стиля, которые также знакомы нам по главе 11 (листинг 12. 1).

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

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

Однако в печатных изданиях гораздо чаще встречаются таблицы другого вида. В них рамки присутствуют только между ячейками (рис. 12.2).

Атрибут стиля border-collapse указывает Web-обозревателю, как будут рисоваться рамки ячеек в таблице:

border-collapse: collapse|separate|inherit

— separate — каждая ячейка таблицы заключается в отдельную рамку (см. рис. 12.1). Это обычное поведение.

— collapse — рисуются рамки, разделяющие ячейки таблицы (см. рис. 12.2).

Данный атрибут стиля применяется только к самим таблицам (тегам <TABLE>).

Пример:

TABLE { border-collapse: collapse }

Параметры размеров

 

К параметрам таблиц относятся и параметры размеров.

Для задания размеров — ширины и высоты — таблиц и их ячеек подойдут атрибуты стиля width и height, описанные в главе 10.

— Если требуется задать ширину или высоту всей таблицы, нужный атрибут стиля указывают именно для нее:

TABLE { width: 100%;
height: 300px }

— Если требуется задать ширину столбца, атрибут стиля width указывают для первой ячейки, входящей в этот столбец (листинг 12.2).

— Если требуется задать высоту строки, атрибут стиля height указывают для первой ячейки этой строки (листинг 12.3).

Обычно все размеры, которые мы зададим для таблицы и ее ячеек, — не более чем рекомендация для Web-обозревателя. Если содержимое таблицы не будет в ней помещаться, Web-обозреватель увеличит ширину или высоту таблицы. Зачастую это может быть неприемлемо, поэтому стандарт CSS предусматривает средства, позволяющие изменить такое поведение Web-обозревателя.

Атрибут стиля table-layout позволяет указать, как Web-обозреватель будет трактовать размеры, заданные нами для таблицы и ее ячеек:

table-layout: auto|fixed|inherit

— auto — Web-обозреватель может изменить размеры таблицы и ее ячеек, если содержимое в них не помещается. Это обычное поведение.

— fixed — размеры таблицы и ее ячеек ни в коем случае изменяться не будут. Если содержимое в них не помещается, возникнет переполнение, параметры которого мы можем задавать с помощью атрибутов стиля overflow, overflow-x и overflow-y (см. главу 10).

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { table-layout: fixed;
overflow: auto }

Прочие параметры таблиц


Атрибут стиля caption-side указывает местоположение заголовка таблицы относительно самой таблицы:

caption-side: top|bottom|inherit

— top — заголовок располагается над таблицей (обычное поведение).

— bottom — заголовок располагается под таблицей.

Данный атрибут стиля применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { caption-side: bottom }

Атрибут стиля empty-cells указывает, как Web-обозреватель должен выводить на экран пустые (не имеющие содержимого) ячейки:

empty-cells: show|hide|inherit

— show — пустые ячейки будут выводиться на экран. Если для них был задан другой фон, на экран будет выведен фон, а если заданы рамки, будут выведены рамки.

— hide — пустые ячейки не будут выводиться на экран.

Обычное поведение зависит от Web-обозревателя, так что, если это критично, лучше явно задать нужное значение атрибута стиля empty-cells.

Атрибут стиля empty-cells также применяется к самой таблице (тегу <TABLE>).

Пример:

TABLE { empty-cells: hide }

Представление для нашего Web-сайта


Применим наши знания по параметрам таблиц. Поработаем над нашей единственной таблицей — списком версий HTML. Сделаем ее более удобочитаемой.

Сначала, как обычно, сформулируем перечень ее параметров.

— Внешние отступы сверху и снизу таблицы — 10 пикселов. Пусть таблица будет визуально отделена от «соседей».

— Рамка вокруг самой таблицы — тонкая, сплошная, цвет #B1BEC6.

— Будут выводиться только рамки, разделяющие ячейки. Таблицы с такими рамками более привычны.

— Внутренние отступы в ячейках — 2 пиксела.

— Рамки ячеек — тонкие, точечные, цвет #B1BEC6.

— Выравнивание текста заголовка таблицы — по левому краю.

Осталось написать CSS-код. Листинг 12.4 содержит исправленный фрагмент таблицы стилей main.css.

Здесь мы дополнили стиль переопределения тега <TABLE> и создали стили переопределения тегов <TD>, <TH> и <CAPTION>. Они столь просты, что не требуют комментариев.

Сохраним таблицу стилей main. css и откроем Web-страницу index.htm в Web-обозревателе. И полюбуемся на таблицу. Рамки и отступы явно пошли ей на пользу.

Закончим о параметрах таблиц.

html — Выравнивание текста в таблице с помощью CSS

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

Вот HTML:

 <таблица>
 Предыдущий:Ссылка 1
 Далее:Ссылка 2

 

Как мне это сделать?

  • html
  • css
  • html-table

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

CSS

 .alignright { text-align: right; }
.alignleft { выравнивание текста: по левому краю; }
 

HTML

  
<тд> 
 

Можно пойти дальше, добавив отступы, поля и дополнительные классы. В зависимости от вашего TABLE css вам может потребоваться добавить некоторые отступы, чтобы не все ячейки были заполнены: 0 и не отображали какое-либо выравнивание.

0

Вы можете либо использовать :first-child для нацеливания на ячейки в первом столбце:

 td {
    выравнивание текста: по левому краю;
}
td: первый ребенок {
    выравнивание текста: вправо;
}
 

Но :first-child : не работает в IE 6, поэтому вы можете добавить класс к ячейкам в первом столбце и использовать его вместо этого:

 

тд {
    выравнивание текста: по левому краю;
}
тд.первый {
    выравнивание текста: вправо;
}
 

Как написано, это будет применяться ко всем элементам

Предыдущий:Ссылка 1
Далее:Ссылка 2
, поэтому вы также можете добавить класс в свою таблицу и ограничить стили до s в этой таблице:

 

table. simple тд {
    выравнивание текста: по левому краю;
}
table.simple td.first {
    выравнивание текста: вправо;
}
 

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

Предыдущий:Ссылка 1
Далее:Ссылка 2
во втором столбце на , и тогда CSS будет очень простым:

 td { text-align:right; }
th { выравнивание текста: по левому краю; }
 

1

установить разные классы для каждого элемента td