Урок 17 Выравнивание содержимого таблицы.

На этом уроке я расскажу вам как можно сделать так, чтобы содержимое ячейки не только располагалось в середине ячейки, но и вверху и внизу. Это можно сделать при помощи атрибута valign="свойство" (свойства: middle, top, bottom). Этот атрибут задается в тэге <td>. Для примера возьмем ту же нашу таблицу.

текст 1	текст 2	текст 3
текст 4	текст 5	текст 6

 

Снизу приведен код этой таблицы.

<table>

<tr>

<td width="60" height="40" bgcolor="#808080" valign="bottom"><center>текст 1</center></td>

<td width="60" bgcolor="#FF9900"><center>текст 2</center></td>

<td width="60" bgcolor="#808080" valign="top"><center>текст 3</center></td>

</tr>

<tr>

<td width="60" height="40" bgcolor="#FF9900" valign="top"><center>текст 4</center></td>

<td width="60" bgcolor="#808080"><center>текст 5</center></td>

<td width="60" bgcolor="#FF9900" valign="bottom"><center>текст 6</center></td>

</tr>

</table>

Как вы видите на ячейке текст 2 и текст 5 я не применил этот атрибут, т.к. хотел показать, что valign="middle" действует как тэг <center>.

Пока все. Повторяйте, закрепляйте и переходите к следующему уроку. :)

Урок 18 Как растянуть ячейки.

На этом уроке я расскажу вам как можно растянуть ячейки. А просто! Для этого еть атрибут collspan и rowspan. Эти два атрибута задаются в тэге <td>. Атрибут colspan - определяет количество столбцов на которые простирается данная ячейка. Атрибут rowspan - количество рядов. Ниже приведены примеры использования этих атрибутов.

Пример использования атрибута colspan. <td colspan"число">

текст 1		текст 2
текст 4	текст 5	текст 6

 

Снизу приведен код этой таблицы.

<table>

<tr>

<td height="40" bgcolor="#808080" colspan="2"><center>текст 1</center></td>

<td width="60" bgcolor="#FF9900"><center>текст 2</center></td>

</tr>

<tr>

<td height="40" bgcolor="#FF9900"><center>текст 4</center></td>

<td width="60" bgcolor="#808080"><center>текст 5</center></td>

<td width="60" bgcolor="#FF9900"><center>текст 6</center></td>

</tr>

</table>

Я задал значение атрибута colspan="2"(чтобы ячейка имела размер 2-ух) и удалил ячейку текст 3, оставив ячейку текст 3 получилась бы вот такая ерунда:

текст 1		текст 2	текст 3
текст 4	текст 5	текст 6

 

Так как ячейка текст 1 равна двум ячейкам, она вытесняет ячейку текст 3. И я ее просто взял и удалил. Еще я не использовал атрибут width в ячейке текст 1 и текст 4. Так как ячейка текст 1 и так большая.

С атрибутом colspa мы разобрались. Теперь разберемся с атрибутом rowspan.

<td rowspan="число">

текст 1	текст 2	текст 3
текст 4	текст 5

 

Вы должны написать код этой таблицы сами. Я вам подскажу только, что принцип действия тут тот же и, что вы должны удалить ячейку текст 6.

Если вы не справились с этим заданием, то нажмите сюда.

Вот код таблицы: <table> <tr> <td height="40" width="60" bgcolor="#808080"><center>текст 1</center></td> <td width="60" bgcolor="#FF9900"><center>текст 2</center></td> <td width="60" bgcolor="#808080" rowspan="2"><center>текст 3</center></td> </tr> <tr> <td height="40" width="60" bgcolor="#FF9900"><center>текст 4</center></td> <td width="60" bgcolor="#808080"><center>текст 5</center></td> </tr> </table>

 

Теперь задание посложнее, но вы не боитесь? Так ведь?

Напишите код этой таблицы:

текст 1		текст 3
текст 4	текст 5

 

Если вы не справились с этим заданием, то нажмите сюда.

Вот код таблицы: <table> <tr> <td height="40" bgcolor="#808080" colspan="2"><center>текст 1</center></td> <td width="60" bgcolor="#808080" rowspan="2"><center>текст 3</center></td> </tr> <tr> <td height="40" width="60" bgcolor="#FF9900"><center>текст 4</center></td> <td width="60" bgcolor="#808080"><center>текст 5</center></td> </tr> </table>

 

Все. Этот урок закончился. Пришлось тут воспользоваться помощью VBScript'ов. :) Остался последний урок по таблицам.