|
Таблицы в HTML документе, Атрибуты Rowspan и Colspan
|
|
Давайте разберем эту таблицу.
1 ячейка |
2 ячейка |
3 ячейка |
4 ячейка |
1 ячейка |
2 и 3- я ячейка 2х строк |
4 ячейка |
1 ячейка |
4 ячейка |
<table width="300" border="1" bgcolor="#EED7FF"> <tr> <td width="75">1 ячейка</td> <td width="75">2 ячейка</td> <td width="75">3 ячейка</td> <td width="75">4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td colspan="2" rowspan="2">2 и 3- я ячейка 2х строк</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td>4 ячейка</td> </tr> </table>
Но сначала представим эту таблицу немного в ином роде.
1 ячейка |
2 ячейка |
3 ячейка |
4 ячейка |
1 ячейка |
2, 3- я ячейка 2 ой строки |
4 ячейка |
1 ячейка |
2, 3- я ячейка 3 ой строки |
4 ячейка |
<table width="300" border="1" bgcolor="#EED7FF"> <tr> <td width="75">1 ячейка</td> <td width="75">2 ячейка</td> <td width="75">3 ячейка</td> <td width="75">4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td colspan="2">2, 3- я ячейка 2 ой строки</td> <td>4 ячейка</td> </tr> <tr> <td>1 ячейка</td> <td colspan="2">2, 3- я ячейка 3 ой строки</td> <td>4 ячейка</td> </tr> </table>
Теперь давайте внимательно рассмотрим таблицу и ее код.
В первой строке таблицы видно четыре ячейки, как и должно быть.
Во второй строке, вторая и третья ячейка объединились и образовали
одну ячейку с атрибутом colspan="2". Итого во второй строке имеем
три ячейки. В третьей строке, вторая и третья ячейка тоже объеденились
и образовали ячейку с атрибутом colspan="2". Итого в третьей строке
тоже имеем три ячейки. Теперь нам надо объеденить вторую ячейку
второй строки, с атрибутом colspan="2", со второй ячейкой третьей
строки,
с атрибутом colspan="2". Как, Вы уже знаете, при объединение двух
ячеек
соседник строк получается одна ячейка с атрибутом rowspan=2. Ячейки,
которые мы собираемся объеденить имеют одинаковый атрибут colspan=2.
Поэтому мы передаем этот атрибут новой ячейке, которая образуется после
объединения двух этих ячеек, в то же время эта, новая ячейка будет иметь
еще один атрибут, объединения двух ячеек соседних строк, rowspan=2.
Пишем код таблицы.
<table width="300" border="1" bgcolor="#EED7FF"> <tr>
<td width="75">1 ячейка</td> <td width="75">2 ячейка</td> <td width="75">3 ячейка</td> <td width="75">4 ячейка</td> </tr> <!--Оставляем первую строку без изменений. Пишем вторую строку. Так как, Вы уже знаете, что при объединении ячеек соседних строк, в коде таблицы ячейка с атрибутом "rowspan" записывается в самой верхней из строк, ячейки которых объеденились. Поэтому во второй строке записываем три ячейки, одна из которых (вторая) будет иметь два атрибута, rowspan=2 и colspan=2. --> <tr> <td>1 ячейка</td> <td colspan="2" rowspan="2">2 и 3- я ячейка 2х строк</td> <td>4 ячейка</td> </tr> <!-- Так как, вторая ячейка третьей строки была поглощена второй ячейкой второй строки, в третьей строке мы не указываем эту ячейку. --> <tr> <td>1 ячейка</td> <td>4 ячейка</td> </tr> </table>
В итоге получаем то , что нам и было нужно.
1 ячейка |
2 ячейка |
3 ячейка |
4 ячейка |
1 ячейка |
2 и 3- я ячейка 2х строк |
4 ячейка |
1 ячейка |
4 ячейка |
Не так уж это и сложно как кажется! Не правда ли?
|