Создаются таблицы тегом
<table> с закрывающим тегом
</table>. Содержимое таблицы формируется построчно, а каждая строка формируется последовательно из ячеек таблицы. Строки таблицы создаются тегом
<tr>, с закрывающим
</tr>. Ячейки таблицы создаются тегом
<td>, и его закрывающим тегом
</td>. Для примера давайте создадим простую таблицу, состоящую из одной строки и одного столбца
Код
<table border="3">
<tr>
<td>
Это таблица
</td>
</tr>
</table>
Наверное, Вы обратили внимание на атрибут
border, он задает ширину внешней рамки таблицы в пикселях. При отсутствии этого атрибута или при значении равном 0, рамка таблицы отображаться не будет.
Атрибут
width в теге
<table> задает ширину таблицы, величина может задаваться либо в пикселях, либо в процентах от ширины окна браузера. Например
Код
<table border="3" width="50%">
<tr>
<td>Это первая ячейка таблицы</td>
<td>Это вторая ячейка таблицы</td>
</tr>
<tr>
<td>Это третья ячейка таблицы</td>
<td>Это четвертая ячейка таблицы</td>
</tr>
</table>
Но тут надо помнить, что браузеры могут свободно отступить от заданной величины ширины таблицы, если сочтут нужным.
Атрибут
height в теге
<table> задает высоту таблицы, величина может задаваться либо в пикселях, либо в процентах от высоты окна браузера. Например
Код
<table border="3" width="50%" height="50%">
<tr>
<td>Это первая ячейка таблицы</td>
<td>Это вторая ячейка таблицы</td>
</tr>
<tr>
<td>Это третья ячейка таблицы</td>
<td>Это четвертая ячейка таблицы</td>
</tr>
</table>
Атрибут align выравнивает таблицу по левому краю, по центру и по правому краю окна браузера следующими значениями, соответственно:
left,
center и
right. Например
Код
<table border="2" width="100px" align="center">
Атрибут
cellpadding определяет, на какое расстояние содержимое ячейки будет отступать от границы ячейки. Обычно этот атрибут устанавливают равным нулю, а отступы делают с помощью средств CSS (каскадных таблиц стилей).
Атрибут
cellspacing задает расстояние между границами ячеек таблицы. Довольно часто этот атрибут устанавливают равным нулю. Например
Код
<table border="3" width="90%" align="center" cellpadding="4" cellspacing="0">
<tr>
<td>Эта ячейка в первой строке таблицы</td>
<td>И эта ячейка в первой строке таблицы </td>
</tr>
<tr>
<td> Эта ячейка во второй строке таблицы </td>
<td>И эта ячейка во второй строке таблицы </td>
</tr>
</table>
Атрибут
bordercolor определяет цвет рамки таблицы. Вся рамка будет одного заданного цвета. Для придания объема таблице можно использовать атрибуты
bordercolorlight и
bordercolordark, задающие цвета, соответственно, светлой и темной сторон рамки таблицы. Но эти два атрибута поддерживаются только браузером Internet Explorer. Например
Код
<table border="3" bordercolor="#008000">
<table border="3" bordercolorlight="#00FF00" bordercolordark="#000080">
Атрибут
bgcolor задает цвет фона таблицы, например
Код
<table border="3" width="90%" align="center" cellpadding="4" cellspacing="0" bgcolor="#00FFFF">
Бывают случаи, когда нужно создать таблицу с ячейками, полученными объединением нескольких ячеек. Просто не прописать какую-то ячейку таблицы не получиться, браузер не отобразит на этом месте ничего (будет пустое место, что, согласитесь, нам не подходит). Для корректного отображения таблицы нужно использовать следующие атрибуты в теге
<td>colspan – используется для объединения соседних ячеек находящихся в одной строке таблицы;
rowspan –используется для объединения соседних ячеек находящихся в одном столбце таблицы.
Для лучшего понимания работы объединения ячеек таблицы приведу примеры
- объединение двух ячеек находящихся в одной строке таблицы
Код
<table border="3">
<tr>
<td>Обычная ячейка таблицы</td><td> Обычная ячейка таблицы </td><td> Обычная ячейка таблицы </td>
</tr><tr>
<td> Обычная ячейка таблицы </td>
<td colspan="2">Ячейка таблицы, полученная объединением двух ячеек таблицы, находящихся в одной строке</td>
<!-- Третью ячейку в этой строке не пишем -->
</tr><tr>
<td> Обычная ячейка таблицы </td><td> Обычная ячейка таблицы </td><td> Обычная ячейка таблицы </td>
</tr>
</table>
- объединение двух ячеек находящихся в одном столбце таблицы
Код
<table border="3">
<tr>
<td>Обычная ячейка таблицы</td><td> Обычная ячейка таблицы </td><td> Обычная ячейка таблицы </td>
</tr><tr>
<td> Обычная ячейка таблицы </td>
<td rowspan="2">Ячейка таблицы, полученная объединением двух ячеек таблицы, находящихся в одном столбце</td>
<td> Обычная ячейка таблицы </td>
</tr><tr>
<td> Обычная ячейка таблицы </td>
<!-- Вторую ячейку в этой строке не пишем -->
<td> Обычная ячейка таблицы </td>
</tr>
</table>
В тегах
<tr> и
<td> также можно использовать атрибуты оформления
bgcolor,
bordercolor,
bordercolorlight,
bordercolordark. Значения атрибутов будут распространяться только на текущую строку или ячейку таблицы.
В тегах
<tr> и
<td> также можно использовать атрибут
align, но в отличие от тега
<table>, действие атрибута в этом теге будет распространяться на содержимое ячеек строки или одной ячейки - будет управлять выравниванием содержимого. Атрибут
align в этом случае может принимать следующие значения
- left – выравнивает содержимое по левому краю ячейки таблицы (используется по умолчанию);
- center- выравнивает содержимое по центру ячейки таблицы;
- right – выравнивает содержимое по правому краю ячейки таблицы;
- justify – выравнивает содержимое абзаца по обоим краям ячейки таблицы (поддерживается не всеми браузерами).
В тегах
<tr> и
<td> также можно использовать замечательный атрибут valign, который управляет вертикальным выравниванием содержимым строк и ячеек таблицы. Атрибут
valign может принимать следующие значения
- top - выравнивает содержимое по верхнему краю ячейки таблицы;
- middle - выравнивает содержимое посередине ячейки таблицы;
- bottom - выравнивает содержимое по нижнему краю ячейки таблицы.
Например
Код
<table border="3" width="50%" height="50%">
<tr align="center" valign="bottom">
<td>Это первая ячейка таблицы</td>
<td>Это вторая ячейка таблицы</td>
</tr>
<tr>
<td align="right" valign="top">Это третья ячейка таблицы</td>
<td align="right" valign="middle">Это четвертая ячейка таблицы</td>
</tr>
</table>
Атрибут
width в теге
<td> задает ширину текущей ячейки либо в пикселях, либо в процентах от общей ширины таблицы. Строго говоря, задать ширину каждой ячейки таблицы невозможно, а только ширину каждого столбца, поскольку большинство браузеров отображают ячейки в текущем столбце всегда одной ширины. Но, как и в случае и атрибутом
width в теге
<table>, надо помнить, что браузеры могут свободно отступить от заданной величины ширины ячейки таблицы, если сочтут нужным.
В завершение о таблицах, нужно сказать, что строго говоря, таблица состоит из заголовка, основного содержимого (тело таблицы) и заключения. Заголовок таблицы обозначается тегом
<thead>, с закрывающим тегом
</thead>; основное содержимое обозначается тегом
<tbody>(
</tbody>); заключение таблицы обозначается тегом
<tfoot> (
</tfoot>). При создании ячеек в заголовке таблицы нужно использовать тег
<th> вместо тега
<td>. Текст ячейки созданной тегом
<th> выравнивается по центру и отображается полужирным начертанием шрифта. Например
Код
<table border="3" width="80%" align="center">
<thead bgcolor="#00FF80">
<tr>
<th>Поисковая система</th>
<th>Url-адрес поисковой системы</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td>Поисковая система Яндекс</td>
<td><a href="http://www.yandex.ru">www.yandex.ru</a></td>
</tr>
<tr>
<td>Поисковая система Google</td>
<td><a href="http://www.google.ru">www.google.ru</a></td>
</tr>
<tr>
<td>Поисковая система Rambler</td>
<td><a href="http://www.rambler.ru">www.rambler.ru</a></td>
</tr>
</tbody>
<tfoot bgcolor="#00FFFF">
<tr>
<td>Всего поисковых систем приведенных в таблице</td>
<td>3</td>
</tr>
</tfoot>
</table>
Теги
<thead>,
<tbody> и
<tfoot> также могут содержать атрибуты
bgcolor,
align и
valign.
Но браузеры прекрасно отображают таблицы и без указания тегов
<thead>,
<tbody> и
<tfoot>, поэтому часто данные теги не пишут.