Следующая группа относится к свойствам CSS для таблиц и стилей, даже если на вашем сайте они отсутвуют, то всё равно желательно применить некоторые свойтсва для корректного отображения веб-страниц. Выравнивание в таблице не ограничивается следующими свойствами, а дополняются уже изученными. Также и со списками, кроме специальных свойств, следует их дополнять и общими текстовыми правилами и позиционирования.
Свойства для таблицы
caption-side - специальное свойство для заголовка таблице, если он задан тегом <caption>. Значениями являются top - для установки заголовка вверху и bottom - для установки заголовка под таблицей.
caption-side: top;
empty-cells - свойство применяется для пустых ячеек и задает отображение её границ и фона. Существуют два параметра: show - для показа фона и границ и hide - для их скрытия.
empty-cells: show;
table-layout - для вычисления ширины ячеек в таблице, в зависимости от содержимого. Свойство задается параметрами: auto - в этом случае таблица загружается после анализа всех ячеек, и fixed - с этим параметром ширина определяется по тегу <col> или в зависимости от первой строки.
table-layout: auto;
Свойства list-style
list-style - это универсальное свойство для списков, с помощью которого можно установить стиль, положение и изображение обозначения списка.
list-style: disc outside none;
list-style-type - свойство, предназначенное для изменения вида маркета, которое в зависимости от вида списка имеет параметры:
- нумерованный список: decimal, lower-alpha, upper-roman, lower-greek и др.
- ненумерованный список: disc, circle, square
list-style-type: decimal;
list-style-position - для определения положения макета, относительно текста. Обозначается параметрами outside - когда маркет находится за пределами текстового блока, и inside - когда обозначение списка находится в пределах блока текста
list-style-position: inside;
list-style-image - в случае если необходимо установить определенное изображение для обозначения списка элементов, для отмены применяется параметр none.
list-style-image: url("/images/stories/img.jpeg");
