Главная | Оглавление | Словарь

Долго ли, коротко ли, но мы добрались до таблиц. Я полагаю, что мой спутник работал в Word и сталкивался с таблицами уже. Если так, то вы должны уже знать, что таблицы нужны для форматирования текста, а порой и не заменимы.

Таблица задается тэгом:


<table></table>

Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их.

<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы



Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:


<table>
<tr></tr>
<tr></tr>
</table>


Сначала задаем строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


Мой вам совет, для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть.

Итак, теперь нам надо заполнить получившийся каркас:


<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>


Надеюсь мы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер столбца (1х2 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так:

1x1
1x2
1x3
2x1
2x2
2x3

Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца.


<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>


Вот, что у нас получилось:



Попробуйте задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следущей ступеньке, и мы продолжим разговор о таблицах.

Назад | Шагнуть на следующую ступеньку