Деление таблицы в html. Атрибуты и свойства и

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

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

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

Например,

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

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

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

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

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

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

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

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

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

шапка сайта

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

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

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

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

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

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

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

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

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

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

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

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

шапка меню

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

контент

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

низ сайта

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

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

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

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

Стал популярен, 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

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Стобец 1	Стобец 2
Текст в первой ячейке первого столбца	Текст во второй ячейке второго столбца

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

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

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

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

Как уже говорилось, первым делом следует оформить строки, затем в них прописывать уже ячейки. Для того чтобы не запутаться, советуем делать либо отступы между каждым блоком в одну-две строчки, либо же прописывать новый блок элементов, используя клавишу "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, то ее шифр достаточно скопировать и вставить именно в то место вашей страницы, в котором она, по вашему мнению, должна располагаться.

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

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

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

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

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

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

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

Результат:

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

Параметры 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 - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.

Например, добавим в наш код, в теги

Результат:

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

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

Л юбая таблица в 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	3

Строки №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-страниц, так что я предлагаю тебе создать свою первую полноценную уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства!

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