Оформление таблиц css: Готовые CSS стили для таблиц

Содержание

CSS оформление таблиц — ширина, высота, выравнивание, размер и другие параметры

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

width и height

Задают соответственно ширину и высоту таблицы. Без этих свойств параметры определяются автоматически и зависят от содержимого контейнера <table>. Значения устанавливаются в любых единицах длины CSS, но зачастую используются пиксели (px) и проценты (%). Последние настраивают ширину относительно родительского элемента, первые же задают абсолютную величину.

table {width: 450px; height: 80%;}

caption-side

Указывает, где будет размещён заголовок таблицы, описанный тегом <caption>. Свойству можно задавать значения:

top — расположить над таблицей.
bottom — разместить под таблицей.

Эксклюзивно для обозревателя Firefox доступны значения left (заголовок слева) и right (справа от таблицы), но другие браузеры их не понимают.

table {caption-side: top;}

border-collapse

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

Так рамки ячеек отображаются по умолчанию. Правило border-collapse: separate; даёт такой же эффект. Чтобы решить проблему, нужно объявить border-collapse: collapse; (результат показан на рисунке ниже).

border-spacing

Определяет расстояние между границами ячеек. Правило задаётся сразу для всей таблицы. Если значение одно, то оно установит расстояние и по горизонтали, и по вертикали. Если значения два, то первое задаст расстояние по горизонтали, второе — по вертикали. Свойство несовместимо с правилом table {border-collapse: collapse;}.

CSS-код

   table { 
    border: 4px double #FCA360;
    border-collapse: separate;
    border-spacing: 10px 20px;
   }
   td {
    padding: 3px;
    border: 1px solid #FCA360;
   }

Задаёт таблице следующее оформление:

empty-cells

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

show — показывать границы и фон (по умолчанию).
hide — скрыть их. Если все ячейки строки пусты, то будет скрыта, соответственно, вся строка. Если таблице задано правило border-collapse: collapse;, то свойство игнорируется.

table-layout

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

auto. Ширина определяется автоматически. При этом либо суммируется ширина всех столбцов, либо берётся значение свойства width, если таблице оно задано. Браузер сначала загружает таблицу, потом анализирует её, определяя ширину, и только после этого отображает.

fixed. Фиксированная ширина, которая определяется по первой строке.

Пример оформления таблицы

Не забывайте, что таблице можно задавать и другие универсальные правила, например, как мы это делали с высотой (height) и шириной (width).

Помня это, оформим несложную таблицу, частично прокомментировав код.

<!DOCTYPE html>
<html>
 <head>
  <title>border-collapse</title>
  <style>
   table {
    width: 50%;
    caption-side: bottom;
    border: 4px solid #006400;
    border-collapse: collapse;
    table-layout: fixed;
   }
   th {
    font-size: 13px;
    font-weight: bold;
    background: #ADFF2F;
    border-top: 4px solid #006400;
    border-bottom: 3px solid #FF8C00;
    color: #039;
    padding: 8px;
   }
   td {
    background: #E0FFFF;
    border-bottom: 1px solid #FF8C00;
    border-top: 1px solid transparent;
    padding: 8px;
   </style>
 </head>
 <body>   
  <table>
   <caption>Пример таблицы</caption>
   <tr> 
    <th>Цены</th><th>2014</th>
    <th>2015</th><th>2016</th>
   </tr>
   <tr> 
    <td>Хлеб</td><td>16</td>
    <td>18</td><td>21</td>
   </tr>
   <tr> 
    <td>Сахар</td><td>35</td>
    <td>44</td><td>50</td>
   </tr>
   <tr> 
    <td>Соль</td><td>8</td>
    <td>8,50</td><td>9</td>
   </tr>
  </table> 
 </body>
</html>

В браузере таблица будет выглядеть, как показано ниже.

width: 50%;

Задаём ширину таблицы в половину от родительской. 50% берётся от ширины контейнера <body>, потому что других родителей у неё нет. То есть таблица будет занимать ровно половину окна браузера.

caption-side: bottom;

Размещаем заголовок снизу, под таблицей.

border: 4px solid #006400;

Задаём таблице цветную рамку толщиной 4 пикселя.

border-collapse: collapse;

Объединяем границы ячеек.

table-layout: fixed;

Настраиваем способ определения браузером ширины таблицы.

font-size: 13px;

Задаём размер шрифта заглавных ячеек.

font-weight: bold;

Делаем текст внутри них жирным.

background: #ADFF2F;

Устанавливаем цвет фона ячеек.

border-top: 4px solid #006400; border-bottom: 3px solid #FF8C00;

Настраиваем верхние и нижние рамки.

color: #039;

Определяем цвет текста.

padding: 8px;

Задаём расстояние от содержимого ячеек до их границ равным восьми пикселям.

Полезные ссылки:

Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
Вёрстка сайта с нуля 2.0 — полноценный платный курс;
Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

Красивое оформление таблиц на CSS

Здравствуй, уважаемый читатель.

Это четырнадцатый урок изучения CSS. В это уроке вы узнаете как оформлять таблицы и как работать с отдельными элементами таблицы.

Перед изучением данного урока пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты
Урок 6. Оформление текста
Урок 7. Рамки
Урок 8. Оформление списков
Урок 9. Наследование
Урок 10. Блочная модель
Урок 11. Высота и ширина блока
Урок 12. Конфликты полей
Урок 13. Работа с изображениями. Часть 1
Урок 13. Работа с изображениями. Часть 2

Как вы уже помните таблица строится в html с помощью тегов <table>, <tr> и <td>(И при необходимости <th>).

Оформление таблицы

Для того чтобы задать свойство для элемента нам необходим селектор. Этим селектором могут выступать такие теги как table, tr

, td, th, так и всевозможные раннее изученные селекторы class и id. Рассмотрим на примере:

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style. css">
</head>
<body>
    <div>
        <table>
            <tr>
                <td>iaculis</td>
                <td>adipiscing</td>
                <td>pretium</td>
                <td>egestas</td>
            </tr>
            <tr>
                <td>placerat</td>
                <td>luctus</td>
                <td>tristique</td>
                <td>dignissim</td>
            </tr>
            <tr>
                <td>dictum</td>
                <td>tincidunt</td>
                <td>velit</td>
                <td>mauris</td>
            </tr>
        </table>
    </div>
</body>
</html>

А сейчас придадим какое-нибудь оформление нашей таблице в CSS:

table{
    border-collapse:collapse; /* убираем двойную границу между ячейками */
}
 
td, th{
    padding:10px; /* внутренние отступы для тега заголовка(th) таблицы и ячейки(td) в 10 пикселей(px) */
    border:1px solid #cccccc; /* серая граница для тега заголовка и ячейки */
}
 
th{
    background-color:#C1D3FF; /* голубой цвет фона заголовка(th) */
}

Как таблица выглядела до применения свойств и после:

Здесь вы наверное заметили новое свойство border-collapse. Оно отвечает за вид границы ячейки. Если его не задавать значению collapse вы увидите двойную рамку между ячейками. А таблица с одной рамкой между ячейками имеет более приятный вид, но вы можете убрать данное свойство и посмотреть что получится.

Все ячейки(td) могут иметь как ширину, так и высоту, которые мы задавали через свойства width(ширина) и height(высота). То есть таблица это обычный контейнер похожий на <div>. Но дело в том, что блок <div> более гибкий. Хотя раньше страницы верстались с помощью таблиц, но данная технология давно устарела и не используется. Но я помню как свой первый сайт верстал именно на таблицах :).

