Вставка таблицы в html код страницы

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

Элемент

служит контейнером для элементов, определяющих содержимое таблицы. Чтобы создать строку таблицы, нужно добавить внутрь элемента парный блочный тег (сокр. от англ. «tаЫе row» – строка таблицы). Сколько тегов вы добавите, столько строк в таблице и будет. Открывающий тег обозначает начало новой строки таблицы. После него помещаются элементы .

Элемент

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

Задачи

• Убрать двойную рамку таблицы

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

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

Выбираем редактор

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

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

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

Алгоритм создания таблицы

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

Начнем с подготовительных действий.

1. Рисуем на листе бумаги схематическое изображение таблицы.

2. Подсчитываем количество строк и ячеек. Если количество последних разное - считаем для каждого рядочка отдельно.

3. Определяем в строке количество ячеек-заголовков (к примеру, ячейки «№», «Имя» и т. д.).

4. Записываем основные параметры таблицы - цвет, высоту и ширину, выравнивание текста - в общем, все, что вам покажется нужным.

1. Вставляем тэги таблицы.

2. Вставляем тэги строк исходя из того количества, которое вам нужно.

3. В строках вставляем тэги ячеек (обычных и заглавных), также исходя из того количества, которое записано у вас на бумаге.

4. Задаем параметры для таблицы в целом.

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

6. Заполняем наши ячейки текстом.

Создаем таблицу

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

(от англ. caption – подпись). Элемент

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

Пример: Применение тега

, и . Так же, как веб-страница может содержать «шапку», «тело» и «подвал», таблица может содержать головную, основную и нижнюю части. Для логического группирования строк в верхней части таблицы (то есть для соз дания верхней шапки таблицы) используется тег . Заголовки таблицы должны быть помещены в элемент , например:

Основное содержимое (тело) таблицы должно находиться внутри элемента

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

Пример: Теги

, и

• Попробуй сам »

• Попробуй сам »

Это заголовок таблицы

Ячейка на две строки	Ячейка 1	Ячейка 2
	Ячейка 3	Ячейка 4

Теги группирования элементов таблиц

Для группирования элементов таблиц служат теги

Заголовок 1	Заголовок 2< /th>

Это шапка таблицы
Это подвал таблицы
Ячейка 1	Ячейка 2	Ячейка 3	Ячейка 4

Несмотря на то, что мы перед

