Таблицы

Создаются таблицы тегом <table> с закрывающим тегом </table>. Содержимое таблицы формируется построчно, а каждая строка формируется последовательно из ячеек таблицы. Строки таблицы создаются тегом <tr>, с закрывающим </tr>. Ячейки таблицы создаются тегом <td>, и его закрывающим тегом </td>. Для примера давайте создадим простую таблицу, состоящую из одной строки и одного столбца

Наверное, Вы обратили внимание на атрибут border, он задает ширину внешней рамки таблицы в пикселях. При отсутствии этого атрибута или при значении равном 0, рамка таблицы отображаться не будет.
Атрибут width в теге <table> задает ширину таблицы, величина может задаваться либо в пикселях, либо в процентах от ширины окна браузера. Например

Но тут надо помнить, что браузеры могут свободно отступить от заданной величины ширины таблицы, если сочтут нужным.
Атрибут height в теге <table> задает высоту таблицы, величина может задаваться либо в пикселях, либо в процентах от высоты окна браузера. Например

Атрибут align выравнивает таблицу по левому краю, по центру и по правому краю окна браузера следующими значениями, соответственно: left, center и right. Например

Атрибут cellpadding определяет, на какое расстояние содержимое ячейки будет отступать от границы ячейки. Обычно этот атрибут устанавливают равным нулю, а отступы делают с помощью средств CSS (каскадных таблиц стилей).
Атрибут cellspacing задает расстояние между границами ячеек таблицы. Довольно часто этот атрибут устанавливают равным нулю. Например

Атрибут bordercolor определяет цвет рамки таблицы. Вся рамка будет одного заданного цвета. Для придания объема таблице можно использовать атрибуты bordercolorlight и bordercolordark, задающие цвета, соответственно, светлой и темной сторон рамки таблицы. Но эти два атрибута поддерживаются только браузером Internet Explorer. Например

Атрибут bgcolor задает цвет фона таблицы, например

Бывают случаи, когда нужно создать таблицу с ячейками, полученными объединением нескольких ячеек. Просто не прописать какую-то ячейку таблицы не получиться, браузер не отобразит на этом месте ничего (будет пустое место, что, согласитесь, нам не подходит). Для корректного отображения таблицы нужно использовать следующие атрибуты в теге <td>
colspan – используется для объединения соседних ячеек находящихся в одной строке таблицы;
rowspan –используется для объединения соседних ячеек находящихся в одном столбце таблицы.
Для лучшего понимания работы объединения ячеек таблицы приведу примеры
- объединение двух ячеек находящихся в одной строке таблицы

- объединение двух ячеек находящихся в одном столбце таблицы

В тегах <tr> и <td> также можно использовать атрибуты оформления bgcolor, bordercolor, bordercolorlight, bordercolordark. Значения атрибутов будут распространяться только на текущую строку или ячейку таблицы.
В тегах <tr> и <td> также можно использовать атрибут align, но в отличие от тега <table>, действие атрибута в этом теге будет распространяться на содержимое ячеек строки или одной ячейки - будет управлять выравниванием содержимого. Атрибут align в этом случае может принимать следующие значения

• left – выравнивает содержимое по левому краю ячейки таблицы (используется по умолчанию);
  
• center- выравнивает содержимое по центру ячейки таблицы;
  
• right – выравнивает содержимое по правому краю ячейки таблицы;
  
• justify – выравнивает содержимое абзаца по обоим краям ячейки таблицы (поддерживается не всеми браузерами).

В тегах <tr> и <td> также можно использовать замечательный атрибут valign, который управляет вертикальным выравниванием содержимым строк и ячеек таблицы. Атрибут valign может принимать следующие значения

• top - выравнивает содержимое по верхнему краю ячейки таблицы;
  
• middle - выравнивает содержимое посередине ячейки таблицы;
  
• bottom - выравнивает содержимое по нижнему краю ячейки таблицы.

Например

Атрибут width в теге <td> задает ширину текущей ячейки либо в пикселях, либо в процентах от общей ширины таблицы. Строго говоря, задать ширину каждой ячейки таблицы невозможно, а только ширину каждого столбца, поскольку большинство браузеров отображают ячейки в текущем столбце всегда одной ширины. Но, как и в случае и атрибутом width в теге <table>, надо помнить, что браузеры могут свободно отступить от заданной величины ширины ячейки таблицы, если сочтут нужным.
В завершение о таблицах, нужно сказать, что строго говоря, таблица состоит из заголовка, основного содержимого (тело таблицы) и заключения. Заголовок таблицы обозначается тегом <thead>, с закрывающим тегом </thead>; основное содержимое обозначается тегом <tbody>(</tbody>); заключение таблицы обозначается тегом <tfoot> (</tfoot>). При создании ячеек в заголовке таблицы нужно использовать тег <th> вместо тега <td>. Текст ячейки созданной тегом <th> выравнивается по центру и отображается полужирным начертанием шрифта. Например

Теги <thead>, <tbody> и <tfoot> также могут содержать атрибуты bgcolor, align и valign.
Но браузеры прекрасно отображают таблицы и без указания тегов <thead>, <tbody> и <tfoot>, поэтому часто данные теги не пишут.