Меню

Html background ячейки таблицы



Html background ячейки таблицы

  • Бесплатный видео курс - Простой сайт без знания HTMLШкола Продающих Сайтов
  • Навигация
    • HTML сайты
    • Локальный сервер
    • CMS для сайта
    • Статьи для сайта
    • Видео контент
    • Аудио контент
    • Заработок на сайте
    • Скачать для сайта
    • Продвижение сайта

    Школа Продающих Сайтов

    Бесплатный видео курс - Простой сайт без знания HTML

    A5.ru: конструктор сайтов

    html таблица, фон, высота ячейки — Урок 11

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

    В наш html код, мы добавили таблицу с тремя строками и двумя столбцами, в результате, мы получили следующий код страницы:

    Следующим шагом, давайте посмотрим, как в таблице можно изменять фон ячеек. Сделаем мы это на примере заголовка сайта – Header. Заголовок сайта у нас расположен в первой строке таблицы, которая состоит из одной ячейки.

    Откроем html справочник и найдем описание тега TD. Для задания цвета фона ячейки таблицы используется параметр bgcolor, аргументом данного параметра является цвет, заданный названием (например, bgcolor=”red”) или выраженный шестнадцатеричным кодом перед которым ставится знак решетки (например, bgcolor=”#add2ea”).

    Ну что же, давайте изменим наш html код, задав цвет ячейки заголовка Header, в результате, код который размечает ячейку заголовка сайта, у нас получится следующим:

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

    Цвет ячейки таблицы, заданный с помощью параметра bgcolor,является однотонным.

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

    Эффект градиентного цвета можно получить только с использованием изображений.

    Для того, чтобы в качестве фона ячейки таблицы использовать рисунок, мы используем параметр тега TD с названием background.

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

    Это свойство параметра background широко используется для создания фона ячеек таблицы с помощью картинок с малыми размерами.

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

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

    В эту папку скопируем картинку header.jpg. На диске данная картинка занимает 878 байт, ее высота равна 79 пикселей, ширина 10 пикселей.

    Скачать картинку для фона можно с моего сайта бесплатно по прямой ссылке:

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

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

    Вновь откроем описание тега TD в html справочнике.

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

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

    Сохраним изменения в блокноте и обновим окно браузера. Мы увидим, что ячейка заголовка стала выше.

    Продолжим редактирование html кода нашей страницы. Теперь зададим фон для ячейки заголовка.

    Строка разметки для первой ячейки таблицы, теперь у нас будет выглядеть следующим образом:

    Где код background=»img/header.jpg»– делает фоном ячейки картинку header.jpg.

    Не смотря на то, что картинка имеет ширину всего 10 пикселей, она растягивается на всю ширину ячейки таблицы.

    Теперь я хочу пояснить, для чего, мы сначала задали фон ячейки кодом цвета (параметр bgcolor), а затем, сделали фон ячейки с помощью картинки (параметр background).

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

    То есть, использование приема задания фона для ячеек таблицы двумя способами способствую сохранению дизайна сайта для посетителей сайта, с различными настройками браузера.

    В следующем уроке мы продолжим создавать сайт в блокноте.

    Источник

    Создание таблиц в HTML — фон таблицы — рамка таблицы — объединение ячеек

    При создании веб страниц очень часто необходимо представить некоторое содержимое страницы в виде таблиц.

    Создание таблиц в HTML - фон таблицы - рамка таблицы - объединение ячеек

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

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

    За создание таблиц в HTML отвечает тег

    и закрывающий тег

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

    Для того, чтобы посмотреть как все работает на практике, создадим таблицу, состоящую из двух строк и четырех ячеек. Код нашей таблицы будет следующий:

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

    У вас должно получиться следующее:

    Создание таблицы состоящей из четырех ячеек

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

    border — задает ширину рамки таблицы в пикселях, записывается так: .

    bordercolor – цвет рамки таблицы, данный атрибут поддерживает не все браузеры, поэтому вы можете и не увидеть заданный цвет рамки:

    Мы задали ширину рамки 2 пикселя, синего цвета, таблица примет следующий вид:

    Создание рамки таблицы - цвет рамки

    width – задает ширину таблицы в пикселях или процентах:

    height – высота таблицы в пикселях или процентах:

    Ширина таблицы будет 250 пикселей, а высота 150 пикселей, таблица будет выглядеть так:

    Учтанавливаем высоту и ширину таблицы

    align – выравнивание таблицы;

    align=left – таблицы будет выровнена по левому краю;

    align=right – таблица будет выровнена по правому краю:

    Наша таблица должна выровняться по правому краю.

    bgcolor – цвет фона таблицы, bgcolor=#FFC000 – цвет фона таблицы будет желтый:

    Таблица получит следующий вид:

    Фон таблицы

    background – при помощи данного атрибута можно задать изображение, которое будет фоном таблицы.

    Таблица примет следующий вид:

    Изображение в виде фона таблицы

    cellspacing – задает отступ между ячейками таблицы.

    В результате наши ячейки прижались друг к другу, а текст внутри ячеек получил отступ:

    Внутренние и внешние отступы в таблице

    hspace — задает промежуток от таблицы в лево и в право в пикселях, записывается так: hspace=20

    nowrap – запрещает перенос слов в ячейке, записывается просто nowrap

    Последние два атрибута применяются крайне редко, поэтому пример кода с ними я не показываю.

    width — ширина ячейки в пикселях или в процентах.

    height – высота ячейки в пикселях или процентах.

    Например, зададим ширину первой ячейки первой строки в 30% — width=30% , а высоту первой ячейки второй строки в 100px. Код будет таким:

    Наша таблица примет следующий вид:

    Высота и ширина ячейки таблицы

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

    align – выравнивает содержимое ячеек, имеет следующие значения:

    align=»lef» – содержимое ячейки будет выровнено по левому краю;

    align=»right» – содержимое будет выровнено по правому краю;

    align=»center» – содержимое будет выровнено по центру ячейки.

    Добавим эти атрибуты и значения в наш код и выровняем содержимое 1 — й ячейки по левому краю (по левому краю содержимое выравнивается по умолчанию, однако в некоторых случаях данный атрибут необходим), содержимое 2 – й ячейки выровняем по правому краю, а 4 -й по центру.

    bgcolor – при помощи данного атрибута можно задать цвет ячейки.

    background – устанавливает изображение в виде фона ячейки.

    Для этого в наш код добавим необходимые атрибуты, для наших ячеек bgcolor=»#FFFF00″ для 2-й ячейки и background= «fon.jpg» для 4-й ячейки. В результате наша таблица станет выглядеть так:

    Фон ячейки таблицы

    Как вы видите, несмотря на то что мы задавали фон самой таблицы, если задать фон ячеек таблицы, то отображаться будет именно тот фон который мы задали для ячеек.

    bordercolor – задает цвет рамки ячейки.

    Существует еще один атрибут, предназначенный для выравнивания содержимого ячеек:

    valign – он производит выравнивание содержимое ячеек по вертикали.

    Имеет следующие значения:

    valign=»top» – выравнивание содержимого ячейки по верхнему краю;

    valign=»bottom» – выравнивание содержимого ячейки по нижнему краю;

    valign=»middle» – выравнивание посередине ячейки;

    valign=»baseline» – выравнивание содержимого ячейки по базовой линии.

    Добавим эти атрибуты к каждой из наших 4-х ячеек.

    Наша таблица примет следующий вид:

    Выравнивание ячеек таблицы по вертикали

    Последнее что нам необходимо рассмотреть в этом уроке, это объединение ячеек таблицы. Для того чтобы объединить несколько ячеек в строке, существует атрибут colspan=»» где в кавычках указывается количество ячеек которое необходимо объединить.

    Чтобы объединить ячейки по вертикали т. е. в столбце, необходимо использовать атрибут rowspan=»» где в кавычках указывается количество ячеек, которое необходимо объединить.

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

    Пример таблицы

    Теперь объединим 1-ю и 2-ю ячейку в строке и 3-ю, 6-ю и 7-ю ячейку в ряду. Код нашей таблицы будет следующий:

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

    Объединение ячеек таблицы

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

    Источник

    Урок 8. Таблицы в html

    Таблица в html — один из основных и первых методов вёрстки web-страниц. До того, как CSS стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат.

    Теги, используемые для построения таблицы в html

    table — обязательный тег, открывающий и закрывающий таблицу
    caption — необязательный тег, обозначающий заголовок таблицы
    th — необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным
    tr — обязательный тег, с которого открывается и закрывается строка
    td — обязательный тег, обозначающий открытие и закрытие ячейки в строке

    Пример кода простой таблицы

    В браузере отобразится

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

    Назначение таблиц в html

    Урок по таблицам очень важен! Благодаря таблицам Вы можете расположить не только текст, но и изображения, ссылки и много другое. В таблице можно задавать фон (или его цвет), отступ, ширину, границу и другие параметры, что придаст ей красивый внешний вид. Таблица — Ваш первый шаг к понимаю web-дизайна! Ранее многие сайты были целиком свёрстаны как таблицы, то есть всё, что видел пользователь (боковое меню, верхнее меню, содержание) — было содержанием ячеек большой таблицы.
    На этой ноте перейдём непосредственно к атрибутам, которые делают таблицу красивой.

    Свойства и параметры html таблиц: отступ, ширина, цвет фона, граница (рамка)

    У тега table есть следующие атрибуты:

    width — ширина таблицы. может быть в пикселях или % от ширины экрана.
    bgcolor — цвет фона ячеек таблицы
    background — заливает фон таблицы рисунком
    border — рамка и границы в таблице. Толщина указывается в пикселях
    cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей
    Как и ранее, значение атрибута прописываем в кавычках.

    Рассмотрим применения данных атрибутов на примере. Для этого создадим таблицу (но уже без крайне редко применяемых тегов caption и th) и зададим параметр атрибуту border (граница), width (ширина таблицы, строки или ячейки) и bgcolor (цвет ячейки)

    В результате в браузере будет выведена таблица следующего вида

    frame — атрибут, обозначающий рамку вокруг таблицы. Есть следующие значения:

    void — рамки нет,
    above — только верхняя рамка,
    below — только нижняя рамка,
    hsides — только верхняя и нижняя рамки,
    vsides — только левая и правая рамки,
    lhs — только левая рамка,
    rhs — только правая рамка,
    box — все четыре части рамки.

    rules — атрибут, обозначающий границы внутри таблицы, между ячейками. Есть следующие значения:

    none — между ячейками нет границ,
    groups — границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
    rows — границы только между строками,
    cols — границы только между стобцами,
    all — отображать все границы.

    Рассмотрим пример кода

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

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

    align — выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center)
    cellspacing — расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей)
    cellpadding — отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей)
    Рассмотрим пример

    В браузере отобразится выравненная по центру таблица следующего вида

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

    Строки tr и ячейки td в таблицах HTML

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

    Для тегов tr и td есть следующие

    align — выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center)
    valign — выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle)
    bgcolor — задает цвет строки
    width — ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы
    height — высота ячейки (все ячейки в строке примут данный параметр)

    Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому:

    Результат

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

    Спасибо за внимание! Надеюсь материал был полезен!

    Источник

    Таблицы в HTML — Создание таблиц — Высота и ширина, фон таблицы

    Таблицы довольно широко применяются при создании веб-страниц: они служат не только способом представления и упорядочения данных, но и являются инструментом форматирования страниц — их используют для создания каркаса страницы — применяют табличную верстку.

    Определение в Википедии: Табличная верстка — условное название метода верстки HTML-документов, при котором в качестве структурной основы для расположения текстовых и графических элементов документа используются таблицы (то есть HTML-тег ).

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

    Создание таблицы: строки и ячейки. Заголовок таблицы

    Таблица создается с помощью тега

    — он открывает таблицу. Обязательный тег

    информирует браузер о завершении таблицы.

    Любая таблица состоит из столбцов и строк.

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

    1-я ячейка 1-ой строки 2-я ячейка 1-ой строки
    1-я ячейка 2-ой строки 2-я ячейка 2-ой строки
    «img/peng_32.gif» > «img/peng_32.gif» >

    Выравнивание таблицы. Выравнивание содержимого ячеек

    При помощи атрибут align Вы можете разместить таблицу в левой или правой ( align= «left» и align= «right» ) части окна браузера (родительского элемента) или по его центру ( align= «center» ).

    Выравнивание содержимого строк (тег ) и ячеек (тег ) по горизонтали также осуществляется при помощи атрибута align , а по вертикали при помощи атрибута valign :

    — атрибут align принимает значения left , right , center и justify , которые задают выравнивание содержимого строк и ячеек по их левому, правому краю, по центру и по ширине соответственно;

    — атрибут valign , принимающий значения top , bottom и middle , задает выравнивание содержимого строк и ячеек по их верхнему, нижнему краю и по середине соответственно.

    Атрибут align служит также для выравнивания заголовка (тег ) по горизонтали и определения его расположения — над таблицей или под ней.

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

    Высота и ширина таблицы и ячеек

    По умолчанию размеры (высота и ширина) и таблицы, и ячеек меняются в зависимости от размеров их содержимого.

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

    Значения высоты и ширины задаются в пикселях или в процентах относительно свободного пространства. Для задания значений:

    — указывается целое положительное число. В этом случае размер будет задан в пикселях;

    — указывается целое положительное число с символом %.

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

    «img/peng_64.gif» > «img/peng_64.gif» >
    «img/peng_64.gif» > «img/peng_64.gif» >
    «img/peng_32.gif» > «img/peng_32.gif» >

    Как видно из примера: указывая ширину одной из ячеек столбца, Вы тем самым задаете ширину всего столбца; и, указывая высоту одной из ячеек строки, Вы задаете высоту всей строки.

    Границы таблицы и ячеек

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

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

    Толщина границы задается только для таблицы. Толщина рамки вокруг ячеек всегда составляет 1 пиксель (либо отсутствует).

    По умолчанию граница отображается с эффектом трехмерности и имеет черный цвет.

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

    Атрибут bordercolor поддерживается не всеми браузерами и поэтому не рекомендуется его использовать. Для задания цвета границы лучше воспользоваться стилями (это уже в CSS).

    Атрибут border не указан. Поэтому границы отсутствуют.
    «img/peng_32.gif» > «img/peng_32.gif» >

    Толщина границы таблицы составляет 3 пикселя. Ячейки имеют границы толщиной 1 пиксель!
    «img/peng_32.gif» > «img/peng_32.gif» >

    Частичное отображение границ

    Граница таблицы и рамка вокруг ячеек могут быть отображены частично.

    Установлены горизонтальные границы таблицы
    И отображены границы между колонками

    Отступы внутри и снаружи ячеек

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

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

    Расстояние от содержимого ячеек до их границ составляет 10 пикселей
    Расстояние между ячейками и от ячеек до границы таблицы составляет 25 пикселей

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

    Атрибут colspan указывает количество ячеек, которые будут объединены по горизонтали, а атрибут rowspan устанавливает количество ячеек, объединяемых по вертикали.

    Оба атрибута имеют смысл, если таблица состоит из нескольких строк.

    Фон таблицы. Фон ячеек таблицы

    В HTML есть возможность задать общий фон как для всей таблицы, так и фон для отдельно выделенной ячейки.

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

    Темно-розовый — цвет фона таблицы.
    Фоновый рисунок отдельной ячейки — небо!

    Использование атрибута cols позволяет браузеру быстрее отобразить содержимое таблицы.

    Редактирование таблицы

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

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

    При помощи атрибута span тега указывают количество колонок, к которым будут применены атрибуты align , valign или width (выравнивание содержимого ячеек колонок по горизонтали, вертикали или задание ширины колонок).

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

    width= «250px» >
    «2» width= «70px» >

    1 2 3 4 5

    Ко второй группе тегов относятся также практически идентичные между собой теги

    ,

    и .

    Любой из них можно применить для изменения некоторых свойств одной или нескольких строк таблицы: это опять же выравнивание содержимого ячеек в строках по горизонтали и по вертикали — при помощи атрибутов align и valign соответственно; и задание фонового цвета ячеек при помощи атрибута bgcolor .

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

    Источник

Читайте также:  Социальная сфера при брежневе таблица
Adblock
detector