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


Для чего нужны таблицы и как они выглядят Вы видели в предыдущих разделах, а теперь рассмотрим как таблицы создаются. Таблица начинается с тэга <table> и заканчивается тэгом </table>. Рассмотрим атрибуты открывающего тэга:

align="center" расположение таблицы справа/по центру/слева (right/center/left)
border="2" бордюр таблицы, указывается в пикселах (если значение этого атрибута будет равно нулю, то таблица будет невидимой, на экране будет только содержимое ячеек)
width="400" ширина таблицы, указывается в пикселах
cellspacing="2" расстояние между рамками ячеек, указывается в пикселах
cellpadding="2" расстояние между рамкой ячейки и ее содержимым
bgcolor="#RRGGBB" цвет фона всей таблицы

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

align="center" горизонтальное выравнивание содержимого ячейки: по левому краю/ по сентру/по правому краю (left/center/right)
valign="middle" вертикальное выравнивание содержимого ячейки: сверху/в центре/снизу (top/middle/bottom)
nowrap если вставить этот атрибут, то содержимое ячейки будет отображаться в одну строку
colspan="3" размах по горизонтали на несколько столбцов, в кавычках указывается количество
rowspan="2" размах по вертикали на несколько строк
width="200" ширина ячейки, указывается в пикселах (не должна превышать ширину таблицы)
height="100" высота ячейки, указывается в пикселах
bgcolor="#RRGGBB" цвет фона ячейки, у каждой ячейки может быть свой фон

Рассмотрим HTML-код: создадим простую таблицу шириной 400 пикселов с серым фоном, чтобы в ней было 2 строки, а в каждой строке по 3 ячейки

<html>
<head>
<title>Таблица</title>
</head>
<body bgcolor="#ffffff" text="#000000">

<table align="center" border="2" width="400" cellspacing="2" cellpadding="2" bgcolor="#aaaaaa">
 <tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
 </tr>
 <tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
 </tr>
</table>

На экране мы получим:

Теперь рассмотрим HTML-код сложной таблицы. Побробуйте прочитав HTML-код нарисовать на бумаге эту таблицу, а потом посмотрите, как она выглядит на экране.

<html>
<head>
<title>Сложная таблица</title>
</head>
<body bgcolor="#ffffff" text="#000000">

<table align="center" border="2" width="600" cellspacing="2" cellpadding="2" bgcolor="#aaaaaa">
 <tr>
  <td align="center" valign="middle" colspan="3" bgcolor="#ffaaaa" >Сложная таблица</td>
 </tr>
 <tr>
  <td bgcolor="#ffaaaa">1-ая ячейка 2-й строки</td>
  <td bgcolor="#ffaaaa">2-ая ячейка 2-й строки</td>
  <td bgcolor="#ffaaaa">3-ая ячейка 2-й строки</td>
 </tr>
 <tr>
  <td align="center" valign="middle">1-ая ячейка 2-й строки</td>   <td>2-ая ячейка 2-й строки</td>
  <td>3-ая ячейка 2-й строки</td>
 </tr>
</table>

НАЗАД    ДАЛЬШЕ