Растягивание ячейки.
В этой главе мы поговорим как растянуть ячейку на несколько ячеек или несколько рядов.
Поумолчанию ячейка принимает тот-же размер что и рядом стоящая и если в таблице несколько рядов, то ячеек должно быть тоже одинаково в каждом ряду.
Но на то они и умолчания что-бы их можно было изменить!!!
Этот код не правилный, по тому что в верхнем ряду ячеек меньше чем в нижнем...
<table width="100%" height="250" border="1">
<tr>
<td> первый ряд, первая ячейка </td>
</tr>
<tr>
<td> второй ряд, первая ячейка </td>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
Атрибут colspan может заставить ячейку растянуться на несколько ячеек по горизонтали:
<table width="100%" height="250" border="1">
<tr>
<td colspan="2"> первый ряд, первая ячейка </td>
</tr>
<tr>
<td width="150"> второй ряд, первая ячейка </td>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>Результат:| первый ряд, первая ячейка | |
| второй ряд, первая ячейка | второй ряд, вторая ячейка |
Кстати это и есть код, если в него добавить несколько атрибутов то он может вполне заменить ту вкладную таблицу что я показал на предыдущей странице.
Так-же ячейку можно растянуть по вертикали , но уже атрибутом rowspan:
<table width="100%" height="250" border="1">
<tr>
<td> первый ряд, первая ячейка </td>
<td width="250" rowspan="2"> первый ряд, первая ячейка </td>
</tr>
<tr>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
| первый ряд, первая ячейка | первый ряд, первая ячейка |
| второй ряд, вторая ячейка |
<table width="100%" height="250" border="1">
<tr>
<td rowspan="2"> первый ряд, первая ячейка </td>
<td width="250" > первый ряд, первая ячейка </td>
</tr>
<tr>
<td> второй ряд, вторая ячейка </td>
</tr>
</table>
| первый ряд, первая ячейка | первый ряд, первая ячейка |
| второй ряд, вторая ячейка |
<table width="100%" height="250" border="1">
<tr>
<td colspan="2">текст 1 </td>
<td rowspan="2">текст 2 </td>
</tr>
<tr>
<td>текст 3 </td>
<td>текст 4 </td>
</tr>
</table>
| текст 1 | текст 2 | |
| текст 3 | текст 4 | |
Но вот и все у меня о таблицах. Это конечно не все, но остальное вы сможете найти в спецификации по HTML. Ряды и ячейки вообще можно групировать тегами tbody, thead и tfoot, так же можно группировать ячейки, но как на меня то это просто браузерный мусор, который браузеры способны и сами дописать. Для любительских сайтов эти теги только лишние байты в коде, а для профи самое главное чтобы валидатор не ругался, а эту информацию я вам предоставил в полном объеме!!! Можно было показать еще атрибуты CSS, но зачем показывать если вы использовать их пока не сможете...