Успехов вам в освоении таблиц!

Больше практикуйтесь!

table-layout — CSS: Каскадные таблицы стилей

Свойство CSS table-layout задает алгоритм, используемый для размещения

ячеек, строк и столбцов.

 /* Значения ключевых слов */
раскладка таблицы: авто;
макет таблицы: фиксированный;
/* Глобальные значения */
макет таблицы: наследовать;
макет таблицы: начальный;
макет таблицы: вернуться;
макет таблицы: обратный слой;
макет таблицы: не установлен;

Значения

авто

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

фиксированный

Ширина таблицы и столбца задается шириной элементов

table и col или шириной первой строки ячеек. Ячейки в последующих строках не влияют на ширину столбца.

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

Initial value	`auto`
Applies to	`table` and `inline-table` elements
Inherited	no
Computed value	as specified
Тип анимации	дискретный

 table-layout = 
 auto | 
 фиксированный

Таблицы фиксированной ширины с переполнением текста

В этом примере используется макет фиксированной таблицы в сочетании со свойством width для ограничения ширины таблицы. Свойство text-overflow используется для добавления многоточия к слишком длинным словам. Если бы макет таблицы был auto , таблица увеличилась бы, чтобы вместить ее содержимое, несмотря на указанные ширина .

HTML

 <таблица>
  
    Эд
    Дерево
  
  
    Альберт
    Швейцер
  
  
    Джейн
    Фонда
  
  
    Уильям
    Шекспир

CSS

 таблица {
  макет таблицы: фиксированный;
  ширина: 120 пикселей;
  граница: 1px сплошной красный;
}
тд {
  граница: 1px сплошной синий;
  переполнение: скрыто;
  пробел: nowrap;
  переполнение текста: многоточие;
}

РЕЗУЛЬТАТ

Спецификация

Стиль каскадного стиля. Включите JavaScript для просмотра данных.

<таблица>

Обнаружили проблему с содержанием этой страницы?

Отредактируйте страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена 21 февраля 2023 г. участниками MDN.

Свойство макета таблицы CSS

❮ Предыдущий Полное руководство по CSS Далее ❯

Пример

Установить различные алгоритмы верстки таблицы:

table.a {
раскладка таблицы: авто;
ширина: 180 пикселей;
}

таблица.b {
макет таблицы: зафиксированный;
ширина: 180 пикселей;
}

Попробуйте сами »

Определение и использование

Свойство table-layout определяет алгоритм используется для разметки ячеек таблицы, строк и столбцов.

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

Показать демо ❯

Значение по умолчанию:	авто
Унаследовано:	нет
Анимация:	нет. Читать о анимированном
Версия:	CSS2
Синтаксис JavaScript:	объект .style.tableLayout=»fixed» Попробуй

Поддержка браузера

Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает это свойство.

Собственность
таблица-макет	14,0	5,0	1,0	1,0	7,0

Синтаксис CSS

table-layout: auto|fixed|initial|inherit;

Значения свойств

Значение	Описание	Демо
авто	Браузеры используют алгоритм автоматической компоновки таблиц. Ширина столбца задается самым широким неразрывным содержимым в ячейках. Контент определяет макет	Демонстрация ❯
фиксированный	Устанавливает фиксированный алгоритм компоновки таблицы. Ширина таблицы и столбца установлена по ширине таблицы и столбца или по ширине первой строки ячеек. Ячейки в других строках не влияют на ширину столбцов. Если ширины нет в первой строке ширина столбцов делится поровну по всей таблице, независимо от содержимого внутри ячеек	Демонстрация ❯
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о начальный
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Связанные страницы

Учебник по CSS: Таблица CSS

Ссылка на HTML DOM: свойство tableLayout

❮ Предыдущая Полное руководство по CSS Далее ❯

ВЫБОР ЦВЕТА

Лучшие учебники

Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

Оставить комментарий

Штирлиц — Сеть печатных салонов в Перми