Как сделать таблицу html. Почти стандартный режим

1. Что такое HTML таблицы и зачем они нужны?

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

2. Какие теги у html таблиц?

Теги , задающие таблицу html пишутся так:

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

- строчка html таблицы
- столбец (ячейка) html таблицы.

А теперь давайте попробуем объединить все теги в одну таблицу. Для этого мы создадим html таблицу, которая состоит из двух строк и трех столбцов:

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

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

На самом деле, первая цифра в надписях - это номер ряда, а вторая номер ячейки (1х2 - первый ряд, вторая ячейка и т.д.).

3. Как задать фоновый цвет html таблиц?

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

Итак, для задания фона используется атрибут bgcolor="цвет_фона" .

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

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

Если нужно задать фоновый цвет ряду html таблицы, то тогда атрибут bgcolor="цвет_фона" применяем к тегу :

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

Точно так же задается и цвет каждой ячейки отдельно . Например, если нужно изменить цвет ячейки 1.2 на синий, то внутри открывающего тега атрибут bgcolor="цвет_фона" :

4. Как установить размер ширины и высоты ячеек html таблицы?

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

height - атрибут, устанавливающий высоту ячейки

width - атрибут, задающий ширину ячейки

А теперь на примере:

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

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

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

Так же, очень часто приходится задавать высоту height и ширину width в процентах :

содержимое ячейки

Если мы задаем для ячейки ширину в 40 процентов, как в нашем примере, то это значит, что на остальные ячейки у нас осталось еще 60 процентов, т.е. сумма их ширин не должна превышать 60 процентов. Все очень просто: в сумме мы имеем всего 100%. Считаем: 100 – 40 = 60.

5. Как выровнять текст внутри html таблицы?

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

Делается это с помощью атрибута:

align=”left” - выравнивает текст внутри html таблицы по левому краю

align=”center” - выравнивает текст html таблицы по центру

align=”right” - выравнивает текст внутри html таблицы по правому краю

Соответственно, атрибут align может принимать еще значения right и left. Значение justify при употреблении с тэгом атрибут align принимать не может.

Например, код html таблицы, текст которой выровнен по центру, выглядит так:

Прописав атрибут align="center" в открытии

Вот такой результат Вы получите в браузере:

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

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

valign="top" - содержание будет располагаться вверху ячейки

valign="middle" - содержание будет располагаться по центру ячейки

valign="bottom" - содержание будет располагаться внизу ячейки

Давайте рассмотрим данные атрибуты на нашем примере:

Вот что мы получим, если посмотрим в браузере результат работы атрибутов align и valign :

6. Как объединить ячейки и столбцы html таблицы?

В этой части нашей статьи мы поговорим об атрибутах colspan и rowspan .

colspan - определяет количество столбцов, на которые распространяется данная ячейка

rowspan - определяет количество рядов на которые распространяется данная ячейка

Значения colspan и rowspan могут принимать значение от 2 и больше, т.е. ячейка может растягиваться на два и более столбца (ряда).

Итак, сейчас на примере мы растянем ячейку 1х1 на два столбца (ячейки). Для этого мы будем использовать атрибут colspan="2", прописав его для ячейки 1х1. Код будет выглядеть так:

Как видим, ячейка 1х1 распространяется на длину двух ячеек. Соответственно, ее длина равняется суммированной длине этих двух ячеек (160 пикселей). Мы не прописали атрибут width для ячейки 1x1, но если бы мы решили это сделать, то width мы задали бы равным 160 пикселям. И еще, обратите внимание, что в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, почему – мы уже это обсудили – ячейка 1х1 равна двум ячейкам, благодаря атрибуту colspan.

С атрибутами colspan и rowspan необходимо обращаться очень аккуратно. Ошибка может привести к тому, что ваш сайт «поедет».

А теперь, когда мы разобрались с параметром colspan , давайте разберемся с параметром rowspan. Принцип действия тут тот же:

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

7. Как убрать, добавить или изменить отступы и как задать рамку html таблице?

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

border="ширина рамки в пикселях" - устанавливает ширину рамки

bordercolor="цвет рамки" - устанавливает цвет рамки

Давайте, например, сделаем нашей html таблице рамку черного цвета шириной 1 пиксель.

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

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

cellspacing="ширина отступа в пикселях" - отступ между ячейками

cellpadding="ширина отступа в пикселях" - отступ внутри ячейки (от края ячейки до текста, изображения, ссылки...)

Например, давайте сделаем отступ между ячейками 10 пикселей, а отступ от края ячейки до текста увеличим до 20 пикселей. Делается это так:

Если посмотреть на результат в браузере, то мы четко видим, что расстояние между ячейками (cellspacing ) нашей html таблицы увеличилось до 10 пикселей, а расстояние между текстом и внутренним краем ячейки увеличилось на 20 пикселей.

Если же необходимо вообще убрать отступы, то просто напросто поставьте cellpadding="0" и cellspacing="0" .

8. Как одну html таблицу вставить внутрь другой?

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

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

Делается это очень просто:

Вот что получилось в результате новых преобразований нашей таблицы (красные ячейки - внутренняя таблица, находящаяся внутри большой таблицы):

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

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

Для фреймов в HTML:

Для фреймов в XHTML:

Изображения друг под другом

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

Пример 1.2. Вывод двух изображений

HTML 4.01 IE Cr Op Sa Fx

Поскольку рисунки предварительно были одним и «разрезаны» для удобства, они образуют единое изображение (рис. 1.1).

Рис. 1.1. Вывод изображений в почти стандартном режиме

В стандартном режиме между изображениями образуется небольшой промежуток (рис. 1.2).

Рис. 1.2. Вывод изображений в стандартном режиме

Для обхода этой особенности в стандартном режиме существует два основных способа:

1. добавить display : block для изображений;
2. использовать свойство line-height для родительского контейнера.

Рассмотрим эти способы подробнее.

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

Пример 1.3. Использование свойства block

Не обязательно применять свойство display , также можно воспользоваться line-height , это свойство задаёт межстрочный интервал. Установив значение 1px для тега

Внутри которого располагаются изображения, мы получим аналогичный результат (пример 1.4).

Пример 1.4. Использование свойства line-height

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Изображения в таблице

При добавлении изображения в ячейку таблицы также проявляется разница между режимами браузера. Для понимания разберем следующий код (пример 1.5). Чтобы стала заметна граница вокруг таблицы, в стилях добавлено свойство border для селектора TABLE .

Пример 1.5. Изображение в таблице

HTML 4.01 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.3а. Для стандартного режима вывод изображения несколько отличается (рис. 1.3б).

а	б

Рис. 1.3. Изображение в таблице. а - почти стандартный режим, б - стандартный режим

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

Рис. 1.4. Базовая линия текста

Опять же, существует несколько способов изменить поведение изображений в таблице. Первый способ уже упоминался, это преобразование тега в блочный элемент с помощью свойства display со значением block (см. пример 1.3). Стиль в таком случае будет следующий:

TABLE IMG { display: block; }

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

Пример 1.6. Выравнивание изображений

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Текст

Хотя во всех браузерах в данном примере наблюдается выравнивание изображения по нижнему краю, несколько различается выравнивание самого текста. Браузеры Firefox, Safari, IE7 выравнивают текст по нижнему краю рисунка, а Opera, IE8, IE9 - по верхнему.

Однопиксельные рисунки

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

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

Здесь класс line задает размеры ячейки.

Здравствуйте, уважаемые читатели блога! Частенько на web-страницы, кроме текста и картинок, возникает необходимость вывести различные данные в виде таблиц. Да это и понятно, таблица — удобнейший способ представления большого количества сведений. Поэтому возникает вопрос «Как же вставлять таблицы в html?» . В этой статье я отвечу вам на этот вопрос и приведу вам множество примеров различных html таблиц.

Как создать таблицу используя HTML

HTML-таблицы создаются в четыре шага.

1. На первом шаге в html-коде с помощью парного тега

2. На втором шаге формируем строки таблицы, помещая парные теги внутрь

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

4. Ну и на последнем шаге помещаем внутрь элементов и содержимое ячеек. HTML-код вставки таблицы на веб-страницу выглядит примерно так:

Более тонко настроить отображение границ помогут . С помощью можно изменить толщину и цвет рамок, а также изменить тип границ.

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

Если понадобиться как-то оформить вставляемый текст, то можно использовать .

Кроме текста мы можем помещать в ячейки картинки с помощью тега :

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

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

• для создания таблицы используется только тег ;
  тег
  может находиться только внутри тега ;
  теги
  , любое другое содержимое тега игнорируется браузером;
  содержимое таблицы(текст или картинки) может находиться только в тегах

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

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

  помещают сразу после открывающего тега :

  Это таблица

  Ячейка 1.1	Ячейка 1.2
Ячейка 2.1	Ячейка 2.2

  Отображение:

  Секции таблицы

  Таблицу html можно логически разбить на части — секции. Всего существует три вида секций:

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

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

  .

  Секцию тела создают парным тегом

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

  Секция завершения формируется парным тегом

  и в пределах одного контейнера может быть только одна.

  Все эти парные теги должны содержать теги

  , которые формируют строки, относящиеся к соответствующим секциям:

  Столбец 1	Столбец 2	Столбец 3
Ячейка 1.1	Ячейка 1.2	Ячейка 1.3
Ячейка 2.1	Ячейка 2.2	Ячейка 2.3
Итог 1	Итог 2	Итог 3

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

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

  и	могут находиться только внутри тега
  и	; ячейки таблицы должны иметь хоть какое-то содержимое, иначе браузер может их вообще не отобразить, если же какая-то ячейка должна быть пустой, то в нее обычно помещают неразрывный пробел (HTML-литерал); таблица относится к блочным элементам web-страницы; размеры таблицы и ее ячеек зависят от содержимого, т.е. таблица растягивается по ширине и высоте так, чтобы все уместилось; между границами отдельных ячеек и между границей каждой ячейки и ее содержимым делается небольшой отступ; текст ячеек заголовка(элемент th) выводится полужирным шрифтом и выравнивается по центру; границы вокруг таблицы и ее ячеек по умолчанию не рисуются. Заголовок таблицы Начнем с парного тега
  и	. Атрибут colspan задает количество ячеек объединенных по горизонтали, а rowspan — по вертикали: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 Результат примера: 1.1 1.2-1.3 2.1 2.2 2.3 3.1-4.1 3.2 3.3 4.2 4.3 При объединении ячеек важно проверить количество ячеек в каждой строке, чтобы не было ошибок. Так, конструкция	заменяет две ячейки, поэтому в следующей строке должно быть два тега		, либо такая же конструкция! Если число ячеек во всех строках не будет совпадать, то появятся пустые лишние ячейки. Пример неправильного html-кода при объединении ячеек: ячейка 1.1 ячейка 1.2 ячейка 2.1 ячейка 2.2 И результат отображения в браузере: Т.е. если проанализировать html-код, то вы заметите, что в первой строке задано три ячейки, две из которых объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. По этому во второй строке возникает третья пустая ячейка. Атрибуты тега В этом посте мы уже столкнулись с одним атрибутом тега . С атрибутом border, который задает толщину рамки в пикселях. По умолчанию он равен 0 и следовательно ячейки по умолчанию отображаются без рамки. Кроме атрибута border есть еще несколько важных атрибутов поддерживаемых тегом . Давайте их рассмотрим. Атрибут align — задает выравнивание таблицы на странице. Может принимать значения left, center, right, которые задают выравнивание соответственно по левому краю, по центру и по правому краю. По умолчанию равен left. Атрибут background , который задает фоновый рисунок к таблице. В качестве значения принимает адрес файла с изображением. bgcolor — устанавливает цвет фона таблицы. Можно использовать совместно с атрибутом background. Атрибут bordercolor задает цвет рамки таблицы. Cellpadding — определяет расстояние между границей ячейки и ее содержимым . Позволяет улучшить читабельность таблицы. В качестве значения может быть любое положительное число. Cellspacing — задает расстояние между внешними границами ячеек . На этом рассказывать о том как вставить таблицу в html страницу я закончу, только подведу итоги: для вставки таблицы используются теги — обозначение таблицы, — добавление строки и , секция завершения и секция тела — ; для объединения ячеек используем атрибуты тега — вставка ячейки; таблица представляет из себя блочные элемент web-страницы; в качестве содержимого ячеек может быть не только текст, но и картинки и другие таблицы; таблица может содержать три вида секций: секция заголовка — colspan и rowspan. На этом все, в следующем посте я расскажу о средствах навигации на html-сайте. Чтобы не пропустить этот пост подписывайтесь на обновления моего блога ! Все, до новых встреч! Таблицы в HTML настолько функциональны, что с помощью них можно верстать целые сайты (читайте ). Сейчас мы поговорим о вставке на веб-страницу несложных HTML-таблиц, разбирая только разметку, но не касаясь оформления, потому что украшать таблицы лучше с помощью CSS-стилей. Теги и атрибуты таблиц Вот основные элементы, которые нужны для создания таблиц: - контейнер, внутри которого располагается таблица (такой же, как для маркированных или для нумерованных списков). border - атрибут, определяющий толщину рамок. Вместо него лучше использовать свойство border CSS. задаёт подпись таблицы. Контейнер можно не использовать, но если вы всё-таки решили озаглавить таблицу, то ставьте его сразу после тега , вне ячеек и строк. - парный тег, содержащий строку таблицы (ячейки, расположенные на одном уровне по горизонтали). , столько ячеек в ней и будет: один тег - одна ячейка. позволяет группировать столбцы, быстро и не засоряя код задавать им общие характеристики. С помощью контейнера можно отделять логические части таблицы друг от друга. Располагается после тега - тег, создающий ячейку заголовка таблицы. Внешне её содержимое отличается от контента в других ячейках - обычно текст внутри обозреватель выделяет жирным и размещает по центру. - контейнер, с помощью которого создаётся простая ячейка. Сколько таких тегов будет содержать строка (тег , если его нет, то после . используется для той же цели, что и . может содержать , но не наоборот. span - атрибут, задающий число столбцов, к которым применяются свойства контейнера . , и - контейнеры, которые позволяют разделить таблицу соответственно на верхнюю (заголовки), основную (тело) и нижнюю (итоговую) части. В HTML-таблице последовательность этих тегов такая же, как последовательность контейнеров , и Инструменты создания сайтов Назначение Инструмент Разметка HTML XHTML Оформление CSS Разработка PHP Python В браузере документ будет выглядеть так: Разберём, какие строчки кода за что отвечают. - открыли таблицу, задав ей толщину рамок. - озаглавили её. - открыли строку. - создали ячейку с оформлением заголовка. - создали вторую заголовочную ячейку в строке. Параметром colspan указали, что эта ячейка должна занимать по горизонтали две. - закрыли строку. Аналогично создали остальные строки. - добавили вторую строку таблицы уже с обычными, а не заголовочными, ячейками. Аналогично вставили последующие строки и ячейки. Инструменты создания сайтов Назначение Инструмент Разметка HTML XHTML - закрыли таблицу. Л юбая таблица в 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-страниц, так что я предлагаю тебе создать свою первую полноценную уже прямо сейчас. Пройденного материала вполне хватит для этого. Вперед к покорению гиперпространства! / То, без чего не создать сайт: ∼ ∼ Похожие публикации: Мобильное приложение Битрикс24 Мобильный трафик набирает обороты Почта гонконга отслеживание почтовых отправлений Гонконг пост отслеживание посылок на русском языке Проблемы с Malwarebytes Anti-Malware и способы их решения Поиск оптимального решения в Excel  Категории