|Web Учебник | Самоучитель по CSS | Самоучитель по PHP + MySql |Основы PhotoShop |Контакты. |

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

В этой главе мы поговорим как растянуть ячейку на несколько ячеек или несколько рядов.

Поумолчанию ячейка принимает тот-же размер что и рядом стоящая и если в таблице несколько рядов, то ячеек должно быть тоже одинаково в каждом ряду.
Но на то они и умолчания что-бы их можно было изменить!!!

Этот код не правилный, по тому что в верхнем ряду ячеек меньше чем в нижнем...

    <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>
Результат:
первый ряд, первая ячейка
второй ряд, первая ячейка второй ряд, вторая ячейка
Цифра в атрибуте colspan указывает на сколько ячеек растягиваем, в нашем случае 2, но может быть и 3, 5... 10 или больше!!!
Кстати это и есть код, если в него добавить несколько атрибутов то он может вполне заменить ту вкладную таблицу что я показал на предыдущей странице.

Так-же ячейку можно растянуть по вертикали , но уже атрибутом 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, но зачем показывать если вы использовать их пока не сможете...

 

                   Перейти к выбору следующей страницы
 

Добавить в закладки
Добиться абсолютной межбраузерности для механизма добавления в закладки не существует ни на каких языках!!! А для браузера "Chrome" не работают вообще ни какие механизмы!!!
Потому это лучше всего делать в ручную при помощи одновременого нажатия клавиш Ctrl и D , после чего нужно нажать готово(добавить). Такой "механизм работает всегда и везде!!!