Примеры

Рассмотрим вышеизложенное на примерах различного вида таблиц.

< html>

< body>

< p>

Каждая таблица начинается с тега table.

Каждая строка таблицы начинается с тега tr.

Каждый элемент данных таблицы начинается с тега td.

< /p>

< h1> Это пример простейшей таблицы, содержащей одну строку и одну ячейку.< /h1>

< table border=" 1" >

< tr>

< td> Одна строка и одна ячейка< /td>

< /tr>

< /table>

< h1> Одна строка и три столбца: < /h1>

< table border=" 1" >

< tr>

< td> столбец 1< /td>

< td> столбец 2< /td>

< td> столбец 3< /td>

< /tr>

< /table>

< h1> Две строки и три столбца: < /h1>

< table border=" 1" >

< tr>

< td> 1.1< /td>

< td> 1.2< /td>

< td> 1.3< /td>

< /tr>

< tr>

< td> 2.1< /td>

< td> 2.2< /td>

< td> 2.3< /td>

< /tr>

< /table>

< h1> Рамка таблицы< /h1>

< h1> Обычная рамка: < /h1>

< table border=" 1" >

< tr>

< td> Первая< /td>

< td> строка< /td>

< /tr>

< tr>

< td> Вторая < /td>

< td> строка< /td>

< /tr>

< /table>

< h1> Толстая рамка: < /h1>

< table border=" 10" >

< tr>

< td> Первая< /td>

< td> строка< /td>

< /tr>

< tr>

< td> Вторая < /td>

< td> строка< /td>

< /tr>

< /table>

< table border=" 1" >

< tr>

< td> строка 1, ячейка 1< /td>

< td> строка 1, ячейка 2< /td>

< /tr>

< tr>

< td> строка 2, ячейка 1< /td>

< td> строка 2, ячейка 2< /td>

< /tr>

< /table>

< /body>

< /html>

Для тега table определены следующие атрибуты.

• align - определяет способ горизонтального выравнивания таблицы на странице. Возможные значения: left, center, right. Значение по умолчанию - left.
• valign - должен определять способ вертикального выравнивания для содержимого таблицы. Возможные значения: top, bottom, middle.
• border - определяет ширину внешней рамки таблицы (в пикселах). При BORDER=" 0" или при отсутствии этого параметра рамка отображаться не будет.
• cellpadding - определяет расстояние (в пикселах) между рамкой каждой ячейки таблицы и содержащимся в ней материалом.
• cellspacing - определяет расстояние (в пикселах) между границами соседних ячеек.
• width - определяет ширину таблицы. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
• height - определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот параметр определяется автоматически в зависимости от объема содержащегося в таблице материала.
• bgcolor - определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
• background - позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Ячейки таблицы без содержимого в большинстве браузеров выводятся не очень хорошо. Если необходимо сделать ячейку таблицы пустой, то разместите в ней неразрывный пробел & nbsp;

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

Для тегов < td> и < th> очень полезными являются атрибуты colspan и rowspan. Первый показывает сколько ячеек надо объединить по горизонтали, а второй по вертикали. Следует заметить, что если мы применяем объединение ячеек, то общее число ячеек с учетом объединенных должно быть равным. Продемонстрируем на примере.

< html>

< body>

< h4> Правильное применение colspan: < /h4>

< table border=" 1" >

< tr>

< td colspan=" 2" > 100< /td>

< td> 300< /td>

< /tr>

< tr>

< td> 400< /td>

< td> 500< /td>

< td> 600< /td>

< /tr>

< /table>

< h4> Неправильное применение colspan: < /h4>

< table border=" 1" >

< tr>

< td colspan=" 2" > 100< /td>

< td> 200< /td>

< td> 300< /td>

< /tr>

< tr>

< td> 400< /td>

< td> 500< /td>

< td> 600< /td>

< /tr>

< /table>

< h4> Правильное применение rowspan: < /h4>

< table border=" 1" >

< tr>

< td rowspan=" 2" > 100< /td>

< td> 200< /td>

< td> 300< /td>

< /tr>

< tr>

< td> 500< /td>

< td> 600< /td>

< /tr>

< /table>

< h4> Неправильное применение rowspan: < /h4>

< table border=" 1" >

< tr>

< td rowspan=" 2" > 100< /td>

< td> 200< /td>

< td> 300< /td>

< /tr>

< tr>

< td> 400< /td>

< td> 500< /td>

< td> 600< /td>

< /tr>

< /table>

< /body>

< /html>