Веб-компас сайтостроителей

Таблицы

Создаются таблицы тегом <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>, поэтому часто данные теги не пишут.
Комментарии к публикации
Всего комментариев: 3
прохожий: Селедочка | 17.09.2010, 01:42 #
Тоже никогда не писала лишних тегов, если браузеры понимают без них то и не нужно. Меньше код - меньше возможности для ошибки ;-)
прохожий: Николай | 20.01.2011, 07:23 #
Лишние теги это те которые <thead>, <tbody> и <tfoot> а если потом без них работать не будет?
Автор статьи: admin | 22.01.2011, 06:51 #
Будут работать, куда браузеры денутся? :)
Добавить комментарий
Новости сайта
Последние публикации в каталоге статей