(сокр. от англ. «tаЫе data» – данные таблицы), каждый из которых задает отдельную ячейку в этой строке. Внутрь элемента	вы помещаете свой контент (текст, числа, изображения и т.д.), отображаемый в этой ячейке. Конец строки обозначается закрывающим тегом
(сокр. от англ. «tаЫе heading» – заголовок таблицы) — необязательный табличный элемент, который используется точно так же, как и элемент	, однако его назначение — создание заголовка строки или столбца. Как правило, элемент	размещают в первой строке таблицы. Браузеры отображают текст в элементе	жирным шрифтом и центрируют его относительно ячейки. Применение в коде элемента	помогает людям, которые пользуются программами экранного доступа, а также улучшает результативность индексирования таблиц поисковыми машинами. Рассмотрим простую таблицу, которая состоит из трех строк и трех столбцов, причем ячейки первой строки будут заголовками соответствующих столбцов. По умолчанию таблицы обычно отображаются без рамки: Пример: Простая HTML-таблица Попробуй сам » Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3 Граница таблицы Мы уже знаем, что по умолчанию таблицы отображаются без рамки. Для добавления рамки вокруг таблицы нужно указать в документе несколько простых правил таблиц стилей. Свойство border управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы в пикселах. Рамка отображается вокруг таблицы и между ячейками. Добавим к уже созданной таблице рамку толщиной один пиксель, установив свойство border для всех элементов таблицы, например, вот так: Пример: Применение свойства border Попробуй сам » Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3 Одинарная рамка для таблицы По умолчанию у смежных ячеек таблицы будет своя собственная граница. Это приводит к своего рода «двойной рамке», как видно из примера выше. Чтобы избавиться от «двойной рамки», добавьте свойство CSS border-collapse к своей таблице стилей: Пример: Применение свойства border-collapse Попробуй сам » Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 2x1 Ячейка 2x2 Ячейка 2x3 Ячейка 3x1 Ячейка 3x2 Ячейка 3x3 Поля и интервалы таблицы По умолчанию размер ячеек таблицы подстраивается под их содержимое, но иногда бывает необходимо оставить вокруг табличных данных немного пространства (padding). Поскольку интервалы и поля относятся к элементам представления данных, это пространство настраивается с помощью стилевых таблиц CSS. Поле ячейки (padding ) — это расстояние между содержимым ячейки и ее границей (border). Для его добавления примените свойство padding к элементу	или	. Интервал ячеек (border-spacing ) — это расстояние между ними (	или	). Сначала присвойте значение separate свойству border-collapse элемента , а затем установите расстояние между ячейками, изменив значение параметра border-spacing . Раньше за поля и интервал ячеек отвечали атрибуты cellpadding и cellspacing элемента , но в спецификации HTML5 они были признаны устаревшими. Пример использования padding и border-spacing : Пример: Применение свойств padding и border-spacing Попробуй сам » Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ширина таблицы Ширину, занимаемую таблицей в окне браузера, можно указать с помощью свойства width CSS, в пикселях или процентах. Указание ширины таблицы в пикселях позволяет определить её точную ширину. Процентное соотношение позволяет сделать таблицу гибкой, т.е. она будет "растягиваться" или "сжиматься" в зависимости от того, какие еще элементы находятся на странице и какие размеры окна браузера. Вот пример использования свойства width : Table {width: 100%;} Пример: Применение свойства width Попробуй сам » Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Объединение ячеек (colspan и rowspan) Одной из основных особенностей структуры таблицы является объединение ячеек, которое подразумевает растяжение ячейки и охват ею нескольких строк или столбцов. Это позволяет создавать сложные табличные структуры: заголовки	или ячейки	объединяются посредством добавления атрибутов colspan или rowspan . Атрибут colspan определяет количество ячеек, на которые простирается данная ячейка по горизонтали, а rowspan — по вертикали. Объединение столбцов Объединение столбцов достигается с помощью атрибута colspan в элементах	или	— ячейка растягивается вправо, охватывая последующие столбцы. В следующем примере значение атрибута colspan равно 2, а это значит, что ячейка должна занимать два столбца. Пример: Применение атрибута colspan Попробуй сам » colspan ="2">Ячейка на два столбца Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Объединение строк Строки, объединенные при помощи атрибута rowspan , ведут себя точно так же, как объединенные столбцы, с той лишь разницей, что диапазон ячеек задается сверху вниз и охватывает несколько строк. В этом примере первая ячейка таблицы растягивается на две строки вниз: Пример: Применение атрибута rowspan Попробуй сам » Ячейка на две строки Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 rowspan ="2">Ячейка на две строки Ячейка 1 Ячейка 2 Ячейка 3 Ячейка 4 Заголовок таблицы Для создания заголовка или подписи таблицы используется парный тег

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

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

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

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

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

Как это может выглядеть? Примерно так:

• ;
  ;
  ;
  ;
  ;
  ;
  ;
  ;

  № п/п	Фамилия
  1	;	Иванов

  .

Как видите, ничего сложного в этом нет. Главное - не запутаться в количестве строк и ячеек. Иначе таблицу может перекосить.

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

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

Когда код написан, следует обратить внимание на следующие пункты: выравнивание в границ, фона, текста и прочее.

Параметры таблицы задаются в тэге

. К ним относятся:

1. Border - ширина границ. Задается целым числом. По умолчанию границы любой таблицы равны нулю.

2. Bordercolor - цвет границы. Может задаваться как шестнадцатеричным кодом цвета (#00008B), так и его названием на английком (DarkBlue). По умолчанию он всегда серый.

3. Bgcolor - Также задается с помощью кода или названия.

4. Align - выравнивание текста за таблицей. По умолчанию - по левому краю. Есть следующие варианты данного параметра:

• left - обтекание справа;
• right -обтекание слева;
• center - вывод таблицы по центру без обтекания.

5. Width и height - ширина и высота таблицы. Может задаваться как в пикселях, так и в процентах (относительно размера браузера окна).

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

Что касается цвета текста, то его оформляют так же, как и обычный текст в формате HTML.

Пример оформления таблицы:

;

;

;

;

;

;

;

;

№ п/п	Фамилия
1	;	Иванов

.

Параметры строк

Итак, мы уже разобрались, как сделать таблицу в HTML и прописать основные ее параметры. Но что, если нам нужно выделить строку? Оформить ее не так, как основной текст таблицы?

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

1. Уже известные вам border, bordercolor и bgcolor.

2. Align - выравнивание текста в строке. Может принимать значения left, center и right.

3. Valign - данный тэг выравнивает текст по вертикали. Принимает следующие значения:

• top - текст выравнивается по верхней границе;
• middle - по центру;
• bottom - по нижней границе.

Пример оформления строки:

• ;
• № п/п;
• Фамилия;
• .

Параметры ячеек

И последнее, на что стоит обратить внимание тем, кто желает знать, как сделать таблицу в HTML - параметры отдельных ячеек, как обычных, так и заглавных. По сути, все делается точно так же, как и для таблицы или строки. Единственное, добавляется еще два немаловажных элемента:

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

2. Rowspan - указывает уже количество строк, которое занимает данная ячейка.

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

Выводы

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

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

Не бойтесь экспериментировать, и вскоре вы в совершенстве овладеете техникой создания таблиц. Успехов!

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

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

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

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

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

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

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

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

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

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

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

  .

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

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

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

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

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

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

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

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

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

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

  Итак, как в 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. Всего вам хорошего! Спасибо, что посетили мой блог Стал популярен, web-дизайнеры в основном использовали метод табличной вёрстки и получали очень хороший результат. Теги, используемые для построения таблицы в html table - обязательный тег, открывающий и закрывающий таблицу caption - необязательный тег, обозначающий заголовок таблицы th - необязательный тег, в открывающий и закрывающий теги которого вписывается название столбца. Как правило, выделяется жирным tr - обязательный тег, с которого открывается и закрывается строка td - обязательный тег, обозначающий открытие и закрытие ячейки в строке Пример кода простой таблицы Название таблицы Стобец 1 Стобец 2 Текст в первой ячейке Текст во второй ячейке В браузере отобразится Назначение таблиц в 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 - отображать все границы. Рассмотрим пример кода Стобец 1 Стобец 2 Результат Теперь попробуем создать красивую таблицу. Для этого давайте начнём использовать выравнивание в таблице . Для этого есть следующие уже знакомые параметры: align - выравнивание таблицы. Её можно расположить слева (left), справа (right), по центру (center) cellspacing - расстояние между ячейками таблицы. Указывается в пикселях (по умолчанию 0 пикселей) cellpadding - отступ в пикселях между содержимым ячейки и её внутренней границей (по умолчанию 0 пикселей) Рассмотрим пример Стобец 1 Стобец 2 Текст в первой ячейке первого столбца Текст во второй ячейке второго столбца В браузере отобразится выравненная по центру таблица следующего вида Строки tr и ячейки td в таблицах HTML Снова напомню о том, что таблицы формируются построчно (tr). В строках (tr) уже находятся ячейки (td). Если задавать параметр для строки (tr), то он будет действителен для всех ячеек (td) в этой строке, если для конкретной ячейки, то только для неё. В примерах выше я указывал цвет для строки, этот параметр распространялся соответственно для всех ячеек. Для тегов tr и td есть следующие align - выравнивание текста внутри ячейки. По левому краю (left), по правому краю (right), по центру (center) valign - выравнивание текста внутри ячейки по вертикали. Вверх (top), вниз (bottom), по центру (middle) bgcolor - задает цвет строки width - ширина столбца (все ячейки ниже примут данный параметр) указывается в пикселях или в процентах, где 100% ширина всей таблицы height - высота ячейки (все ячейки в строке примут данный параметр) Рассмотрим код, где содержимое ячеек (td), выравнено по разным краям: в первой по левому, во второй по правому: Стобец 1 Стобец 2 Текст в первой ячейке первого столбца Текст во второй ячейке второго столбца Стобец 1 Стобец 2 Результат С помощью таблиц можно сверстать очень даже неплохую страницу. Не забывайте, что в ячейки можно вставлять не только текст, но и изображения, ссылки и прочее!) Спасибо за внимание! Надеюсь материал был полезен! Загрузка... Стобец 1 Стобец 2 Текст в первой ячейке первого столбца Текст во второй ячейке второго столбца