таблицы html Как создать свой сайт > Основы HTML > Руководство по HTML > Создание таблиц в HTML

Таблицы в HTML

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

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

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

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


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

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

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

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

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

< table> — начало таблицы
  < tr> — начало строки
    < td>Первая ячейка< /td> — первый столбец
    < td>Вторая ячейка< /td> — второй столбец
  < /tr> — конец строки
< /table> — конец таблицы
Примечание. Помни, чтобы браузер выводил HTML-код, как текст, я ставлю после угловой скобки «<» пробел. Ты набирай код без этого пробела!

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

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

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

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

    По-умолчанию, таблица в браузерах представляется без рамки. Чтобы рамка таблицы была видна, используется уже знакомый тебе по предыдущим разделам атрибут «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>

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

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

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

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

, то мы получим:

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


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

    Чтобы объединить ячейки таблицы по горизонтали (столбцам) или по вертикали (строкам), в 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>

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

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

    А если так:

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

, то получим:

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

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

    В случае использования таблицы для упорядочивания данных (а не для разметки страницы), может понадобиться использование заголовка. Заголовок таблицы задаётся тегом < 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» бывают следующие значения:

  • 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. Размеры таблицы

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

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

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

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

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

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

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


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

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

  • center — выравнивание таблицы по центру;

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

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

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

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

    В браузере:

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

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

< table border="1" cellpadding="10" align="center">
  < 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">
  < tr>
    < td valign="top">Первая ячейка< /td>< td>Вторая ячейка< /td>< td>Третья ячейка< /td>
  < /tr>
  < tr>
    < td>Четвертая ячейка< /td>< td>Пятая ячейка< /td>< td valign="bottom">Шестая ячейка< /td>
  < /tr>
< /table>

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

    В 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, но они прямого отношения к созданию сайта не имеют. Так что закрепляй знания из этой части и жми кнопку «Дальше».

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

⇓ 

Поделись ссылкой на Seoded.ru с друзьями, знакомыми и собеседниками в соцсетях и на форумах! А сам сайт добавь в закладки! Так победим.

Поделиться ссылкой на эту страницу в:

    С уважением, (ВКонтакте, Твиттер, Одноклассники, Телеграм).

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

Работа рерайтером или работа копирайтером идеально подойдут для новичка. Имя сайта — это его доменное имя и его нужно зарегистрировать.

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

покупка продажа ссылок продать статью создать свой сайт заработок в интернете заработать в интернете деньги

основан в 2008 г. © Все права на материалы сайта Seoded.ru принадлежат Алексею Вострову.
Копирование (полное или частичное) любых материалов сайта возможно только с разрешения автора и при указании ссылки на источник.
Ослушавшихся находит и забирает Бабайка!