Стилизация таблиц
Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.
| Необходимые знания: | Базовый HTML (Введение в HTML), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (Введение в CSS). |
|---|---|
| Цель: | Научиться эффективно стилизовать HTML таблицы. |
Типичная HTML таблица
Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:
table> caption> A summary of the UK's most famous punk bands caption> thead> tr> th scope="col">Bandth> th scope="col">Year formedth> th scope="col">No. of Albumsth> th scope="col">Most famous songth> tr> thead> tbody> tr> th scope="row">Buzzcocksth> td>1976td> td>9td> td>Ever fallen in love (with someone you shouldn't've)td> tr> tr> th scope="row">The Clashth> td>1976td> td>6td> td>London Callingtd> tr> . some rows removed for brevity tr> th scope="row">The Stranglersth> td>1974td> td>17td> td>No More Heroestd> tr> tbody> tfoot> tr> th scope="row" colspan="2">Total albumsth> td colspan="2">77td> tr> tfoot> table>
Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как scope (en-US) , , (en-US), (en-US) и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь punk-bands-unstyled.html):
Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.
Активное обучение: Стилизация таблицы
В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.
- В начале необходимо сделать копию sample markup, загрузить оба изображения (noise и leopardskin), и вставить эти файлы в отдельную папку на вашем компьютере.
- Следующее, это создать новый файл style.css и сохранить его в той же папке вместе с другими файлами.
- Подключить CSS в HTML для этого разместить следующую строку в HTML внутри :
link href="style.css" rel="stylesheet" type="text/css" />
Отступы и разметка
Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш style.css файл:
/* spacing */ table table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; > thead th:nth-child(1) width: 30%; > thead th:nth-child(2) width: 20%; > thead th:nth-child(3) width: 15%; > thead th:nth-child(4) width: 35%; > th, td padding: 20px; >
Наиболее важные части следующие:
- Свойство table-layout (en-US) со значением fixed как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда table-layout: fixed , размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора thead th:nth-child(n) ( :nth-child ) («Выберите n-ый дочерний элемент (en-US) в последовательности, внутри элемента (en-US)«) и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье Fixed Table Layouts. Мы также использовали width 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
- Свойство border-collapse (en-US) со значением collapse это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже:
Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить border-collapse: collapse; рамки схлопываются в одну и так выглядит намного лучше: 
- Мы установили border вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
- Мы установили padding на элементах (en-US) и — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.
На этом этапе наша таблица выглядит уже гораздо лучше:
Немного простой типографики
Теперь мы ещё кое-что изменим.
Во-первых, мы пойдём и найдём на Google Fonts шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный элемент и изменить объявление font-family на выбранный вами Google Fonts шрифт.
link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css" />
Затем добавьте следующий CSS в ваш style.css файл, ниже предыдущего кода:
/* typography */ html font-family: "helvetica neue", helvetica, arial, sans-serif; > thead th, tfoot th font-family: "Rock Salt", cursive; > th letter-spacing: 2px; > td letter-spacing: 1px; > tbody td text-align: center; > tfoot th text-align: right; >
Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:
- Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов (en-US) и , который подходит нам по тематике панков.
- Мы добавили немного letter-spacing в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
- Мы выравниваем по центру текст ячейках внутри (en-US) чтобы они совпадали с заголовками. По умолчанию у ячеек свойство text-align имеет значение left , а заголовки значение center , но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
- Мы выровняли заголовок справа внутри так чтобы он визуально ассоциировался с соответствующими ему данными.
В результате таблица выглядит немного аккуратнее:
Графика и цвета
И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.
Следующий шаг это добавить следующий CSS в ваш style.css файл в самом низу:
thead, tfoot < background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; >thead th, tfoot th, tfoot td
Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.
Мы добавили background-image в (en-US), и изменили color (en-US) для всего текста внутри header и footer на белый (и ещё text-shadow ) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.
Полосатая зебра
Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать полосы зебры — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш style.css файл:
tbody tr:nth-child(odd) background-color: #ff33cc; > tbody tr:nth-child(even) background-color: #e495e4; > tbody tr background-image: url(noise.png); > table background-color: #ff33cc; >
- Ранее вы видели как :nth-child селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула 2n-1 выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула 2n выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова odd и even , которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.
- Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный .png с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
- И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор :nth-child .
Этот взрыв цвета выглядит следующим образом:
То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.
Стилизация заголовка
Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл style.css :
caption font-family: "Rock Salt", cursive; padding: 20px; font-style: italic; caption-side: bottom; color: #666; text-align: right; letter-spacing: 1px; >
Здесь нет ничего особенного, кроме свойства caption-side (en-US), которое имеет значение bottom . В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке punk-bands-complete.html):
Активное обучение: Стилизация вашей собственной таблицы
Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.
Стилизация таблицы быстрые советы
Короткий список наиболее полезных вещей рассмотренных выше:
- Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
- Используйте table-layout (en-US) : fixed для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину width для заголовков таблицы ( (en-US)).
- Используйте border-collapse (en-US) : collapse , которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
- Используйте (en-US), (en-US) и чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
- Используйте полоски зебры, чтобы облегчить чтение между строк.
- Используйте text-align чтобы выровнять текст в (en-US) и для более аккуратного и удобного оформления.
Заключение
Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.
В этом блоке
- Box model recap
- Backgrounds
- Borders
- Стилизация таблиц
- Advanced box effects
- Creating fancy letterheaded paper (en-US)
- A cool looking box (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Изменение вида таблицы
Применение предопределенного стиля таблицы — это быстрый и простой способ изменить внешний вид таблицы в PowerPoint.
Стиль таблицы — это сочетание параметров форматирования, включая цвет и необязательное заливку. Сочетания цветов являются производными от цвета темы презентации. К любой создаваемой таблице автоматически применяется стиль таблицы.
Применение стиля таблицы
- Щелкните таблицу, к которой нужно применить новый или другой стиль.
- На ленте выберите вкладку Конструктор таблиц , чтобы просмотреть коллекцию Стилей таблиц, как показано ниже. а затем выберите нужный стиль таблицы. Чтобы просмотреть другие стили таблиц, щелкните стрелку раскрывающегося списка Дополнительно справа от коллекции Стилей таблиц .
Примечание: Чтобы изменить внешний вид текста в таблице, выделите весь текст в таблице, а затем перейдите на вкладку Главная и с помощью параметров Шрифт измените текст.
Отмена стиля таблицы
- Выделите таблицу.
- На ленте выберите вкладку Конструктор таблиц .
- Щелкните стрелку раскрывающегося списка Дополнительно в правой части коллекции Стили таблиц , а затем в нижней части нажмите кнопку Очистить таблицу.
Как изменить стиль таблицы
Вид таблицы определяется заданным для нее стилем. Можно использовать стиль таблиц СТАНДАРТ, предлагаемый по умолчанию, или создать свои собственные стили таблиц.
При создании нового стиля таблиц можно указать начальную таблицу. Начальная таблица — это таблица на чертеже, которая служит примером при задании формата нового стиля таблиц. После выбора таблицы можно указать компоненты структуры и содержимого, которые требуется скопировать из этой таблицы в стиль таблиц.
Можно создать стили ячеек и применить их к стилю таблиц при вставке новой таблицы. В стиле таблицы можно для каждого типа строк задать отдельный стиль ячеек; в этом случае строки разных типов будут различаться по способу выравнивания, а также по внешнему виду столбцов и линий сетки. Эти стили ячеек задаются при вставке таблицы. Например, стиль таблиц «СТАНДАРТ» содержит стиль ячеек, в котором ячейки объединены, а текст выровнен по центру. Для ячейки первой строки таблицы можно задать стиль ячеек с именем «Название». В этом случае вверху новой таблицы создается строка названия.
Данные в таблице могут располагаться сверху вниз или снизу вверх. Число столбцов и строк практически не ограничено.
Свойства границы, заданные в стиле ячеек таблицы, определяют отображение линий сетки, разделяющих таблицу на ячейки. Границы строки заголовка таблицы, строки заголовков столбцов и строк данных могут иметь различные вес линий и цвет и могут отображаться или не отображаться. При выборе вариантов отображения границ соответствующим образом обновляется образец стиля ячейки в правом нижнем углу таблицы.
Внешний вид текста в ячейках таблицы определяется стилем текста, заданным в текущем стиле ячеек. Можно применить любой текстовый стиль из имеющихся в чертеже или создать новый. С помощью Центра управления можно также копировать стили таблиц из других чертежей.
Для любого стиля ячеек в пределах стиля таблиц можно задать данные и формат. Также имеется возможность переназначить данные и форматирование для определенных ячеек. Например, можно при задании форматирования для всех строк, относящихся к заголовку столбца, выбрать отображение текста в верхнем регистре, а затем выбрать одну ячейку таблицу и задать для нее отображение текста в нижнем регистре. Тип отображаемых в строке данных и формат данных этого типа определяются значениями параметров форматирования, выбранными в диалоговом окне «Формат ячейки таблицы» .
Процедура задания или изменения стиля таблиц
- Перейдите на вкладку «Главная» панель «Аннотации» «Стиль таблиц» . В командной строке введите «таблстиль».
- Выберите стиль таблиц, содержащий стиль ячеек, который требуется изменить, или выберите «Создать» для создания нового стиля таблиц.
- В диалоговом окне «Стиль таблицы» в раскрывающемся списке «Стили ячеек» выберите стиль ячеек, который требуется изменить, или создайте новый стиль ячеек путем нажатия кнопки справа от ниспадающего списка.
- Нажмите «ОК».
Процедура создания стиля таблиц на основе существующей таблицы
- Выберите таблицу, указав линию ее сетки.
- Щелкните правой кнопкой мыши и выберите «Стиль таблицы» «Сохранение в качестве нового стиля таблиц».
Процедура создания стиля ячеек на основе существующей ячейки
- Щелкните в ячейке, на основе которой требуется создать стиль ячеек.
- Щелкните правой кнопкой мыши и выберите «Стиль ячеек» «Сохранение нового стиля ячеек».
Применение к таблице нового стиля
- Выберите таблицу, указав линию ее сетки.
- Щелкните правой кнопкой мыши и выберите «Стиль таблиц».
- В подменю «Стиль таблицы» выберите стиль таблиц из списка. Новый стиль таблиц будет применен к таблице.
Примечание Если предыдущий стиль таблиц имел строку заголовка, а новый нет, то текст заголовка будет помещен в первую ячейку таблицы, а другие ячейки в первой строке останутся пустыми.
Краткий справочник
Поиск указанного пользователем текста с возможностью замены его другим текстом.
Вставка блока или чертежа в текущий чертеж.
Отображение свойств для выбранных объектов.
Создание многострочного текстового объекта.
Орфографическая проверка надписей в чертеже.
Создание пустого объекта-таблицы.
Редактирование текста в ячейках таблиц.
Экспорт данных таблицы в файл формата CSV.
Создание, изменение или определение стилей таблиц.
Обновление полей в выбранных объектах чертежа вручную.
Системные переменные
Определение имени текущего стиля таблицы.
Управляет отображением полей на сером фоне.
Управляет методом обновления полей.
Таблица. Как изменить стиль таблицы в HTML?
Для изменения стиля вашей таблицы в HTML, необходимо применить правильные атрибуты к тегам table, tr и td, то есть к самой таблице, ее строкам и ячейкам.
| Атрибут | Описание атрибута | Значения атрибута | Описание значения атрибута |
| align | Задает выравнивание таблицы по-ширине, относительно окна браузера или относительно блока, в котором размещена таблица | left | Выравнивает таблицу по левому краю, значение по-умолчанию |
| center | Выравнивает таблицу по центру | ||
| right | Выравнивает таблицу по правому краю | ||
| background | Указывает путь к файлу с изображением, которое будет использоваться для фона всей таблицы. Обратите внимание, что фоновая картинка устанавливается в масштабе 100% от ее реального размера, а в случаю, когда размер картинки меньше размера таблицы, картинка будет повторяться, чтобы покрыть всю площадь таблицы | Можно использовать и относительный и абсолютный путь к файлу | |
| bgcolor | Устанавливает цвет фона таблицы | Цвет по-умолчанию обычно белый | |
| border | Устанавливает толщину рамки таблицы в пикселах, допустимо указывать любое целое положительное число | По-умолчанию значение «0» | |
| bordercolor | Устанавливает цвет рамки таблицы | Значение по-умолчанию зависит от установленного у пользователя браузера и операционной системы | |
| cellpadding | Устанавливает расстояние от рамки до содержимого ячейких, допустимо указывать любое целое положительное число в пикселах или в процентах от доступного пространства | По-умолчанию значение «0» | |
| cellspacing | Устанавливает расстояние между внешними границами ячеек, допустимо указывать любое целое положительное число в пикселах | По-умолчанию значение: «0» (когда нет атрибута border); «2» (когда атрибут border установлен). |
|
| cols | Устанавливает количество столбцов в таблице | Вспомогательный атрибут, помогающий браузеру быстрее отобразить таблицу, не дожидаясь пока все содержимое таблицы будет подгружено | |
| frame | Задает значения для отображения в браузере границы вокруг таблицы | void | Не отрисовывать границы вокруг таблицы |
| border | Отрисовывать границу вокруг таблицы, значение по-умолчанию | ||
| above | Отрисовывать границу по верхнему краю таблицы | ||
| below | Отрисовывать границу снизу таблицы | ||
| hsides | Отрисовывать только горизонтальные границы сверху и снизу таблицы | ||
| vsides | Отрисовывать только вертикальные границы справа и слева таблицы | ||
| rhs | Отрисовывать границу только по правой стороне таблицы | ||
| lhs | Отрисовывать границу только по левой стороне таблицы | ||
| rules | Задает значения для отображения в браузере границ между ячейками таблицы | all | Граница отрисовывается вокруг каждой ячейки, значение по-умолчанию (если значение атрибута border отлично от нуля) |
| groups | Граница отрисовывается между группами, которые образуются тегами , , , или . | ||
| cols | Отрисовывать границу только между колонками таблицы | ||
| none | Границы не отрисовываются, значение по-умолчанию (если border=»0″) | ||
| rows | Границы отрисовываются только между строками таблицы, созданными через тег | ||
| width | Задает ширину таблицы, допустимо указывать любое целое положительное число в пикселах или в процентах от доступного пространства | По-умолчанию, ширина таблицы вычисляется автоматически на основе содержимого таблицы | |
Ячейка1 Ячейка2 Ячейка3 Ячейка4
| Ячейка1 | Ячейка2 |
| Ячейка3 | Ячейка4 |
| Атрибут | Описание атрибута | Значения атрибута | Описание значения атрибута |
| align | Задает выравнивание содержимого всех ячеек данной строки по-горизонтали | left | Выравнивает содрежимое ячеек по левому краю, значение по-умолчанию |
| center | Выравнивает содрежимое ячеек строки по центру | ||
| right | Выравнивает содрежимое ячеек строки по правому краю | ||
| justify | Выравнивает содрежимое ячеек строки по-ширине (и по левому, и по правому краю ячейки) | ||
| bgcolor | Устанавливает цвет фона ячеек строки | Цвет по-умолчанию обычно белый | |
| bordercolor | Устанавливает цвет рамки ячеек строки | Значение по-умолчанию зависит от установленного у пользователя браузера и операционной системы | |
| valign | Задает выравнивание содержимого всех ячеек данной строки по-вертикали | top | Выравнивает содрежимое ячеек по верхнему краю строки |
| middle | Выравнивает содрежимое ячеек по середине строки, значение по-умолчанию | ||
| bottom | Выравнивает содрежимое ячеек по нижнему краю строки | ||
Ячейка1 Ячейка2 Ячейка3 Ячейка4
| Ячейка1 | Ячейка2 |
| Ячейка3 | Ячейка4 |
| Атрибут | Описание атрибута | Значения атрибута | Описание значения атрибута |
| align | Задает выравнивание содержимого ячейки по-горизонтали | left | Выравнивает содрежимое ячейки по левому краю, значение по-умолчанию |
| center | Выравнивает содрежимое ячейки по центру | ||
| right | Выравнивает содрежимое ячейки по правому краю | ||
| justify | Выравнивает содрежимое ячейки по-ширине (и по левому, и по правому краю ячейки) | ||
| background | Указывает путь к файлу с изображением, которое будет использоваться для фона ячейки. Обратите внимание, что фоновая картинка устанавливается в масштабе 100% от ее реального размера, а в случаю, когда размер картинки меньше размера ячейки, картинка будет повторяться, чтобы покрыть всю площадь ячейки | Можно использовать и относительный и абсолютный путь к файлу | |
| bgcolor | Устанавливает цвет фона ячейки | Цвет по-умолчанию обычно белый | |
| bordercolor | Устанавливает цвет рамки вокруг ячейки | Значение по-умолчанию зависит от установленного у пользователя браузера и операционной системы | |
| colspan | Устанавливает число ячеек, которые должны быть объединены по-горизонтали | Указывается целое положительное число, но не более 999 | |
| height | Устанавливает высоту ячейки, допустимо указывать любое целое положительное число в пикселах или в процентах от доступного пространства | Если содержимое ячейки выше указанного значения, то данный параметр игнорируется | |
| rowspan | Устанавливает число ячеек, которые должны быть объединены по-вертикали | Указывается целое положительное число, но не более 65534 | |
| valign | Задает выравнивание содержимого ячейки по-вертикали | top | Выравнивает содрежимое ячейки по верхнему краю строки |
| middle | Выравнивает содрежимое ячейки по середине строки, значение по-умолчанию | ||
| bottom | Выравнивает содрежимое ячейки по нижнему краю строки | ||
| width | Задает ширину ячейки, допустимо указывать любое целое положительное число в пикселах или в процентах от доступного пространства | По-умолчанию, ширина ячейки вычисляется автоматически на основе содержимого | |
Ячейка1 Ячейка2 Ячейка3
| Ячейка1 | Ячейка2 |
| Ячейка3 | |