Как сделать фон в таблице

Добавил пользователь Владимир З.
Обновлено: 10.09.2024

Для того, чтобы задать цвет фона, на котором расположена таблица, цвет строк или ячеек, в теге table (для всей таблицы), в теге tr (для строк) и в теге td или th (для ячеек) используется атрибут bgcolor="код цвета" с указанием названия цвета или (лучше всего) его кода:

Обратите внимание, что хотя код заголовка таблицы находится внутри кода таблицы,
он не окрашивается в цвет фона. Кроме того, если у вас задан цвет отдельных ячеек и строк, то промежутки между ячейками будут цвета фона таблицы (зелёного в нашем случае).

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

А вот если вы хотите, чтобы фоном таблицы, строк или ячеек был не просто цвет, а какая-то картинка-фон, то вместо bgcolor нужно использовать атрибут background="адрес картинки" , например:

Заголовок таблицы

Строка 1 Ячейка 1	Строка 1 Ячейка 2
Строка 2 Ячейка 1	Строка 2 Ячейка 2
Строка 3 Ячейка 1	Строка 3 Ячейка 2

Для изменения цвета границ таблицы служит атрибут тега table bordercolor="цвет" , он же применяется и для изменения цвета рамки вокруг ячейки таблицы (прописывается как атрибут тега td). Попробуйте поэкспериментировать сами: скопируйте код таблицы в текстовый редактор и пропишите в коде цвет границ таблицы и цвет границ какой-либо ячейки. Затем сохраните изменения и откройте документ в браузере.

Существует тег для создания заголовка таблицы и тег для создания заголовка столбца.

Для создания заголовка столбца используется тег (от англ. table head — заголовок таблицы).

Все это немного запутано, правда? Давайте разбираться на примере.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Таблица по центру

Этот вариант применим если нам нужно выровнять по центру одну таблицу. Если же нам нужно выровнять по центру все таблицы, тогда лучше применить CSS-код.

Размер таблицы

Если вы не указываете размер таблицы, то он определяется количеством текста (или иного контента) внутри. проще говоря таблица растягивается по размеру контейнера в котором она находится.

При этом можно указать размеры таблицы в пикселях, где width — ширина таблицы, height — высота таблицы. Например, сделаем нашу таблицу шириной 400 пикселей.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Более удобно задавать размер таблицы в процентах. В таком случае таблица становиться адаптивной. Изменим значение widthн равным 100%. Длинна будет адаптироваться в зависимости от контента. Результат будет следующим.

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Размер шрифта

Размер шрифта в таблице можно измять двумя способами. Наверное вы уже догадались какими.

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

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Здесь мы указываем что весь текст в таблице должен быть размером 12px, а шрифт — ‘Times New Roman’.

Выравнивание текста

Выровнять текст в таблице можно несколькими способами. Рассмотрим выравнивание с помощью HTML.

Разбираемся на примере заголовком столбцов. Горизонтальное выравнивание осуществляется с помощью атрибута align. Выровняем заголовки столбцов по центру.

Теперь заголовки столбцов (ФИО и Должность) выровнены по центру.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Аналогичное действие можно выполнить с помощью CSS-кода: text-align:center;

Вертикальное выравнивание осуществляется с помощью тега valign который имеет следующие свойства:

top — по верхнему краю.
middle — по середине.
bottom — по нижнему краю.
baseline — по базовой линии.

Отступы в таблице

Текст может располагаться довольно близко к границам таблицы, что затрудняет чтение. Для решения этой проблемы нужно увеличить отступы в таблице.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Видите, текст уже не так прижимается к границе. С помощью CSS сделать это можно следующим образом: td .

Объединение ячеек

Довольно важный момент в HTML-таблицах это объединение ячеек.

Объединение может быть горизонтальным.

Для горизонтального объединения ячеек используется атрибут colspan. Соответственно если у нас 4 ячейки, а мы объединяем две по горизонтали, то в первой строке у нас будет одна ячейка. Разберемся на примере.

Таблица сотрудников фирмы

ФИО	Должность
Руководящий состав:
Иванов Иван Иванович	Директор
Петрова Любовь Николаевна	Главный бухгалтер

Теперь представим ситуацию что на время отпуска главного бухгалтера директор занимает две должности. Для вертикального объединения ячеек будем использовать атрибут rowspan.

Таблица сотрудников фирмы

ФИО	Должность
Иванов Иван Иванович	Директор
Иванов Иван Иванович	Главный бухгалтер

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

Под оформлением таблиц я имею ввиду следующие манипуляции:

Изменить цвет фона.
Изменить цвет ячейки (или строк).
Картинки в таблице (в том числе с прозрачностью).
Кнопки и элементы управления в таблице.
Скролл (прокрутка) содержимого таблицы.

Изменение цвета фона таблицы

Изменить цвет фона таблицы с помощью HTML можно с помощью атрибута bgcolor. Давайте сделаем фон нашей таблицы не стандартным.

Изменить цвет ячейки (или строк)

Цвет строки или ячейки изменятся с помощью того же атрибута. Для меня удобно менять цвет фона строки в больших таблицах – тогда визуально таблица воспринимается гораздо лучше.

Картинки в ячейке

Давайте сделаем вот что. Добавим Справа фото сотрудников. Если фотографии сотрудника нет, то мы сделаем полупрозрачное фоновое изображение и напишем, что фото нет.

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

