Создаем таблицы.



Таблицы необходимый атрибут для сайта. С помощью таблиц можно создавать интересные страницы.

Что представляет собой таблица? Это набор рядов и столбцов. Пересекаясь они создают ячейку таблицы.

  • <table></table> - тег с помощью которого задается таблица
  • <tr></tr> - теги, обозначающие строки таблицы "table row/табличный ряд". Открывающий и закрывающий теги горизонтальных ячеек.
  • <td></td> - теги для вывода столбцов "table data/табличные данные". Имеет открывающий и закрывающий теги построения столбцов.
  • <th></th> - теги задают название ячеек в первой строке таблицы.
Пример записи кода:

<html> <head> <title></title> </head> <body> <table> <caption>Название таблицы</caption> <tr><th>ячейка 1</th><th>ячейка 2</th><th>ячейка 3</th></tr> <tr><td>ячейка 11</td><td>ячейка 12</td><td>ячейка 13</td></tr> <tr><td>ячейка 21</td><td>ячейка 22</td><td>ячейка 23</td></tr> <tr><td>ячейка 31</td><td>ячейка 32</td><td>ячейка 33</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ:

Название таблицы
ячейка 1ячейка 2ячейка 3
ячейка 11ячейка 12ячейка 13
ячейка 21ячейка 22ячейка 23
ячейка 31ячейка 32ячейка 33

Параметрами таблицы являются:

  • width - ширина таблицы (в пикселах или % от ширины экрана),
  • bgcolor - цвет фона ячеек таблицы,
  • background - фон таблицы заливается рисунком,
  • border - рамка, указанной ширины (в пикселах), вокруг всей таблицы,
  • cellpadding - отступ в пикселях между границей таблицы и ее содержимым.

Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="250" bgcolor="pink" border="1"> <caption>Название таблицы</caption> <tr><th>ячейка 1</th><th>ячейка 2</th><th>ячейка 3</th></tr> <tr><td>ячейка 11</td><td>ячейка 12</td><td>ячейка 13</td></tr> <tr><td>ячейка 21</td><td>ячейка 22</td><td>ячейка 23</td></tr> <tr><td>ячейка 31</td><td>ячейка 32</td><td>ячейка 33</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ:

Название таблицы
ячейка 1ячейка 2ячейка 3
ячейка 11ячейка 12ячейка 13
ячейка 21ячейка 22ячейка 23
ячейка 31ячейка 32ячейка 33

Работаем с таблицей дальше. Как видите записи в таблице прижаты к рамке. Чтобы внести изменения, рассмотрим следующие атрибуты таблицы.


  • align - выравнивание таблицы: слева (right), справа (left), по центру (center),
  • cellspacing - устанавливает расстояние между ячейками таблицы (в пикселах),

Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="250" bgcolor="pink" border="1" align="center" cellpadding="10" cellspacing="3"> <caption>Название таблицы</caption> <tr><th>ячейка 1</th><th>ячейка 2</th><th>ячейка 3</th></tr> <tr><td>ячейка 11</td><td>ячейка 12</td><td>ячейка 13</td></tr> <tr><td>ячейка 21</td><td>ячейка 22</td><td>ячейка 23</td></tr> <tr><td>ячейка 31</td><td>ячейка 32</td><td>ячейка 33</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ:

Название таблицы
ячейка 1ячейка 2ячейка 3
   ячейка 11   ячейка 12   ячейка 13
   ячейка 21   ячейка 22   ячейка 23
   ячейка 31   ячейка 32   ячейка 33

границы таблицы двойные, но если установить cellspacing="0", границы станут привычными.


Пример записи кода:

<html> <head> <title></title> </head> <body> <table width="250" bgcolor="pink"border="1" align="center" cellpadding="10" cellspacing="0"> <caption>Название таблицы</caption> <tr><th>ячейка 1</th><th>ячейка 2</th><th>ячейка 3</th></tr> <tr><td>ячейка 11</td><td>ячейка 12</td><td>ячейка 13</td></tr> <tr><td>ячейка 21</td><td>ячейка 22</td><td>ячейка 23</td></tr> <tr><td>ячейка 31</td><td>ячейка 32</td><td>ячейка 33</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ:

Название таблицы
ячейка 1ячейка 2ячейка 3
   ячейка 11   ячейка 12   ячейка 13
   ячейка 21   ячейка 22   ячейка 23
   ячейка 31   ячейка 32   ячейка 33

Существует еще ряд параметров для таблицы.

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

Пример записи кода:
<html> <head> <title></title> </head> <body> <table width="250" bgcolor="pink" border="1" align="center" cellpadding="10" cellspacing="0" rules="rows" frame="void"> <caption>Название таблицы</caption> <tr><th>ячейка 1</th><th>ячейка 2</th><th>ячейка 3</th></tr> <tr><td>ячейка 11</td><td>ячейка 12</td><td>ячейка 13</td></tr> <tr><td>ячейка 21</td><td>ячейка 22</td><td>ячейка 23</td></tr> <tr><td>ячейка 31</td><td>ячейка 32</td><td>ячейка 33</td></tr> </table> </body> </html>

РЕЗУЛЬТАТ:

Название таблицы
ячейка 1ячейка 2ячейка 3
   ячейка 11   ячейка 12   ячейка 13
   ячейка 21   ячейка 22   ячейка 23
   ячейка 31   ячейка 32   ячейка 33

Для строк и столбцов используют следующие параметры.

  • align - текст в ячейках выравнивается по горизонтали, может иметь значения: слева (right), справа (left), по центру (center),
  • valign - текст в ячейках выравнивается по вертикали, может иметь значения: вверх (top), вниз (bottom), по центру (middle),
  • bgcolor - задает цвет строки.
Эти же параметры применяют и к отдельным ячейкам, т.е. к тегу <td>, действие распространяется на саму ячейку.
. К ячейкам также можно применять следующие параметры:
  • width - задает ширину столбца (в пикселах или в процентах по отношению к таблице (ширина таблицы 100%).
  • height - задает высоту ячейки, все ячейки будут иметь заданную высоту.

Далее рассмотрим: Сложные таблицы .