Таблицы html часть 2

                                           

                          Тег <TABLE>

     Элемент <TABLE> служит контейнером для элементов, определяющих содержание таблицы. Любая таблица состоит из строк и ячеек.

     Синтаксис: 

<table><tr><td>...</td></tr></table>

                         Параметры тега <TABLE>

align              -  определяет выравнивание таблицы. 

background   -  задает фоновый рисунок в таблице. 

bgcolor          - цвет фона таблицы. 

border           - толщина рамки в пикселах. 

bordercolor    - цвет рамки.
cellpadding     - отступ от рамки до содержимого ячейки. 

cellspacing      - расстояние между ячейками. 

cols                - число колонок в таблице. 

frame              - сообщает браузеру, как отображать границы вокруг таблицы. 

height              - высота таблицы. 

rules                - сообщает браузеру, где отображать границы между ячейками. 

width               - ширина таблицы. 

     Для примера и наглядности возмем таблицу и будет в нее вносить атрибуты и смотреть как они ее будут изменять
                                                 

                           Border- этот атрибут задает толщину рамки  в пикселях.

                                           Пример с атрибутом  border
<table border="5">
<tr>
<td>Первая строка - первая ячейка</td><td>Первая строка - вторая ячейка</td>
</tr>
<tr>
<td>Вторая строка - первая ячейка</td><td>Вторая строка - вторая ячейка</td>
</tr>
</table>
                             В результате получим следующее

Первая строка - первая ячейка	Первая строка - вторая ячейка
Вторая строка - первая ячейка	Вторая строка - вторая ячейка

 Align - этот атрибут служит для выравнивания таблицы и может принимать значения или left или center или right.

                                         Пример с атрибутом align
<table border="5" align="center">
<tr>
<td>Первая строка - первая ячейка</td><td>Первая строка - вторая ячейка</td>
</tr>
<tr>
<td>Вторая строка - первая ячейка</td><td>Вторая строка - вторая ячейка</td>
</tr>
</table>
                              В результате получим таблицу с выравниванием по центру

Первая строка - первая ячейка	Первая строка - вторая ячейка
Вторая строка - первая ячейка	Вторая строка - вторая ячейка

                 Cellspacing  - задает расстояние между ячейками в пикселях

<table border="5" align="center" cellspacing="20">
<tr>
<td>Первая строка - первая ячейка</td><td>Первая строка - вторая ячейка</td>
</tr>
<tr>
<td>Вторая строка - первая ячейка</td><td>Вторая строка - вторая ячейка</td>
</tr>
</table>
                                                        Смотрим результат

Первая строка - первая ячейка	Первая строка - вторая ячейка
Вторая строка - первая ячейка	Вторая строка - вторая ячейка

Bgcolor   задает цвет фона таблицы

<table border="5" align="center" cellspacing="20" bgcolor="yellow">
<tr>
<td>Первая строка - первая ячейка</td><td>Первая строка - вторая ячейка</td>
</tr>
<tr>
<td>Вторая строка - первая ячейка</td><td>Вторая строка - вторая ячейка</td>
</tr>
</table>
                                                Результат смотрим ниже

Первая строка - первая ячейка	Первая строка - вторая ячейка
Вторая строка - первая ячейка	Вторая строка - вторая ячейка

                                                 Смотрим другой пример


<table border="5" align="center" cellspacing="20" bgcolor="yellow">
<tr>
<td>Первая строка - первая ячейка</td><td>Первая строка - вторая ячейка</td>
</tr>
<tr>
<td bgcolor="green">Вторая строка - первая ячейка</td><td>Вторая строка - вторая ячейка</td>
</tr>
</table>
                                      Смотрим результат такого примера

Первая строка - первая ячейка	Первая строка - вторая ячейка
Вторая строка - первая ячейка	Вторая строка - вторая ячейка

                                                            Тег <CAPTION> 

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

     Синтаксис:<table> <caption>Текст</caption> <tr> <td>...</td> </tr> </table>

                                                               Параметры:

align - определяет выравнивание заголовка по горизонтали.

valign    - устанавливает расположение заголовка до или после таблицы.  

                                                               Пример:

<table border="5">
<caption>Ячейки </caption>
<tr>
<td>Первая строка - первая ячейка</td><td>Первая строка - вторая ячейка</td>
</tr>
<tr>
<td>Вторая строка - первая ячейка</td><td>Вторая строка - вторая ячейка</td>
</tr>
</table>

                                                              Результат:

Ячейки

Первая строка - первая ячейка	Первая строка - вторая ячейка
Вторая строка - первая ячейка	Вторая строка - вторая ячейка