Часть четвертая. Форматирование текста и элементов в ячйках таблицы.

В предыдущих уроках мы узнали, как задать размер таблицам, «жесткий» и «резиновый», какие тэги определяют заголовок таблицы, а какие ячеек, какие теги определяют столбцы, а какие строки. Это все Вы должны себе четко представлять, если не лезет в голову, не отчаивайтесь, со временем все наладится, - «Терпение и труд, все перетрут».

Кроме размеров и количества строк и столбцов, в таблице можно задать положение и отступ от границ ячейки, текста и др. элементов, расстояние между ячейками, размер одной ячейки по отношению к другим и, конечно же, цвет. Подробно это рассматривать здесь не будем, просто написан будет код и пояснения. Подробности смотрите в учебниках

1	2
	3
4	5

      <table width="200" height="250" border="1" cellpadding="0" cellspacing="0">
        <tr align="center" >
          <td rowspan="2" bgcolor="#5A9E9E">1</td>
          <td>2</td>
        </tr>
        <tr align="center">
          <td>3</td>
        </tr>
        <tr align="center">
          <td>4</td>
          <td>5</td>
        </tr>
      </table>

1	3
2
4	5

      <table width="200" height="250" border="1" cellpadding="0" cellspacing="0">
        <tr align="center">
          <td>1</td>
          <td rowspan="2" bgcolor="#5A9E9E">3</td>
        </tr>
        <tr align="center">
          <td>2</td>
        </tr>
        <tr align="center">
          <td>4</td>
          <td>5</td>
        </tr>
      </table>

В этих примерах мы видим, как одна ячейка «расползлась» на целых две, благодаря <td rowspan="2"> этому значению. Точно так можно и на любое количество ячеек, только это будет в одной строке, между тегами <tr> и </tr>. Еще появились у таблицы новые атрибуты «cellpadding="0"» - это не что иное, как отступ от границ внутри ячейки, и атрибут «cellspacing="0"» - расстояние между ячейками. При присутствии их, даже со значением равным «0», они изменят вид нашей таблицы. Попробуйте убрать эти значения и сами поймете, что к чему.

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

Используя эти атрибуты можно сделать кое-какие необычности или украшательства. Сразу сделаю оговорку, работает это не во всех браузерах, смотрите в IE версии выше «4». Рассмотрим следующий пример:

      <table width="350" border="1" height="350" cellspacing="0" cellpadding="0" bordercolor="#999999">
        <tr bgcolor="#CCCCCC" >
          <td bordercolor="#FFFFFF"> </td>
          <td bordercolor="#666666"> </td>
          <td bordercolor="#FFFFFF"> </td>
        </tr>
        <tr bgcolor="#CCCCCC">
          <td bordercolor="#666666"> </td>
          <td bordercolor="#FFFFFF"> </td>
          <td bordercolor="#666666"> </td>
        </tr>
        <tr bgcolor="#CCCCCC">
          <td bordercolor="#FFFFFF"> </td>
          <td bordercolor="#666666"> </td>
          <td bordercolor="#FFFFFF"> </td>
        </tr>
      </table>

Этот пример надо смотреть в Internet Explorer, в Mozilla Firefox и Opera, эффекта не видно.

О том, как позиционировать элементы, на пример, текст, надо в открывающем теге, обозначающим ячейку, <td> добавить атрибут положения относительно границы ячейки вот таким образом <td align="left(слева)| center(центр)| right(справа)">, естественно, присутствовать может только одно значение. В учебниках найдете более подробную информацию.