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

                               

                                                                        Примеры таблиц

                                                      Обычная таблица

<table border>
   <tr>
          <td>A</td><td>B</td><td>C</td>
   </tr>
          <td>D</td><td>E</td><td>F</td>
   <tr>
   </tr>
</table>

                                                            Результат
                       

A	B	C
D	E	F

     Немного изменим таблицу и поставим значение атрибута border равному 5

<table border="5">
   <tr>
          <td>A</td><td>B</td><td>C</td>
   </tr>
          <td>D</td><td>E</td><td>F</td>
   <tr>
   </tr>
</table>
                                                Получаем следующий результат

A	B	C
D	E	F

 
         

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

 

align                  определяет выравнивание содержимого ячейки по горизонтали
background       задает фоновый рисунок в ячейке
bgcolor             цвет фона ячейки
bordercolor       цвет рамки
colspan              объединяет горизонтальные ячейки
height                 высота ячейки
nowrap              запрещает перенос строк
rowspan            объединяет вертикальные ячейки
valign                 выравнивание содержимого ячейки по вертикали
width                 ширина ячейки.

                                             Пример обьединения вертикальных ячеек

<table border="5">
<tr>
     <td rowspan=2>Обьединенная ячейка</td>
     <td>B</td>
     <td>C</td>
</tr>
<tr>
     <td>E</td>
     <td>F</td>
</tr>
                                                       
                                                 Получаем следующий результат

Обьединенная ячейка	B	C
	E	F

   
     Параметр  rowspan  обьединяет ячейки по вертикали. Этот параметр имеет смысл для таблиц, состоящих из нескольких строк.
     Синтаксис - <td rowspan="число">...</td>
     Значения - любое целое положительное число больше 1.
     Значение по умолчанию - 1

                                          Пример обьединения горизонтальных ячеек

<table border="5">
<tr>
     <td>A</td>
     <td colspan=2>Обьединенная ячейка</td>
</tr>
<tr>
     <td>D</td>
     <td>E</td>
     <td>F</td>
</tr>
</table>
                                                               Результат

A	Обьединенная ячейка
D	E	F

                                                                Примеры с тегом  <TH>

<table border="3">
<tr>
     <th>Ячейка 1</th> <th>Ячейка 2</th> <th>Ячейка 3</th>
</tr>
<tr>
     <td>Ячейка 4</td><td>Ячейка 5</td><td>Ячейка 6</td>
</tr>
<tr>
     <td>Ячейка 7</td><td> Ячейка 8</td><td> Ячейка 9 </td>
</tr>
</table>

                                                       Результат смотрим ниже:

Ячейка 1	Ячейка 2	Ячейка 3
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

                                             Пример тега <TH> с атрибутом  colspan

<table border="3">
<tr>
     <th colspan=3>Заголовок таблицы Ячейки </th>
</tr>
<tr>
     <td>Ячейка 4</td><td>Ячейка 5</td><td>Ячейка 6</td>
</tr>
<tr>
     <td>Ячейка 7</td><td> Ячейка 8</td><td> Ячейка 9 </td>
</tr>
</table>

                                                                Результат

Заголовок таблицы Ячейки
Ячейка 4	Ячейка 5	Ячейка 6
Ячейка 7	Ячейка 8	Ячейка 9

                          Пример таблицы с большим количеством заголовков

<table border="3">
<tr>
      <th colspan=4>Заголовок таблицы Ячейки </th>
</tr>
<tr>
     <th colspan=2> Ячейки 1</th>
     <th colspan=2> Ячейки 2</th>
</tr>
<tr>
     <td>A</td><td>B</td><td>C</td><td>D</td>
</tr>
</table>
   
   
                                                                            Результат

Заголовок таблицы Ячейки
Ячейки 1		Ячейки 2
A	B	C	D

                                             Пример таблицы с боковыми заголовками

<table border="3" >
<tr>
     <th>Ячейка 1</th><td>A</td><td>B</td>
</tr>
<tr>
      <th>Ячейка 2</th><td>C</td><td>D</td>
</tr>
</table>

                                                                        Результат

Ячейка 1	A	B
Ячейка 2	C	D