Растягивание ячеек

Иногда, при вёрстке таблиц, требуется объединить несколько ячеек по горизонтали или вертикали в одну. Для этого используют атрибуты colspan и rowspan.

сolspan – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1;
rowspan – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

Давайте растянем первую строку на две ячейки с помощью атрибута сolspan. Для этого нам нужно в первой строке, для которой мы прописали атрибут colspan=»2″, убрать один столбец.

<table border="2" bordercolor="#990066" 
bgcolor="#FF9933">
<tr>
<td height="50" width="200" valign="top" 
align="center" bgcolor="#9999FF" 
colspan="2">строчка1 столбец1</td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td>
<td width="150"  valign="middle" 
align="left">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td>
<td width="150" valign="top" 
align="right">строчка 3 столбец2</td> 
</tr>
</table>

посмотреть результат

Теперь, с помощью атрибута rowspan растянем первый столбец на три ряда. Для этого мы прописываем атрибут rowspan=»3″ для первой строчки, в остальных строчках мы просто убираем все столбцы под цифрой 2:

<table border="2" bordercolor="#990066" 
bgcolor="#FF9933">
<tr>
<td height="50" width="200" valign="top" 
align="center">строчка1 столбец1</td>
<td width="150" valign="middle" align="left" rowspan="3" 
bgcolor="#9999FF">строчка 1 столбец2</td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td> 
</tr>
</table>

посмотреть результат

Для лучшего усвоения материала разберём комбинированный пример, где будут находиться оба параметра сolspan и rowspan:

<table border="2" bordercolor="#990066" 
bgcolor="#FF9933">
<tr>
<td height="50" width="200" valign="top" 
align="center" bgcolor="#9999FF" 
colspan="2">строчка1 столбец1</td>
</tr>
<tr>
<td height="100" width="200" valign="middle" 
align="left">строчка 2 столбец1</td> 
<td width="150" valign="middle" align="left" 
rowspan="2" bgcolor="#9999FF">строчка 2 столбец2</td>
</tr>
<tr>
<td height="50" width="200" valign="bottom" 
align="right">строчка 3 столбец1</td> 
</tr>
</table>

посмотреть результат

Далее мы разберём ещё несколько атрибутов для таблиц html.

Поделиться в соц. сетях

Растягивание ячеек
Растягивание ячеек
Растягивание ячеек
Растягивание ячеек
Растягивание ячеек
Растягивание ячеек

Оставить комментарий

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика