Цитата сообщения Великовозрастное_дитя Таблицы. Часть 2-я :)



В прошлый раз для определения вида одной или нескольких строк таблицы использовался тег .
Действие тегов и аналогичны .
Тег определяет вид первой строки таблицы, а - последней.
Тег определяет вид последних строк, но в исходном коде он должен быть до тега

Создадим таблицу 4 строки 2 колонки

<table border="1" width="100%"> <thead align="left"> <tr> <td>Первая строка. Текст1</td> <td>Первая строка. Текст2</td> </tr> </thead> <tfoot align="right"> <tr> <td>Последняя строка. Текст1</td> <td>Последняя строка. Текст2</td> </tr> </tfoot> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

В первой строке текст размещен слева, в последней строке - справа, а в централной строке - посредине

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

Добавим заголовок к нашей таблице. Для этого используем тег . Для этого тега есть два параметра align - задает выравнивание заголовка и valign - определяет вверху таблицы или внизу будет выводится заголовок.

допустим только внутри тега сразу после открывающего тега.

Вид заголовка в зависимости от align будет отличаться в разных браузерах.

• left - В браузере Internet Explorer и Opera располагает заголовок сверху и выравнивает его по левому краю таблицы. В Firefox заголовок располагается слева от таблицы.
• right -В браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. В браузере Netscape параметр игнорируется, а в Firefox заголовок располагается от таблицы справа.
• center - Заголовок располагается сверху таблицы по ее центру.
• top - Результат аналогичен действию параметра center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
• bottom - Заголовок размещается внизу таблицы по ее центру.

<table border="1" width="70%"> <caption valign="top">Заголовок таблицы</caption> <thead align="left"> <tr> <td>Первая строка. Текст1</td> <td>Первая строка. Текст2</td> </tr> </thead> <tfoot align="right"> <tr> <td>Последняя строка. Текст1</td> <td>Последняя строка. Текст2</td> </tr> </tfoot> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Заголовок таблицы

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

Если задать align="bottom" то заголовок будет внизу таблицы

Заголовок таблицы

Первая строка. Текст1	Первая строка. Текст2
Последняя строка. Текст1	Последняя строка. Текст2
Текст1	Текст2

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

<table border="1" width="70%"> <tbody align="center"> <tr> <th>Заголовок1</th> <th>Заголовок2</th> </tr> <tr> <td>Текст1</td> <td>Текст2</td> </tr> </tbody> </table>

Таблица с заголовками

Заголовок1	Заголовок2
Текст1	Текст2

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

<table border="1" width="70%"> <colspan> <col width="40%"></col> <col width="60%"></col> </colspan> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> <td>Текст4</td> </tr> </tbody> </table>

Текст1	Текст2
Текст3	Текст4

Объеденим несколько ячеек таблицы. Для этого в теге нужно указать colspan - объеденяет горизонтальные ячейки, rowspan - вертикальные

Объеденим 2 ячейки первой строки в одну ячейку

<table border="1" width="70%"> <tbody align="center"> <tr> <td colspan="2" rowspan="1">Текст1</td> </tr> <tr> <td>Текст2</td> <td>Текст3</td> </tr> </tbody> </table>

Текст1
Текст2	Текст3

Объеденим 2 ячейки первого столбца в одну ячейку

<table border="1" width="70%"> <tbody align="center"> <tr> <td colspan="1" rowspan="2">Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> </tr> </tbody> </table>

Текст1	Текст2
	Текст3

И последнее. Параметры тега cellpadding - отступ от рамки до содержимого ячейки и cellspacing- расстояние между ячейками.

<table border="1" cellspacing="10" cellpadding="30"> <tbody align="center"> <tr> <td>Текст1</td> <td>Текст2</td> </tr> <tr> <td>Текст3</td> <td>Текст3</td> </tr> </tbody> </table>

Текст1	Текст2
Текст3	Текст3

Вот собственно и все :))