Как вставить в html файл с таблицей. Уральский государственный педагогический университет

Тег colspan - объединение столбцов

Самым распространенным применением таблиц сложных структур является разметка web-страницы. Посмотрите на рисунок:

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

Например,

Этот столбец включает в себя два столбца.

Для нашего примера:

Заголовок документа

шапка сайта
меню контент
низ сайта

Обратите внимание, что первая и третья строки теперь содержат по одному столбцу.

Рассмотрим другой пример разметки web-страницы:

шапка сайта
меню меню меню меню меню меню
новости контент

Посчитайте - сколько строк и столбцов в этой таблице? Для этого наложите мысленно сетку на рисунок. Получится три строки и шесть столбцов.

Первая строка состоит из одного столбца, включающего в себя шесть столбцов. Запишем это:

шапка сайта

Вторая строка состоит из шести столбцов:

меню меню меню меню меню меню

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

новости контент

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

Тег rowspan - объединение строк

А если нам понадобится вот такая разметка?

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

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

Рассмотрим еще один пример:

шапка меню
контент
низ сайта

Итак, в первой строке у нас два столбца, причем второй столбец объединяет две строки. Запишем это:

шапка меню

Вторая строка - это один столбец (просто его часть скрыта вторым столбцом первой строки):

контент

Наконец, третья строка - это один столбец, включающий в себя три столбца:

низ сайта

Используя эти два параметра rowspan и colspan можно создавать таблицы любой сложности. Потренируйтесь.

Вложенные таблицы

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

Итак, у нас есть вот такой код.

09.11.2015


Всем привет!
Продолжаем изучать основы HTML. В этом уроке я расскажу и на примерах покажу, как сделать таблицу в HTML . А также рассмотрим, как можно задать цвет ячейкам таблицы, как отцентрировать таблицу, научимся делать границу таблицы, и т.д.
Таблицы HTML часто используют в HTML для перечислений некоторых сведений. Раньше еще таблицы использовали для создания каркаса веб-страниц:

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

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

Из каких основных тегов состоит таблица?

○ тег TABLE
Это главный контейнер для создания таблицы, внутри которого содержатся другие элементы таблицы, такие как столбики и ряды.
Закрывающий тег обязательный.

○ тег T R

Внутри контейнера

……
размещаются ряды:

Столбики создаются с помощью тега .
Закрывающий тег обязателен.

Внимание: без использования всех этих тегов таблицу создать не возможно.

Теперь попробуем воспользоваться теорией и создадим таблицу на практике.

Задание: создать таблицу из одного ряда, где будет три столбика.

ряд -1 /столбик 1 столбик 2 столбик 3

Задание: создать таблицу из трех рядов и трех столбиков.

ряд -1 /столбик 1 столбик 2 столбик 3
ряд -2 /столбик 1 столбик 2 столбик 3
ряд -3 /столбик 1 столбик 2 столбик 3

До этого момента вам все ясно ? Кто не понял, поднимите руку! Ага, поняли все, значит идем далее.

Теперь рассмотрим атрибуты для таблицы.

*Атрибуты

○ Границы таблицы в HTML

Чтобы была видна таблица, к тегу

применяется атрибут « border » .

Если значение атрибута « border » «0» , границы видно не будет, если не прописать к тегу

атрибут «border» , граница в таблице тоже видна не будет.

Границы таблицы в HTML – сайт

ряд -1 /столбик 1 столбик 2 столбик 3

Результат:

Попробуйте поменять значение в атрибуте «border» на «10» .

○ Как объединить ячейки в таблице

Чтобы объединить ячейки в таблице используют атрибуты «colspan» и «rowspan» к тегу < td > .

  • colspan - объединение ячеек по горизонтали;
  • rowspan - объединение ячеек по вертикали.

В значениях указываете, сколько нужно объединить ячеек.

ряд 1 столбик 1
ряд 2 столбик 1 ряд 2 столбик 2

Результат:

ряд 1 столбик 1 ряд 1 столбик 2
ряд 2 столбик 1

Результат:

Более сложный пример:

Таблицы в HTML – сайт

ряд -1 /столбик 1 столбик 2 столбик 3
ряд -2 /столбик 1 столбик 2 столбик 3 столбик 4

Результат:

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

Чтобы увеличить расстояние между текстом и границей ячейки, прописывают атрибут «cellpadding» к тегу

В значениях у атрибута «cellpadding» указываете расстояние отступа

ряд 1 столбик 1 столбик 2

Результат:

Чтобы увеличить расстояние между ячейками в таблице, используют атрибут «cellspacing» к тегу

В значениях у атрибута «cellspacing» указываете расстояние между ячейками

ряд 1 столбик 1 столбик 2

Результат:

○ Как сделать фон таблицы HTML

Чтобы сделать фон таблицы HTML используют к тегу

и

такие атрибуты:

  • BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
  • BACKGROUND –фон в таблице заполняется рисунком.
Таблицы в HTML – сайт
ряд -1 /столбик 1 столбик 2 столбик 3
ряд -2 /столбик 1 столбик 2 столбик 3 столбик 4

Результат:

○ Как вставить картинку в таблицу HTML

Чтобы вставить картинку в таблицу HTML, между тегом

вставляться тег .
ряд 1 ячейка 1 ячейка 2

Результат:

Значения задаются в пикселях (px) или в процентах (%)

○ Выравнивание содержимого в таблице HTML

Чтобы выровнять содержимое в таблице HTML, используют к тегу атрибут «align» и «valign» :

ALIGN – горизонтальное выравнивание содержимого в таблице.
Значения:

  • left - прижать содержимое к левой части (по умолчанию) ;
  • center – установить по центру;
  • right - прижать содержимое к правой части

VALIGN – вертикальное выравнивание содержимого в таблице.
Значения:

  • top – прижать содержимое к верху;
  • bottom – прижать содержимое к низу;
  • middle – установить содержимое посередине
текст

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

Результат:

○ Как выровнять таблице HTML по центру

Чтобы выровнять таблицу по центру, нужно обхватить таблицу тегом

:

Код таблицы

ряд -1 /столбик 1 столбик 2 столбик 3

Дополнительные и основные теги к таблице

Таблица для сайт
Название 1 Название 2
1 2

Результат:

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

Предыдущая запись
Следующая запись

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

Для создания таблицы в HTML-документе используется тег

, он представляет собой контейнер, в котором находится все содержимое таблицы.

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

, каждая строка, в свою очередь, состоит из ячеек. Тег может содержать в себе только теги для создания ячеек.

