Использование таблиц на странице

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

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

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

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

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

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

<table>

</table>

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

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

<table>

<tr> </tr>

</table>

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

<table>

<tr> </tr>

</table>

Понятно ?

Но это еще не все

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

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

Например. если у нас в таблице 1 строка и 1 столбец, т.е. например вот такая

то таблица будет описана так :

<table>

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

</table>

Если таблица состоит из 1 строки и 3 столбцов, т.е. вот такая

то таблица будет описана вот так

<table>

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

</table>

Если мы хотим добавить еще одну строку в таблицу из 3 ячеек, т.е. сделать вот такую таблицу

то код таблицы будет такой

<table>

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

</table>

А вот содержимое ячеек пишется МЕЖДУ тегами <td> и </td>

ВАЖНО. Для описания таблицы вы должны использовать именно такой порядок : сначала пишите теги таблицы, затем теги строки, затем теги ячеек.

Заполним нашу таблицу содержимым, расположив покрасивее теги

<table>

<tr>
<td> строка 1 ячейка 1</td>
<td> строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1</td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

Таблица будет выглядеть так

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

Так..что-то мы в теорию погрузились сильно. Надо бы заняться и практикой.

Добавим код таблицы в наш учебный файл.

Итого, код нашей страницы будет вот такой

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a>

<br><br>

<a href="http://moneymaster.ru" target="_blank">Сайт о том как зарабатывать в интернете</a>

<br><br>

<table>

<tr>
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

</center>

</body>

</html>

А можно ли использовать на странице несколько таблиц ? Можно.

А можно ли использовать таблицу внутри другой таблицы ? Можно. Но осторожно. Чтобы не запутаться и соблюдать вложенность.

Давай создадим для примера одну таблицу в другой.

Сначала создадим таблицу, например 2 х 2

код таблицы будет такой

<table>

</table>

А теперь вставим в первую ячейку такую же таблицу 2х2, т.е. сделаем вот такую таблицу

Код нашей таблицы будет такой :

<table>

<table>

</table>

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

</table>

Красным выделен код новой таблицы, вставленной в первую ячейку основной таблицы.

Да...Несколько заморочно . Но вы должны четко понимать структуру таблицы.
Если чего-то не поняли - перечитайте все ЕЩЕ РАЗ, пока не поймете. Дело в том что в процессе работы у вас могут возникнуть ошибки..где нибудь забудете закрыть тег ячейки..или тег строки...или нарушите принцип вложенности...в итоге вместо желанной таблицы у вас будет черт знает что на странице. Знание того КАК правильно делать таблицу - позволит вам найти ошибку и исправить код.

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

Важно. Если в таблице нет данных - то вы может и не увидите таблицу.

Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр таблицы border. По умолчанию он равен 0, поэтому таблицу без данных - не видно. Вставьте в тег таблицы значение border="1"

<table border="1">

Также часто требуется задать размеры таблицы, для этого служат уже известные параметры WIDTH и HEIGHT. Эти параметры мы применяли в уроке по вставке картинки.

Например вот так

<table border="1" width="300" height="150"> - это будет таблица шириной 300 пикселей и высотой 150,

вот такая

код таблицы такой

Также можно указать ширину и высоту строк и ячеек, используя параметры WIDTH и HEIGHT.

т.е. использовать эти параметры в тегах <tr> и <td>

Вставим в таблицу еще одну ячейку

т.е. получим вот такую таблицу

ячейка 1

ячейка 2

а теперь сделаем ширину первой ячейки = 50

таблица будет выглядеть вот так:

чтобы было видно ячейки надо в них что нибудь написать

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

Еще один часто употребляемый параметр для таблиц - это бэкграунд, т.е. задний фон.

Для описания цвета фона используется параметр bgcolor. Например вот такой код

даст вот такую таблицу

Но и это еще не все ! В качестве фона в таблицах можно использовать изображения !

Вернемся к файлу с которым мы работаем и в котором прописан вот этот код

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a>

<br><br>

<a href="http://moneymaster.ru" target="_blank">Сайт о том как зарабатывать в интернете</a>

<br><br>

<table>

<tr>
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

</center>

</body>

</html>

Сохраните вот это изображение под его "родным" именем sv5.gif в той же директории где находиться файл page.html, для этого наведите мышку на изображение, нажмите правую кнопку мышки и выберите "Сохранить рисунок как..". Выберите ту же директорию где находиться файл page.html

Теперь внесем изменения в код нашей таблицы.

<html>
<head>
<title>Моя первая интернет страница всего лишь за 5 минут</title>
</head>

<body bgcolor="#00CCFF" text="#FFFF00">

<center>

Сегодня замечательный день. <br><i>Я сделал свою первую интернет страничку.</i>

<br><font color="#0000FF" size="4"><b>я буду богатым и свободным человеком !</b></font>

<br><br>

<a href="http://moneymaster.ru"><img src="money-master.jpg" border="0"></a>

<br><br>

<a href="http://moneymaster.ru" target="_blank">Сайт о том как зарабатывать в интернете</a>

<br><br>

<table>

<tr background="sv5.gif">
<td> строка 1 ячейка 1 </td>
<td>строка 1 ячейка 2</td>
<td>строка 1 ячейка 3</td>
</tr>

<tr>
<td>строка 2 ячейка 1 </td>
<td>строка 2 ячейка 2</td>
<td>строка 2 ячейка 3</td>
</tr>

</table>

</center>

</body>

</html>

В итоге мы получим вот такую таблицу

строка 1 ячейка 1	строка 1 ячейка 2	строка 1 ячейка 3
строка 2 ячейка 1	строка 2 ячейка 2	строка 2 ячейка 3

Возможно вы не увидели того что требовалось увидеть. Так например Internet Explorer не понимает фоновую картинку в теге <tr>. Для того чтобы не сталкиваться с такой проблемой - лучше писать параметр background в теге <td>.

Если мы хотим сделать фон только для конкретной ячейки, то параметр background="sv5.gif" надо прописать в нужном теге <td>, т.е. вот так например <td background="sv5.gif">

Замечательным свойством фонового изображения является его повторяемость ! Т.е. если у вас размер ячейки больше чем изображение - то оно будет дублироваться так, чтобы заполнить все пространство ячейки.

Само собой, в таблице можно писать нужны текст или вставить картинку и таким образом осуществить некоторую двухслойность страницы.

дальше

Использование таблиц на странице

Пример создания сайта.