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