Search


Оглавление
Шаг 1
Шаг 2
Шаг 3
Шаг 4
Шаг 5
Шаг 6
Шаг 7
Шаг 8
Шаг 9
Шаг 10
Шаг 11
Шаг 12
Шаг 13
Шаг 14
Шаг 15
Шаг 16
Шаг 17
Шаг 18
Шаг 19
Шаг 20
Шаг 21
Шаг 22
Шаг 23
Шаг 24
Шаг 25
Шаг 26
Шаг 27
Шаг 28
Шаг 29
Шаг 30
Шаг 31
Шаг 32
Шаг 33
Шаг 34
Шаг 35
Шаг 36
Шаг 37
Шаг 38

Сделай сам!

Шаг 17

  Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Вот пример, сайта, оформление которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда пройдете главы о таблицах без труда сможете сверстать подобное).

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


<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>


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



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

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



Главная | Введение в HTML | Практика | JavaScripts | Разное | Об Авторе
© Copyright 2006 Брянск[311] 2006г.
All Rights Reserved.



Hosted by uCoz