Урок седьмой

Создаем таблицу

Фактически вся разметка веб-страницы состоит из таблиц.
Наш курс не предусматривает использование каких-либо редакторов HTML, но вы неизбежно придете к необходимости их использования.
Именно зная, как должен выглядеть код страницы без мусорных тэгов, вы сможете правильно выбрать свой редактор.

Теперь рассмотрим, как делать таблицы на странице.

Вообще это ОЧЕНЬ ВАЖНАЯ тема. Поэтому не пропускайте этот раздел, хоть он пожалуй самый сложный.

Дело в том, что таблицы в HTML используются в основном не для представления данных в виде таблицы, а для создания ДИЗАЙНА сайта...для создания каркаса страницы, в котором уже размещается содержимое страницы. Но обо всем по порядку.

Таблица описывается парным тегом <table> и </table>

<table> говорит браузеру что начинается таблица, а </table> говорит о том что таблица заканчивается.

Таким образом при создании таблицы пишем сразу 2 тега

<table>

</table>

Теперь надо описать строку таблицы. Для создания строки в таблице используется парный тег <tr> и </tr>

Если у нас таблица состоит из одной строки, то будет так

<table>

</table>

Если таблица состоит из 3 строк, то делаем так :

<table>

</table>

В каждой строке должна находиться как минимум 1 ячейка, или иначе говоря надо кроме строки, описать еще как минимум один столбец.

Столбцы в HTML описываются с помощью тегов <td> и </td>, которые должны находиться между тегами <tr> и </tr>

А теперь давайте поэкспериментируем.

Создадим новый файл 02.html и рисуем в нем нашу первую таблицу.
Пусть она будет состоять из 3-х столбцов и 3-х строк.

<html>
<head>
<title>Тема:"Таблицы в html" </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>

<table width="700" align="center">

<tr>
<td>
a1
</td>
<td>
a2
</td>
<td>
a3
</td>
</tr>
<tr>

<td>b1</td> <td>b2</td> <td>b3</td>

</tr>

<tr><!-- начинаем третью строку таблицы-->

</html>

Для просмотра документа в браузере, сохраняем его на диске. (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если, вы не закрывали страницу)

Это будет выглядеть ТАК.

Теперь поэкспериментируем с тэгами таблицы

<table width="700" align="center">

добавим в него дополнительные параметры.
<table width="700" align="center" border="1">

Вносим изменения в наш 02.html и смотрим, что изменилось.

    Сохраняем документ. Это будет выглядеть ТАК
    Увидели, как выглядит теперь наша таблица? – появился "бордюр" - назовем его так, чтобы проще запомнить название параметра border.    Соответственно если border="2" или "3" и до бесконечности, то он будет только тоще и толще и это отвратительно - ужасно некрасиво. А давайте лучше изменим его цвет?

<table width="700" align="center" border="1" bordercolor="#0000FF">

   Замечу, что последовательность написания параметров внутри любых тэгов HTML совершенно произвольная.
   Например, можно и так:

<table bordercolor="#0000FF" align="center" border="1" width="700">

   Внимание! А вот так делать не надо:
<bordercolor="#0000FF" align="center" border="1" width="700" table>
т.е. тэг <table ….> начинается с table, а не с чего-то другого.

   Так , что там у нас с таблицей? Всё ещё продолжает ужасно и кошмарно выглядеть – зачем ей двойные линии какие-то?
    Линии стали двойными, потому, что браузер отобразил бордюр дважды, сначала по периметру таблицы, а потом каждую ячейку в отдельности. Дело в том, что по умолчанию, в тэге <table> подразумевается отступ от края, дабы текст, который мы туда можем вставить, не касался краёв нашей таблицы. Но в данном случае нам эта услуга не нужна, и мы отменим сейчас этот отступ:

<table width="700" align="center" border="1" bordercolor="#0000FF" cellspacing="0">

   Внесите эти изменения и посмотрите, что получилось.

Это будет выглядеть ТАК

Да, линии жирноваты. Но вместо bordercolor мы можем использовать ещё два параметра:

<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#000080" bordercolorlight="#8080FF">

Вставляем и пробуем.
Как видите, это две составляющие прежнего параметра bordercolor, получается объёмный вид у нашего бордюра. Чтоб увидеть, как это достигается, поменяйте цвета:

<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FF0000" bordercolorlight="#0000FF">

Теперь вы можете визуально представить как происходит объём – краcная и синяя линии. Соответственно если bordercolordark – темный оттенок какого-либо цвета, а bordercolorlight – светлый оттенок того же цвета – у нас получится обьёмное изображение бордюра.
А если нам этого не надо, и мы желаем получить аккуратненькую таблицу с тонкими линиями – тогда присвоим одному из этих двух параметров цвет фона. В нашем случае фон белый.

или так:

   Поэксперементируйте с этими параметрами на своей страничке 02.html.

   А что бы нам ещё такого интересного, сделать с этим тэгом? Может подкрасим фон таблицы?
   Тег <body> мы уже подкрашивали, <table> - подкрашивается точно также:

<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#0000FF" bgcolor="#C1C1FF">

А теперь подкрасим первую строку таблицы синим цветом, а ячейку a3 серым:
<html>
<head>
<title>Тема "Таблицы в html" </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>

<table width="700" align="center" border="1" cellspacing="0" bordercolordark="#FFFFFF" bordercolorlight="#0000FF" bgcolor="#C1C1FF">


<tr bgcolor="#0000FF">

<td>
a1
</td>
<td>
a2
</td>
<td>
a3
</td>
</tr>
<tr>
<td>b1</td>

td bgcolor="#CCCCCC">
b2
</td>
<td>b3</td>
</tr>
<tr><td>c1</td><td>c2</td><td>c3</td>
</tr>
</table>
</body>
</html>

Это будет выглядеть ТАК

Теперь Вы знаете про таблицы многое, но это ещё не всё!
   Мы уже задали размер 700 пикселей нашей таблице.
<tr align="center"> <!—расположит содержимое всех ячеек в строке по центру -->
<tr align="right"> <!—выровняет содержимое всех ячеек в строке по правому краю -->
Тоже самое можно сделать для отдельно взятой ячейки.

<td align="center">
или
<td align="right">
Кроме параметра align есть еще и valign.

<td valign="top"> 
<td valign="bottom"> 
<td valign="middle"> 
   Я специально употребил слово "содержимое", потому, что содержать наши таблицы будут не только текст, но и изображения и может быть, однажды, даже встроенные внутрь одной из ячеек - другие наши таблицы.

   Пора бы поработать над размерами наших ячеек.

<td width="120" height="125"> 120 точек в ширину и 125 в высоту</td>

   Как только мы зададим высоту ячейки, то и вся строка подрастет в высоту до её уровня, т.е. остальным ячейкам указывать этот параметр не обязательно. А вот ширину желательно будет подсчитать и внести в каждую ячейку 120+500+80=700.

   Внимание! Когда перенесете идущий ниже код в 02.html и посмотрите, как изменилась таблица, вернитесь обратно и пробегитесь взглядом по коду, задавая себе вопрос – а что это мы сделали в этом тэге, а что в следующем и т.д. Задача убедиться, что Вы всё поняли, и мы можем приступать к созданию нашей главной страницы – index.html

<html>
<head>
<title>Тема "Таблицы в html" </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>

Для просмотра документа в браузере, сохраняем его на диске. (Файл->Сохранить) и откройте вашу страницу (или нажмите обновить если вы не закрывали страницу)

Это будет выглядеть ТАК.

Следующий урок смотрите ЗДЕСЬ.