Використовується для встановлення URL-адреси зображення яке буде встановлено на фон таблиці. На відміну від звичайних зображень, для фону не встановлюються ширина і висота, і воно завжди відображається в натуральну величину з масштабом 100%. Якщо малюнок за розміром менше ширини або висоти таблиці, то картинка повторюється по горизонталі вправо і вниз, шикуючись як мозаїка. З цієї причини на місці стику фонових картинок можуть виникнути видимі перепади, помітні для відвідувачів сайту.
Нотатка:
В якості фону також допускається використовувати анімовані зображення у форматі GIF, але вони відволікають увагу читачів.
Порада:
Даний атрибут застарів, рекомендуємо встановлювати фонове зображення за допомогою CSS стилю —backgroundабо background-image
Порада:
При виборі шпалер переконайтеся, що забезпечений достатній контраст між ним і вмістом таблиці.
Порада:
Атрибут не розповсюджується на теґ заголовка таблиці <caption>
Запропонувати свою пораду чи нотатку
ПорадаНотатка
Синтакс
<table background="URL">...</table>
Атрибут background може отримувати єдине значення :
URL
Адреса зображення — можна використовувати відносний або абсолютний шлях.
Переглядачі
Стаціонарні переглядачі
Мобільні переглядачі
Переглядач
1
1
1
3. 5
3
Переглядач
1+
18+
4+
1+
Приклади
Приклад 1
Найпростіший приклад використання HTML атрибута background теґа <table>
Якщо ви не бачити тексту таблиці через малюнки обновіть сторінку.
See the Pen
table. background css_in_ua by css.in.ua (@css_in_ua)
on CodePen.
Різниця між HTML 4.01 та HTML5
Цей атрибут не підтримується в HTML5
Різниця між XHTML та HTML
В XHTML 1.0,XHTML 1.1 не рекомендований до використання.
Тег HTML
❮ Пред. Следующий ❯
Тег
определяет содержимое тела (набор строк) HTML-таблицы, создавая в ней отдельный смысловой блок. Тег используется вместе с тегами и, которые определяют верхний и нижний колонтитулы таблицы соответственно.
Тег
должен использоваться как дочерний элемент
элемент
, после
,
(если есть) и элементы
. В HTML5 элемент располагается либо до, либо после элемента.
Элементы,
и по умолчанию не влияют на макет таблицы. Используйте свойства CSS, чтобы настроить внешний вид таблицы.
При печати документа элементы и
будут определять информацию, которая может быть одинаковой или очень похожей на каждой странице многостраничной таблицы, а содержимое тега будет отличаться от страница к странице.
В случае использования
нельзя иметь элементы
(строки таблицы), которые являются дочерними элементами
, но не включены в. Если вы используете строки без верхнего и нижнего колонтитула, они должны быть внутри элемента
.
Для каждой таблицы можно использовать более одного элемента
, если все они следуют друг за другом. Это разделит строки в больших таблицах на разделы, и вы сможете форматировать каждый из них отдельно.
Тег
идет парами. Содержимое записывается между открывающим () и закрывающим () тегами.
Свойство CSS font-family задает приоритетный список из одного или нескольких имен семейств шрифтов и/или общих имен семейств для выбранного элемента.
Свойство CSS font-size устанавливает размер шрифта.
Свойство CSS font-weight определяет, должен ли шрифт быть полужирным или толстым.
Свойство CSS text-transform управляет регистром и регистром текста.
Свойство CSS text-decoration указывает украшение, добавляемое к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.
Цветной текст в теге
:
Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
Свойство CSS background-color устанавливает цвет фона элемента.
Стили макета текста для тега
:
Свойство CSS text-indent определяет отступ первой строки в текстовом блоке.
Свойство CSS text-overflow указывает, как пользователь должен сигнализировать о переполненном содержимом, которое не отображается.
Свойство CSS white-space указывает, как обрабатывается пробел внутри элемента.
Свойство CSS word-break указывает, где строки должны быть разорваны.
Другие свойства тега
, на которые стоит обратить внимание:
Свойство CSS text-shadow добавляет тень к тексту.
Свойство CSS text-align-last задает выравнивание последней строки текста.
Свойство CSS line-height определяет высоту строки.
Свойство CSS letter-spacing определяет интервалы между буквами/символами в тексте.
Свойство CSS word-spacing устанавливает расстояние между словами.
Закрепление строки и столбца в таблице HTML с помощью CSS
Интерактивный и простой в использовании пользовательский интерфейс всегда побуждает пользователя работать больше. Всякий раз, когда структура сетки/таблицы используется для отображения данных, общий сценарий приводит к отображению полосы прокрутки, когда данные больше, чем визуальный диапазон. Когда пользователь прокручивает таблицу с помощью полосы прокрутки, либо заголовок строки, либо столбец также прокручиваются, что раздражает пользователя при идентификации строки/столбца.
Чтобы решить эту проблему, мы можем просто заморозить строку (строки) и столбец (столбцы) заголовка в соответствии с требованиями, а остальные данные сетки могут быть прокруткой, что очень полезно для пользователя.
Чтобы зафиксировать строку/столбец, мы можем использовать простую таблицу HTML и CSS.
HTML: В HTML мы можем определить строку заголовка с помощью тега
или также использовать тег
. В приведенном ниже примере используется тег
. Мы также поместили таблицу в элемент DIV, чтобы увидеть горизонтальную и вертикальную полосы прокрутки, установив свойство переполнения элемента DIV.
Пример HTML:
CSS: Основные изменения будут внесены в CSS, так как заморозка строки/столбца будет обрабатываться CSS. Чтобы зафиксировать строку и столбец, нам нужно рассмотреть следующий тег/селектор CSS:
top: Это свойство используется для установки верхней позиции элемента, для строки (строк) заголовка (закрепить строку) это будет быть всегда 0.
left: Это свойство используется для установки левого положения элемента, для первого закрепленного столбца это будет 0. Для более чем одного закрепленного столбца значение свойства столбца (кроме первого столбца) слева будет суммой общей ширины предыдущего столбца.
position: Это свойство делает элемент «липким» при прокрутке, поэтому его значения всегда будут «липкими» для всех фиксированных строк и столбцов.
z-index: Это свойство задает приоритет видимости закрепленных столбцов и строк над прокручиваемыми столбцами. Закрепленный столбец будет иметь более высокое значение z-index, чем прокручиваемый столбец.
background-color: Цвет фона удерживает прокручиваемый столбец позади фиксированного столбца во время прокрутки. Если цвет фона не указан, то значение ячейки (данные) будет выглядеть как наложение на другие значения ячейки.
Образец CSS:
Конечный результат:
Выбор глобального партнера по разработке программного обеспечения для ускорения вашей цифровой стратегии тип цифровых проектов, с которыми вы сейчас сталкиваетесь, ускоряется наиболее экономически эффективным и оптимизированным способом.
« : представляет собой гибрид относительного и фиксированного позиционирования. Элемент считается с относительным позиционированием до тех пор, пока он не пересечет указанный порог, после чего он считается с фиксированным позиционированием. »
Чтобы еще больше прояснить липкое позиционирование, давайте возьмем пример липкого заголовка таблицы на странице.
Sticky Header:
Иногда нам нужно отобразить таблицу внутри длинной страницы с вертикальной полосой прокрутки. Но когда мы прокручиваем страницу, таблица также прокручивается с заголовком, который не помогает пользователям идентифицировать заголовок столбца. Чтобы решить эту проблему, мы можем прикреплять заголовок таблицы до тех пор, пока таблица не будет прокручиваться (прикреплять заголовок до тех пор, пока последняя строка таблицы не будет видна пользователю).
Пример:
HTML:
CSS:
Поддержка браузера
‘Позиция: Список поддержки Browser Browser 99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999998.
5background css_in_ua by css.in.ua (@css_in_ua) on CodePen.
background css_in_ua by css.in.ua (@css_in_ua)
on CodePen.
–
Всякий раз, когда структура сетки/таблицы используется для отображения данных, общий сценарий приводит к отображению полосы прокрутки, когда данные больше, чем визуальный диапазон. Когда пользователь прокручивает таблицу с помощью полосы прокрутки, либо заголовок строки, либо столбец также прокручиваются, что раздражает пользователя при идентификации строки/столбца.
Закрепленный столбец будет иметь более высокое значение z-index, чем прокручиваемый столбец.