А затем мы применим CSS-код для оформления ячейки в которой не будет фотографии.

Пояснения. В первом случае у нас в ячейку вставляется изображение и ячейка адаптируется под размер картинки.

Во втором случае картинка является фоновым изображением, поэтому я добавил height:200px; — что бы фоновое изображение отобразилось полностью. В этом случае размер ячейки (если не задавать его как это сделал я) зависит не от размера фонового изображения, а от содержимого ячейки (в данном случае — текста).

Кнопки и элементы управления

Кнопки и элементы управления вставляются в таблицу стандартными способами. Создадим справа еще один столбец и вставим туда текстовое поле с кнопкой.

Скролл или прокрутка таблицы

Бывают ситуации когда таблицу необходимо сделать фиксированных размеров, но при этом должна быть возможность прокрутки таблицы. Разберемся как это сделать на примере.

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

Генератор HTML-таблиц

Обучаю HTML, CSS, PHP. Создаю и продвигаю сайты, скрипты и программы. Занимаюсь информационной безопасностью. Рассмотрю различные виды сотрудничества.

2 комментариев к записи “ Таблицы HTML ”

Добрый день! Анатолий, скажите пожалуйста «как позиционировать таблицу к правой части страницы. Или вообще расположить две независимые таблицы — одну справа, а другую — слева.

Юрий здравствуйте. Тут есть несколько вариантов, все зависит от более конкретных целей.

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

Второй вариант. Что бы таблица была справа у нее должен быть ограниченная ширина. Создаете таблицу . align="right" говорит о том, что таблица будет справа, а остальное содержимое, например текст, будет расположен слева (если нет других, препятствующих стилей).

В случае, если вам необходимо оформить ваш отчет в Excel и сделать рисунок фоном (подложкой), то прочитав эту статью, вы узнаете, как это можно сделать.

В открывшемся диалоговом окне вы можете выбрать источник откуда вы хотите получить изображение: Из файла на компьютере, из поисковой системы Bing, из личного хранилища OneDrive.

Итог: Мы сделали фоном листа Excel рисунок, который выбрали самостоятельно.

Выделите ячейки таблицы, для которых хотите добавить или изменить границу. На ленте выберите вкладку "Инструменты для работы с таблицами" / "Конструктор". В группе Нарисовать границы доступны перечисленные ниже возможности. С помощью параметра Цвет пера измените цвет границы.

Как залить цветом всю страницу в Word?

Перейдите в >Разметка страницы.
Выполните одно из указанных ниже действий. Выберите в области Цвета темы или Стандартные цвета. Выберите другие цвета, а затем выберите цвет. Выберите Заливка, чтобы добавить специальные эффекты, например градиенты, узоры или текстуры.

Как сделать фон в ворде только на одной странице?

1. Перейдите во вкладку “Дизайн” (“Разметка страницы” в Word 2010 и предшествующих ему версиях; в Word 2003 необходимые для этих целей инструменты находятся во вкладке “Формат”), нажмите там на кнопку “Цвет страницы”, расположенную в группе “Фон страницы”. 2. Выберите подходящий цвет для страницы.

Как увеличить границы таблицы в Ворде?

Выделите таблицу или отдельные ячейки таблицы, границы которых вы хотите изменить.
Щелкните правой кнопкой и выберите из контекстного меню команду Границы и заливка. .
На вкладке Граница из поля "Тип" выберите нужный вам тип границы, цвет и толщину линий границ.

Как залить границы таблицы в Ворде?

Щелкните в таблице, а затем нажмите маркер перемещения таблицы, чтобы выделить таблицу. Появится вкладка Работа с таблицами | Конструктор. .
Щелкните Стили оформления границ и выберите стиль границы.
Нажмите Границы и выберите, где вы хотите добавить границы.

Каким образом можно изменить цвет фона и границ таблицы?

Как выделить цветом границы таблицы в Excel?

Как поменять цвет таблицы в Эксель?

Выделите ячейку или диапазон ячеек, которые нужно отформатировать.
На вкладке Главная нажмите кнопку вызова диалогового окна Формат ячеек или просто нажмите клавиши CTRL+SHIFT+F.
На вкладке Заливка выберите в разделе Цвет фона нужный цвет.

Какие способы заливки страницы можно использовать в текстовом редакторе?

Открывшееся окно содержит четыре варианта заливки страниц: Градиент, Узор, Текстура, Рисунок.

Как сделать фон в гугл документе?

Перейдите на Google Диск и откройте сохраненный документ или запустите новый. Теперь иди в Файл> Настройки страницы. В диалоговом окне Параметры страницы перейдите к Цвет страницы. Вы можете выбрать любой цвет из палитры или изучить больше цветовых оттенков, нажав на Пользовательские .

Как сделать надпись на весь лист в ворде?

На вкладке Разметка страницы в группе Параметры страницы нажмите кнопку Поля. Откроется коллекция "Поля".
В нижней части коллекции выберите Настраиваемые поля.
В диалоговом окне Параметры страницы введите новые значения для полей.

Как сделать так чтобы подложка была только на одной странице?

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

Как сделать фон на титульном листе?

Для того, чтобы сделать рисунок фоном в документе Word, необходимо перейти на вкладку "Разметка страницы" и в группе "Фон страницы" нажать на кнопку "Цвет страницы". В открывшемся списке выберите пункт "Способы заливки".

Читайте также: