Таблицы в HTML: создание ячеек, строк, столбцов, теги для оформления таблиц, разметка, границы и др. элементы

Оказывается, таблицы в HTML применяются не только привычным нам образом (как набор данных, распределённых по ячейкам, строкам и столбцам), но и для удобства размещения информации на страницах сайта. Проще говоря, можно представить всю html-страницу в виде таблицы и, например, поместить меню в её левый столбец, основную информацию — в средний столбец, а дополнительные ссылки — в правый столбец. Количество столбцов, строк и ячеек в таблице выбирается только тобой и может быть любым.

Это называется «Табличная вёрстка сайтов».

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

В общем, использование таблиц в HTML значительно упрощает создание сайта. Впрочем, ты сам всё увидишь!

Поэтому давай перейдём непосредственно к практике создания и оформления таблиц на языке HTML.

Отзыв посетителя:

Добрый день, У меня получилось создать сайт, благодаря вашей информации и инф 2 других сайтов. Я хотела высказать пожелания для вашего сайта, что не хватает новичку. Когда я создавала таблицу в htm , то долго сайт "ехал." Причина была в том, что при слитии колонок, вы не указывали, что одну колонку нужно удалять. Эту информацию я нашла только на 1 сайте из 20.Может быть это увеличит читаемость вашего сайта.

Елена Гальченко.

§1. Создание таблицы в HTML

Сама таблица в HTML создаётся тегами < TABLE> и < /TABLE>, строки таблицы (помещаются между тегами < TABLE> и < /TABLE>) — тегами < TR> и < /TR>, а столбцы таблицы (помещаются между тегами < TR> и < /TR>) — тегами < TD> и < /TD>.

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

< table> — начало таблицы

< tr> — начало строки

< td>Первая ячейка< /td> — первый столбец

< td>Вторая ячейка< /td> — второй столбец

< /tr> — конец строки

< /table> — конец таблицы

Примечание:

Чтобы браузер выводил HTML-код, как текст, я ставлю после угловой скобки «<» пробел. Ты набирай код без этого пробела!

Этот же код HTML можно записать и так:

< table>< tr>< td>Первая ячейка< /td>< td>Вторая ячейка< /td>< /tr>< /table>

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

§2. Рамка таблицы (границы) в HTML

По умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы (её граница) была видна, в HTML используется уже знакомый тебе по предыдущим разделам атрибут «border»:

< table border="1">
  < tr>
    < td>Первая ячейка< /td>
    < td>Вторая ячейка< /td>
  < /tr>
< /table>

И тогда браузер покажет:

Первая ячейка

Вторая ячейка

Значение атрибута «border» влияет только на внешнюю рамку таблицы, границы между ячейками изменять нельзя. Их можно либо показывать, либо нет.

Например, если изменить значение атрибута «border» с «1» на «5»:

< table border="5">
  < tr>
    < td>Первая ячейка< /td>
    < td>Вторая ячейка< /td>
  < /tr>
< /table>

То мы получим:

Первая ячейка

Вторая ячейка

Можно поменять цвет рамки таблицы с помощью атрибута «bordercolor». Например:

< table border="5" bordercolor="#FF0000">
  < tr>
    < td>Первая ячейка< /td>
    < td>Вторая ячейка< /td>
  < /tr>
< /table>

Тогда в браузере мы увидим:

Первая ячейка

Вторая ячейка

§3. Отступы в таблице

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

< table border="1" cellspacing="10">
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

Браузер покажет:

Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

Для того, чтобы задать отступы внутри ячеек таблицы, в HTML применяется атрибут «cellpadding». Если в нашем HTML-коде поменять первую строку:

< table border="1" cellpadding="10">
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

То мы получим:

Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

То есть, в случае с «cellspacing» — меняется расстояние между ячейками таблицы (увеличивается/уменьшается толщина границы между ними), а в случае с «cellpadding» — изменяется расстояние от содержимого ячейки (текст, графика) до её границы.

§4. Объединение ячеек таблицы в HTML

Чтобы объединить ячейки таблицы по горизонтали (столбцам) или по вертикали (строкам), в HTML применяются следующие атрибуты:

colspan — объединение ячеек по горизонтали (столбцам);
rowspan — объединение ячеек по вертикали (строкам).

Например, изменим код HTML нашей таблицы так:

< table border="1" cellpadding="10">
  < tr>
    < td colspan="2">Первая и вторая ячейки< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

Тогда в браузере мы увидим:

Первая и вторая ячейки		Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

А если изменить HTML-код таблицы так:

< table border="1" cellpadding="10">
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td rowspan="2">Третья и шестая ячейки< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>
  < /tr>
< /table>

То получим:

Первая ячейка	Вторая ячейка	Третья и шестая ячейки
Четвертая ячейка	Пятая ячейка	Третья и шестая ячейки

§5. Заголовок таблицы в HTML

В случае использования таблицы для упорядочивания данных (а не для разметки страницы), может понадобиться использование заголовка. Заголовок таблицы в HTML задаётся тегами < caption>< /caption>. Например:

< table border="1" cellpadding="10">
< caption>Заголовок таблицы< /caption>
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

В браузере это выглядит так:

Заголовок таблицы
Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

К заголовку таблицы можно применить атрибут «align». Для выравнивания относительно таблицы.

Примечание:

Значения атрибута «align» разными браузерами могут интерпретироваться по разному!

У атрибута «align» тега «Table» бывают следующие значения:

left — выравнивает заголовок по левому краю таблицы;
right — выравнивает заголовок по правому краю таблицы;
center — выравнивает заголовок по центру таблицы (значение по умолчанию);
top — то же, что и «center», только работает во всех браузерах;
bottom — заголовок размещается под таблицей по центру.

Пример:

< table border="1" cellpadding="10">
< caption align="bottom">Заголовок таблицы< /caption>
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

В браузере:

Заголовок таблицы
Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

§6. Размеры таблицы в HTML (ширина и высота)

Расскажу тебе про большой секрет (шутка): изменить размеры таблицы и её ячеек в HTML можно с помощью следующих атрибутов:

width — ширина таблицы, столбца, ячейки;
height — высота таблицы, строки, ячейки.

Их значения задаются в пикселях или процентах. Например:

< table border="1" cellpadding="10" height="150px">
  < tr>
    < td>Первая ячейка< /td>< td width="75%">Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

Выглядеть это будет так:

Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

§7. Выравнивание таблицы в HTML

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

center — выравнивание таблицы по центру;
left — выравнивание таблицы по левому краю;
right — выравнивание таблицы по правому краю.

По умолчанию, выравнивание таблицы происходит по левому краю. Выровним таблицу по центру:

< table border="1" cellpadding="10" align="center">
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

В браузере:

Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

Для того, чтобы в HTML выровнять текст в таблице (и другое её содержимое), нужно использовать атрибут «align» для каждой конкретной ячейки! Т. к. именно в ячейках располагается всё содержимое таблицы. Пример:

< table border="1" cellpadding="10">
  < tr>
    < td align="right">Первая ячейка< /td>< td align="center">Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td align="right">Шестая ячейка< /td>
  < /tr>
< /table>

В браузере:

Первая ячейка (выровнена по правому краю)	Вторая ячейка (выровнена по центру)	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка (выровнена по правому краю)

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

baseline — выравнивание по базовой линии;
bottom — выравнивание по нижнему краю;
middle — выравнивание по середине (значение по умолчанию);
top — выравнивание по верхнему краю.

Пример:

< table border="1" cellpadding="10" height="150px">
  < tr>
    < td valign="top">Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td valign="bottom">Шестая ячейка< /td>
  < /tr>
< /table>

В браузере:

Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

§8. Фон таблицы в HTML

В HTML, цвет фона таблицы или отдельных её ячеек устанавливается с помощью атрибута «bgcolor». О том, как в HTML выбрать нужный цвет того или иного элемента, мы говорили в уроке про атрибуты тега «Body». Пример:

< table border="1" cellpadding="10" bgcolor="#999999">
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td bgcolor="#FF0000">Пятая ячейка< /td>< td>Шестая ячейка< /td>
  < /tr>
< /table>

В браузере мы увидим:

Первая ячейка	Вторая ячейка	Третья ячейка
Четвертая ячейка	Пятая ячейка	Шестая ячейка

В качестве фона таблицы или отдельной ячейки, можно использовать картинки. В HTML это делается при помощи атрибута «background». Значением атрибута «background» является адрес до изображения (как в HTML вставляется графика, мы изучали в этом уроке). Пример картинки-фона для всей таблицы:

< table border="1" cellpadding="10" background="fon.jpg">
  < tr>
    < td>Первая ячейка< /td>< td>Вторая ячейка< /td>
  < /tr>
  < tr>
    < td>Третья ячейка< /td>< td>Четвёртая ячейка< /td>
  < /tr>
< /table>

В браузере:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвёртая ячейка

Для отдельной ячейки таблицы, картинка-фон задаётся так:

< table border="1" cellpadding="10">
  < tr>
    < td>Первая ячейка< /td>< td background="fon.jpg">Вторая ячейка< /td>
  < /tr>
  < tr>
    < td>Третья ячейка< /td>< td>Четвёртая ячейка< /td>
  < /tr>
< /table>

В браузере:

Первая ячейка	Вторая ячейка
Третья ячейка	Четвёртая ячейка

§9. Заключение

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

В каждую ячейку таблицы можно вставить любые другие данные: текст, картинки или другую таблицу. Именно поэтому они так удобны для разметки html-страниц и разбивки их на отдельные блоки. Например, можно создать такую «композицию»:

Эх, где моя молодость!

И это — самое простое из того, что можно сделать с помощью таблиц в HTML! Создание сайта на основе табличной вёрстки — под силу абсолютно любому новичку! Этот урок — тому доказательство.

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

Имея эти знания, я начал варганить весь этот сайт. Поэтому тебе я настоятельно рекомендую применить полученные знания на практике. Хотя впереди ещё предстоит раздел о метатегах в HTML, но они прямого отношения к созданию сайта не имеют. Так что закрепляй знания из этой части и жми кнопку «Дальше».

Автор и эксперт: Алексей Востров.

Содержание Дальше

Ещё материалы по этой теме:

Петя Пушкин
25 сен 2012 в 18:44
А в html таблицы теги и атрибуты везде работают? То есть если я создам сайт на html, сделаю его 2 копии, одну вылажу в интернет, другую скопирую на диск и принесу в школу учителю, то и в Интернете, и на диске сайт будет работать?

Сеодед.ру
25 сен 2012 в 19:58
Да, будет. При условии, что все ресурсы, которые небходимы для работы сайта (картинки, тексты, файлы), у тебя будут и в Интернете, и на диске. А не останутся на компьютере.

Сорокин
17 авг 2015 в 11:07
А где в html создание таблицы осуществляется для верстки? Куда вставить таблицу, чтоб сайт сделать?

Сеодед.ру
17 авг 2015 в 15:15
Как и всё содержимое страницы — между тегами < body>< /body>.

Сорокин
17 авг 2015 в 17:51
Ну я вставил таблицу между тегами body. А как теперь сайт создать?

Сеодед.ру
17 авг 2015 в 19:43
Начни отсюда «Основные теги HTML» и дальше по порядку все уроки изучи.

Как сделать таблицу в HTML: создание, оформление, разметка

Содержание урока:

§1. Создание таблицы в HTML

§2. Рамка таблицы (границы) в HTML

§3. Отступы в таблице

§4. Объединение ячеек таблицы в HTML

§5. Заголовок таблицы в HTML

§6. Размеры таблицы в HTML (ширина и высота)

§7. Выравнивание таблицы в HTML

§8. Фон таблицы в HTML

§9. Заключение

Ещё материалы по этой теме:

Комментарии:

Полезные ссылки: