Теги для создания таблицы html. Атрибуты и свойства тега

Пример 1. Создание таблицы

HTML5 IE Cr Op Sa Fx

Порядок расположения ячеек и их вид показан на рис. 1.

Рис. 1. Результат создания таблицы с четырьмя ячейками

Атрибут border тега

Для управления полями внутри ячеек используется стилевое свойство padding , которое добавляется к селектору td . Расстояние между ячейками меняется свойством border-spacing (пример 2) добавляемым к селектору table , браузер IE понимает его только с версии 8.0.

Пример 2. Поля внутри ячеек

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 2. Поля в ячейках таблицы

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

Теги и атрибуты таблиц

Вот основные элементы, которые нужны для создания таблиц:

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

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

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

  , столько ячеек в ней и будет: один тег - одна ячейка.

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

  , если его нет, то после .

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

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

  .

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

  Инструменты создания сайтов

  Назначение	Инструмент
Разметка	HTML	XHTML
Оформление	CSS
Разработка	PHP	Python

  В браузере документ будет выглядеть так:

  Разберём, какие строчки кода за что отвечают.

  • - открыли таблицу, задав ей толщину рамок.
    - озаглавили её.
    - открыли строку.
    - создали ячейку с оформлением заголовка.
    - создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две.
    - закрыли строку. Аналогично создали остальные строки.
    - добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки.

    Инструменты создания сайтов

    Назначение	Инструмент
  Разметка	HTML	XHTML

    - закрыли таблицу.

  Благодаря универсальности таблиц, большому числу параметров, управляющих их видом, таблицы надолго стали определенным стандартом для верстки веб-страниц. Таблица с невидимой границей представляет собой словно модульную сетку, в блоках которой удобно размещать элементы веб-страницы. Тем не менее, это не совсем правильный подход, ведь каждый объект HTML определен для своих собственных целей и если он используется не по назначению, причем повсеместно, это значит, что альтернатив нет. Так оно и было долгое время, пока на смену таблицам при верстке сайтов не пришли слои. Это не значит, что слои теперь используются сплошь и рядом, но тенденция уже наметилась четко — таблицы применяются для размещения табличных данных, а слои — для верстки и оформления.

  Создание таблицы

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

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

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

  . Таблица должна содержать хотя бы одну ячейку (пример 12.1). Допускается вместо тега	использовать тег	. Текст в ячейке, оформленной с помощью тега	, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки. В остальном, разницы между ячейками, созданными через теги	и	нет. Пример 12.1. Создание таблицы Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Порядок расположения ячеек и их вид показан на рис. 12.1. То таблицы играют очень важную роль в создании невидимого каркаса для веб-страницы. А это поможет равномерно и красиво расположить текст, меню, картинки и т.д. Для лучшего понимания, о чем я пытаюсь вам рассказать, посмотрите на пример каркаса веб-страницы: Итак, как в HTML сделать простую таблицу ? Для постройки таблицы необходимо использовать три тега: TABLE – этот тег нужен для открытия таблицы. Это, своего рода, контейнер, в котором содержатся другие элементы. Вот загнул так, что без пончика не разобраться. Ничего, разберетесь, когда увидите пример. Закрывающий тег

  обязателен.

  Таблица состоит из ряда

  ряд 1	ряд 1
ряд 2	ряд 2
ряд 3	ряд 3

  ячейка 1	ячейка 2
ячейка 1	ячейка 2
ячейка 1	ячейка 2

  TR – создает новый ряд таблицы. Закрывающий тег обязателен.

  TD – создает новую ячейку в ряду. Закрывающий тег обязателен.

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

  ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2
ряд 3 ячейка 1	ряд 3 ячейка 2

  Вот результат:

  ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2
ряд 3 ячейка 1	ряд 3 ячейка 2

  Давайте все объясню.
  Перед каждым созданием новой таблицы открывается тег

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

  Закрываем ряд тегом .
  Открываем другой ряд тегом
  Закрываем ряд тегом .
  Открываем третий ряд тегом и вставляем в него снова две ячейки.
  Закрываем ряд тегом .
  Закрываем таблицу тегом

  ряд 1 ячейка1	ряд1 ячейка2

  .

  Я думаю, разобрались? Если кто-то забыл, что такое атрибут border , который я использую вместе с тегом

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

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

  ряд 1 ячейка 1

ряд 2 ячейка 1

  Результат:

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

  в строку между тегами

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

  ряд 1 ячейка 1

ряд 1 ячейка 2

  Результат:

  ряд 1 ячейка 1

ряд 1 ячейка 2

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

  Чтобы объединить ячейки в таблице, вам нужно использовать такие атрибуты:
  COLSPAN – определяет количество столбцов.
  По умолчанию значение 1.
  ROWSPAN – определяет количество рядов.
  По умолчанию значение 1.

  объединяем ячейки в верхнем ряду с помощью атрибута colspan :

  ряд 1 ячейка 1+2
ряд 2 ячейка 1	ряд 2 ячейка 2

  Результат:

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

  Чтобы задать высоту и ширину таблицы, воспользуйтесь такими атрибутами:

  WIDTH – ширина таблицы. Размер задается в пикселях или в процентах.
  HEIGHT – высота таблицы. Размер задается в пикселях или в процентах.

  ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

  Результат:

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

  Чтобы выровнять внутри таблицы содержимое (текст, картинки), можно воспользоваться такими атрибутами:

  ALIGN – горизонтальное выравнивание содержимого в таблице.
  К атрибуту ALIGN присваивается значения: left (по умолчанию) , center , right .
  left - прижать содержимое к левой части;
  center – установить по центру;
  right - прижать содержимое к правой части

  VALIGN – вертикальное выравнивание содержимого в таблице.
  К атрибуту VALIGN присваивается значения: top , bottom , middle .
  top – прижать содержимое к верху;
  bottom – прижать содержимое к низу;
  middle – установить содержимое посередине

  ряд 1 ячейка1	ряд1 ячейка2
ряд 2 ячейка 1	ряд 2 ячейка 2

  Результат:

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

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

  BGCOLOR – цвет фона всей таблицы или к каждой ячейке по отдельности. Цвет задается кодом или словом.
  BACKGROUND –фон в таблице заполняется рисунком.

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

  . А если только к определенной ячейке, тогда в тег

  . Для лучшего понимания посмотрите пример: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: Внимание: если картинка по размеру меньше за ячейку, тогда она будет повторяться, пока не заполнит ячейку до конца. Если картинка больше за ячейку, тогда фон картинки будет обрезан по размерам ячейки. И напоследок расскажу еще о двух полезных атрибутах . В случае, если вам вдруг захочется увеличить расстояние между всеми ячейками, помогут следующие атрибуты: CELLPADDING –расстояние между рамкой каждой ячейки html таблицы и содержимым в ней материалом. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 CELLSPACING –расстояние между границами соседних ячеек. ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Результат: ряд 1 ячейка1 ряд1 ячейка2 ряд 2 ячейка 1 ряд 2 ячейка 2 Фух, рассказал! Надеюсь, с задачей я справился и доступно объяснил все, что я знал про html таблицы . А вам, рекомендую хорошо закрепить материал. Попробуйте создать собственную таблицу, а лучше целый каркас для веб-страницы из таблицы html. Всего вам хорошего! Спасибо, что посетили мой блог Похожие записи Теги для создания таблицы html Чудо природы. Skyrim — Чудо природы Прошивка iPhone или как восстановить iOS через iTunes Прошивка на айфон 4s Как открыть расширение exe