В HTML существует два разных тега для создания ячеек, первым из них является

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

    Результат:

    Как видите, получилось не очень красиво, будем украшать.

    Параметры html таблиц: отступ, ширина, цвет фона, рамка

    Для этого у тега

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

    Первый заголовокВторой заголовок
    строка 1, ячейка 1строка 1, ячейка 2
    строка 2, ячейка 1строка 2, ячейка 2
    Попробовать »

    Таблица внутри таблицы

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

    		.

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

    Первый заголовокВторой заголовок
    строка 1, ячейка 1строка 1, ячейка 2
    строка 2, ячейка 1 строка 2, ячейка 2
    Первый заголовокВторой заголовок
    строка 1, ячейка 1строка 1, ячейка 2
    строка 2, ячейка 1строка 2, ячейка 2

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

    Элемент TABLE, создаем таблицу

    Для создания таблиц в языке HTML применяется элемент table , а весь код (ее содержимое) таблицы располагается между тегами . Атрибуты этого элемента задают значения для всей таблицы целиком:

    • background - задается изображение (URL), которое может быть фоном для всей таблицы;
    • bgcolor - цвет фона таблицы, задается если не задан фон в виде изображения;
    • border - толщина линий таблицы, если неободимы видимые границы;
    • bordercolor - цвет линий таблицы;
    • cellpadding - расстояние от текста внутри ячеек до границ ячеек;
    • cellspacing - расстояние от границ таблицы до внешних границ ячеек (внутри таблицы);
    • width - задается значение ширины таблицы в px или % .

    Пишем пример кода таблицы с голубым фоном, толщиной лини в 1px белого цвета, отступами внутри и снаружи ячеек по 2px, шириной 100% от страницы:

    bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

    Добавляем строку

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

    bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

    Добавляем ячейки

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

    bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

    Ячейка №1
    Ячейка №2
    Ячейка №3

    В увидим получившуюся таблицу:

    Объединение строк

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

    bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

    rowspan="2" >Строки №1 и №2 объединены
    Ячейка№1
    Ячейка№2

    Ячейка №3
    Ячейка №4

    Строка №3
    Ячейка №5
    Ячейка №6

    Браузер отобразит:

    Строки №1 и №2 объединены Ячейка№1 Ячейка№2
    Ячейка №3 Ячейка №4
    Строка №3 Ячейка №5 Ячейка №6

    Объединение столбцов

    Столбцы объединяются по такому же принципу, только с использованием атрибута colspan . Смотрим пример:

    bgcolor="blue" border ="1" bordercolor ="white" cellpadding ="10" cellspacing ="2" width ="100%" >

    colspan="2" >Столбцы №1 и №2 объединены
    Столбец №3

    Ячейка №1
    Ячейка №2
    Ячейка №3

    Ячейка №4
    Ячейка №5
    Ячейка №6

    Браузер отобразит:

    Атрибуты colspan и rowspan можно применять одновременно. В браузере это будет выглядеть так:

    Или вот так:

    А ты попробуй написать код самостоятельно!

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

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

    Выравнивание таблицы по горизонтали задается атрибутом align , значения тебе уже знакомы: left, center, right . А для того чтобы выровнять текст в ячейках таблицы, атрибут горизонтального выравнивания align необходимо применить к каждому тегу td . С применением CSS это гораздо упрощается. Для вертикального выравнивания содержимого ячеек применяется атрибут valign . Он так же имеет свои значения - вертикальное выравнивание по центру middle , по верху top и по низу bottom базовой линии (линией, на которой расположен текст текущей строки).

    Фон таблицы

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

    В заключение

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


    / То, без чего не создать сайт: ∼ ∼

    Таблица - один из основных инструментов для создания web-страниц.

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

    Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:

    Рассмотрим нашу таблицу с точки зрения HTML:

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

    • width - задает ширину таблицы (в пикселах или % от ширины экрана),
    • bgcolor - задает цвет фона ячеек таблицы,
    • background - заливает фон таблицы рисунком,
    • border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы,
    • cellpadding - задает отступ в пикселях между границей клетки и ее содержимым.
    Применим эти параметры:

    Результат:

    Уже лучше, но наша таблица прижата к левому краю окна, также как и текст в ней. Исправим это, добавив еще три параметра:

    • align - задает выравнивание таблицы: слева (right), справа (left), по центру (center),
    • cellspacing - задает расстояние между ячейками таблицы (в пикселах),
    • cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
    Применим эти параметры:

    Результат:

    Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0" , то границы примут привычный вид:

    Результат:


    Вообще, за границы отвечают два параметра:

    • frame - задает вид рамки вокруг таблицы и может принимать следующие значения:
      • void - рамки нет,
      • above - только верхняя рамка,
      • below - только нижняя рамка,
      • hsides - только верхняя и нижняя рамки,
      • vsides - только левая и правая рамки,
      • lhs - только левая рамка,
      • rhs - только правая рамка,
      • box - все четыре части рамки.
    • rules - задает вид внутренних границ таблицы и может принимать следующие значения:
      • none - между ячейками нет границ,
      • groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
      • rows - границы только между строками,
      • cols - границы только между стобцами,
      • all - отображать все границы.
    С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведем только один пример, сами же поэкспериментируйте со всеми.

    Результат:


    Следует заметить, что границы в разных браузерах отображаются немного по-разному.

    HTML тэги tr и td

    Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра:

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

    Результат:


    Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих примерах).

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

    эти параметры
    1 2 3