Страница не найдена (ошибка 404)
PHP
|
|
Недвижимости на PHP
Картах из MySQL+PHP
xmlHTML/CSS
|
|
jsonJS/jQuery
htaccess
Bootstrap
Программы
Разное
Справочники
|
|
ru, Яндекс, GmailCSS оформление таблиц — ширина, высота, выравнивание, размер и другие параметры
Про 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 — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
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 для просмотра данных.-
<таблица>
Последнее изменение: , участниками MDN
Свойство CSS table-layout
❮ Предыдущий
Полное руководство по CSS
Далее ❯
Пример
Установка различных алгоритмов верстки таблицы:
table.a {
раскладка таблицы: авто;
ширина: 180 пикселей;
}
table.b {
макет таблицы:
исправлено;
ширина: 180 пикселей;
}
Попробуйте сами »
Определение и использование
Свойство table-layout определяет алгоритм
используется для разметки ячеек таблицы, строк и столбцов.
Подсказка: Основное преимущество макета таблицы: фиксированный; это что
таблица рендерится намного быстрее. На больших таблицах пользователи не увидят ни одной части
table до тех пор, пока браузер не отобразит всю таблицу. Итак, если вы используете
table-layout: исправлено, пользователи будут видеть верхнюю часть таблицы во время загрузки браузера
и отображает остальную часть таблицы. Создается впечатление, что страница загружает
намного быстрее!
Показать демо ❯
Итак, если вы используете
table-layout: исправлено, пользователи будут видеть верхнюю часть таблицы во время загрузки браузера
и отображает остальную часть таблицы. Создается впечатление, что страница загружает
намного быстрее!| Спецификация |
|---|
| СПАСИТЕЛЬНЫЙ СТИЦИЯ СТИРА 2 РЕЗИЦИЯ 1 (CSS 2.1) Спецификация № |
| Значение по умолчанию: | авто |
|---|---|
| Унаследовано: | нет |
| Анимация: | нет. Читать о анимированном |
| Версия: | 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.
Оставить комментарий