Меню

кнопка сайта

ссылки

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

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

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

Дело в том что таблицы в 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>

Писать контент между <tr> и <td>, между </td> и </tr> или между </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">

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

повторяемость фона.

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