Слияние ячеек таблицы

При помощи атрибутов COLSPAN, ROWSPAN можно объединять несколько соседних ячеек столбца или строки в одну большую ячейку.

Атрибут COLSPAN тэгов <TH>, <TD> позволяет сделать слияние ячеек нескольких столбцов в пределах одной строки.

Атрибут ROWSPAN - ячеек из нескольких строк в пределах одного столбца.

Цифра, указываемая в этих атрибутах, указывает количество ячеек, которые будут подвергнуты слиянию.

Т.к. при выполнении операций слияния очень легко запутаться, то настоятельно рекомендую сделать предварительный эскиз таблицы на бумаге.

Пример:

HTML-код: <table border="1">  <tr>   <td rowspan="3">1111</td>   <td colspan="2">22222</td>   <td colspan="2">33333</td>  </tr>  <tr>   <td>44444</td>   <td colspan="2" rowspan="2">55555</td>   <td>66666</td>  </tr>  <tr>   <td>77777</td>   <td>88888</td>  </tr>  <tr>   <td colspan="5">99999</td>  </tr> </table>

Отображение в браузере: 1111 22222 33333 44444 55555 66666 77777 88888 99999

Улучшение внешнего вида таблицы

Атрибут CELLSPACING дает возможность задавать размер полосы чистого пространства, обрамляющих таблицу извне. По умолчанию браузер разделяет ячейки таблицы полосой в 2 пикселя.

Атрибут CELLPADDING задает размеры полос чистого пространства внутри ячейки, отделяя ее содержимое от внешних границ. По умолчанию эта величина равна 1 пикселю.

Чтобы графические изображения, помещенные в соседние ячейки таблицы, выглядели как единое целое, надо задать атрибутам CELLSPACING, CELLPADDING нулевые значения.

Отображение границ таблицы

Если значение атрибута BORDER тэга <TABLE> отлично от нуля, то браузер заключает таблицу в рамку и разграничивает соседние строки и столбцы таблицы. При помощи атрибутов FRAME, RULES можно указать какие именно части обрамлений таблицы следует показывать.

Атрибут FRAME служит для определения фрагментов внешнего очертания таблицы.

Атрибут RULES - указывает набор внутренних разделительных линий.

Ниже приведены допустимые значения этих атрибутов.

FRAME

Значение Результат

void Все линии отсутствуют

above Линия над таблицей

below Линия под таблицей

rhs Линия справа от таблицы

lhs Линия слева от таблицы

hsides Линии над и под таблицей

vsides Линии слева и справа от таблицы

border Все линии присутствуют (по умолчанию)

RULES

none Все линии отсутствуют

cols Линии между столбцами

rows Линии между строками

groups Линии между группами столбцов и строк

all Все линии присутствуют (по умолчанию)

Пример:

HTML-код: <table border="1" rules="rows">  <tr>   <td>111</td>   <td>111</td>   <td>111</td>  </tr>  <tr>   <td>111</td>   <td>111</td>   <td>111</td>  </tr> </table>

Отображение в браузере: 111 111 111 111 111 111