Войти
Регистрация

Создание таблиц в HTML

Создание таблиц в HTML

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

Что такое таблица на языке HTML?

Это некий контейнер, который содержит в себе столбцы и строки и создается парным тегом <table> и закрывающим его </table>. Вот внутри этого тега мы и будем создавать строки и столбцы (надеюсь, что под фразой "внутри тега" Вы понимаете, что это содержимое между открывающим и закрывающим тегами).

И так, создадим таблицу:

<table>
</table>

Конечно, это нам не даст желаемого результата, т.к. необходимо добавить содержимое, а именно строки и столбцы. Добавим строку с помощью парного тега <tr> и внутри него добавим ячейку через парный тег <td> и добавим текст в него:

<table>
  <tr>
    <td>столбец 1 / строка 1</td>
    <td>столбец 2 / строка 1</td>
  </tr>
  <tr>
    <td>столбец 1 / строка 2</td>
    <td>столбец 2 / строка 2</td>
  </tr>
</table>

Это самый наглядный пример того, как выглядит HTML таблица.

Но если Вы откроете ее в браузере, то не увидите ее, а только содержимое, т.к. изначально таблица не имеет границ. Границу задают с помощью атрибута border в открывающем теге <table>. Поставьте ширину границы в 1 пиксель, указав border="1"

Также можно указать ширину и высоту таблицы, указав соответственно width и height. Размеры можно указать как в процентах (относительная величина), так и в пикселях (абсолютная величина). Разница в них большая. Относительная величина изменяется по отношению к размеру экрана, а абсолютная статична. Оба варианта применяются в зависимости от ситуации. Напишем 50% и в результате наш тег выглядит так:

<table border="1" height="50%" width="50%">

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

<table border="1" height="50%" width="50%" cellspacing="0">

Далее на очереди тег <tr>, обозначающий строку, но к нему эти атрибуты особо не применяются, поэтому перейдем к ячейке с парным тегом<td>

К этому тегу применяются следующие атрибуты:

  • width и height - ширина и высота ячейки.
  • colspan - указывает на количество столбцов, которые занимает ячейка, чем-то похоже на объединение, но не совсем то.
  • rowspan - указывает на количество строк, которые занимает ячейка.
  • align - значение этого атрибута выравнивает содержимое ячейки по горизонтали в следующих направлениях: left (влево), center (по центру), right (вправо).
  • valign - значение этого атрибута выравнивает содержимое ячейки по вертикали по следующим направлениям: top (по верхней границе ячейки), middle (по середине ячейки), bottom (по нижней границе ячейки).

Теперь давайте сделаем следующее:

  • Атрибут colspan со значением 2 укажем в столбец 1 / строка 1
  • Атрибут rowspan со значением 2 укажем в столбец 2 / строка 1
  • Атрибуты align со значением center и valign со значением bottom укажем в столбец 1 / строка 2
  • Атрибут align со значением right укажем в столбец 2 / строка 2
<table>
  <tr>
    <td colspan="2">столбец 1 / строка 1</td>
    <td rowspan="2">столбец 2 / строка 1</td>
  </tr>
  <tr>
    <td align="center" valign="bottom">столбец 1 / строка 2</td>
    <td align="right">столбец 2 / строка 2</td>
  </tr>
</table>

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

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

"Дорогу осилит идущий"

С уважением, Самвел Погосов

Рекомендую к изучению мой бесплатный видеокурс по HTML и CSS для начинающих с подробными видеоуроками и заданиями: Перейти к видеокурсу

Комментарии к статье

Бесплатный видеокурс

HTML и CSS для начинающих

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

Получить курс
Опрос

Для чего Вы изучаете HTML и CSS?