Домой / Html учебник / 11 Урок. Как создать таблицу в html?

11 Урок. Как создать таблицу в html?

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

Таблица в html

Что такое таблица в html:

1

Тэги для создания таблиц:

  • <TABLE> - задает саму таблицу. Закрывающий тэг обязателен;
  • <TR> - задает новый ряд таблицы, обязателен закрывающий тэг;
  • <TD> - задает новую ячейку таблицы. имеет закрывающий тэг.

Если не задавать никаких атрибутов, то по умолчанию таблица не имеет рамки. Но тэг TABLE имеет атрибут BORDER="ширина рамки px", который задает рамку таблицы в пикселах.

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

В html коде пишем:

<TABLE border="1">
  <TR>
    <TD> 1 ряд, 1 ячейка </TD>
    <TD> 1 ряд, 2 ячейка </TD>
  </TR>
  <TR>
    <TD> 2 ряд, 1 ячейка </TD>
    <TD> 2 ряд, 2 ячейка </TD>
  </TR>
</TABLE>

Что получим в браузере:

1

 

Теперь разберем каждый элемент таблицы (все они имеют закрывающий тэг):

  • <table> - определяет таблицу;
  • <tr> - определяет ряд;
  • <td> - определяет столбец в ряду.

Изменяем ширину и высоту таблиц, рядов и ячеек

Мы можем задать ширину и высоту либо всей таблице, либо каждому элементу таблицы - рядам и ячейкам.

Для этого существуют атрибуты:

  • width="px" - задает ширину таблице, ячейке, т. д. Значение пишется в пикселах, либо в процентах;
  • height="px" - задает высоту таблице, ячейке, т. д. Значение пишется в пикселах, либо в процентах.

Html часть:

<TABLE border="1" width=400 height=100>
  <TR>
    <TD> 1 ряд, 1 ячейка </TD>
    <TD> 1 ряд, 2 ячейка </TD>
  </TR>
  <TR>
    <TD> 2 ряд, 1 ячейка </TD>
    <TD> 2 ряд, 2 ячейка </TD>
  </TR>
</TABLE>

Вот что получилось

1

Мы задали ширину и высоту всей таблицы. Также можно задать ширину и высоту каждому ряду и каждой ячейки.


Простираем один ряд или ячейку на несколько рядов или ячеек

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

Атрибуты:

  • colspan="кол-во ячеек" - определяет количество ячеек, на которые будет простираться ряд. По умолчанию имеет значение 1;
  • rowspan="кол-во рядов" - определяет количество рядов, на которые будет простираться ячейка. По умолчанию - 1.

Пример для colspan:

<TABLE border="1" width=400 height=100>
  <TR>
    <TD colspan="2"> 1 ряд, 1+2 ячейка </TD>
  </TR>
  <TR>
    <TD> 2 ряд, 1 ячейка </TD>
    <TD> 2 ряд, 2 ячейка </TD>
  </TR>
</TABLE>

Результат:

1

Пример для rowspan:

<TABLE border="1" width=400 height=100>
  <TR>
    <TD rowspan="2"> ячейка 1, ряд 1+2 </TD>
    <TD> ячейка 2, ряд 1 </TD>
  </TR>
  <TR>
    <TD> 2 ряд, 2 ячейка </TD>
  </TR>
</TABLE>

Получим:

1


Выравниваем содержимое ячеек

Атрибуты:

  • align=" " - выравнивает содержимое всей таблицы или отдельных ячеек по горизонтали. Возможные значения: "left", "center", "right";
  • valign=" " - выравнивает содержимое всей таблицы или отдельных ячеек по горизонтали. Возможные значения: "top", "bottom", "middle".

Пример для align:

<TABLE border="1" width=400 height=100>
  <TR>
    <TD align="center"> ряд 1 ячейка 1 </TD>
    <TD> ряд 1 ячейка 2 </TD>
  </TR>
  <TR>
    <TD align="right"> ряд 2 ячейка 1 </TD>
    <TD align="center"> ряд 2 ячейка 2 </TD>
  </TR>
</TABLE>

Результат:

1

Пример для valign:

<TABLE border="1" width=400 height=100>
  <TR>
    <TD valign="bottom"> ряд 1 ячейка 1 </TD>
    <TD> ряд 1 ячейка 2 </TD>
  </TR>
  <TR>
    <TD valign="top"> ряд 2 ячейка 1 </TD>
    <TD align="middle"> ряд 2 ячейка 2 </TD>
  </TR>
</TABLE>

Результат:

1

Задаем фон таблице

Атрибуты:

  • bgcolor="цвет" - задает цвет фона таблице или ее элементам;
  • background="url" - задает фон в виде картинки таблице или ее элементам.

Пример для bgcolor:

<TABLE border="1" width=400 height=100>
  <TR>
    <TD bgcolor="red"> ряд 1 ячейка 1 </TD>
    <TD> ряд 1 ячейка 2 </TD>
  </TR>
  <TR>
    <TD bgcolor="green"> ряд 2 ячейка 1 </TD>
    <TD bgcolor="#9527DE"> ряд 2 ячейка 2 </TD>
  </TR>
</TABLE>

Результат:

1

Пример для background:

<TABLE border="1" width=400 height=100>
  <TR>
    <TD background="kartinka.jpg"> ряд 1 ячейка 1 </TD>
    <TD> ряд 1 ячейка 2 </TD>
  </TR>
  <TR>
    <TD> ряд 2 ячейка 1 </TD>
    <TD background="kartinka.jpg"> ряд 2 ячейка 2 </TD>
  </TR>
</TABLE>

Результат:

1

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

Заключение

Урок оказался довольно обширным, но, надеюсь, не менее полезным 🙂

12 Урок. Как сделать каркас сайта? Таблицы html

Добавить комментарий

Ваш адрес email не будет опубликован.