Использование таблиц на странице
Теперь рассмотрим как делать таблицы на странице.
Вообще это ОЧЕНЬ ВАЖНАЯ тема. Поэтому не пропускайте этот раздел, хоть он
пожалуй самый сложный.
Дело в том что таблицы в HTML используются в основном не для представления
данных в виде таблицы, а для создания ДИЗАЙНА сайта...для создания каркаса страницы,
в котором уже размещается содержимое страницы. Но обо всем по порядку.
Таблица описывается парным тегом <table> и </table>
<table> говорит браузеру, что начинается таблица,
а </table> говорит о том, что таблица заканчивается. Запомнили ?
таким образом при создании таблицы пишем сразу 2 тега
<table>
</table>
Теперь надо описать строку таблицы. Для создания строки в таблице используется
парный тег <tr> </tr>
Если у нас таблица состоит из одной строки, то будет так
<table>
<tr> </tr>
</table>
Если таблица состоит из 3 строк, то делаем так :
<table>
<tr> </tr>
<tr> </tr>
<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>
<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>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
А теперь вставим в первую ячейку такую же таблицу 2х2, т.е. сделаем вот такую
таблицу
Код нашей таблицы будет такой :
<table>
<tr>
<td>
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Красным выделен код новой таблицы, вставленной в первую ячейку основной таблицы.
Да...Несколько заморочно .
Но вы должны четко понимать структуру таблицы.
Если чего-то не поняли - перечитайте все ЕЩЕ РАЗ, пока не поймете. Дело в том
что в процессе работы у вас могут возникнуть ошибки..где нибудь забудете закрыть
тег ячейки..или тег строки...или нарушите принцип вложенности...в итоге вместо
желанной таблицы у вас будет черт знает что на странице. Знание того КАК правильно
делать таблицу - позволит вам найти ошибку и исправить код.
Если кто-то начал делать приведенные последние примеры, то возможно столкнулся
с проблемой.
Да. Я немножко слукавил, но все для того чтобы вас не запутать.
Важно. Если в таблице нет данных - то вы может и не увидите таблицу.
Для того чтобы увидеть таблицу в которой не введены данные, надо задать параметр
таблицы border. По умолчанию он равен 0, поэтому таблицу без данных - не видно.
Вставьте в тег таблицы значение border="1"
<table border="1">
Также часто требуется задать размеры таблицы, для этого служат уже известные
параметры WIDTH и HEIGHT. Эти параметры мы применяли в уроке по вставке картинки.
Например вот так
<table border="1"
width="300" height="150"> - это будет
таблица шириной 300 пикселей и высотой 150,
вот такая
код таблицы такой
<table width="300" border="1"
height="150">
<tr>
<td> </td>
</tr>
</table>
Также можно указать ширину и высоту строк и ячеек, используя параметры WIDTH
и HEIGHT.
т.е. использовать эти параметры в тегах <tr> и <td>
Вставим в таблицу еще одну ячейку
<table width="300" border="1"
height="150">
<tr>
<td> </td><td> </td>
</tr>
</table>
т.е. получим вот такую таблицу
а теперь сделаем ширину первой ячейки = 50
<table width="300" border="1"
height="150">
<tr>
<td width="50"> </td><td>
</td>
</tr>
</table>
таблица будет выглядеть вот так:
|
чтобы было видно ячейки надо в них что нибудь написать
|
В ячейки таблицы можно писать как текст, так и вставлять ссылки, также вставлять
изображение.
Еще один часто употребляемый параметр для таблиц - это бэкграунд, т.е. задний
фон.
Для описания цвета фона используется параметр bgcolor. Например вот такой код
<table width="300" border="1"
height="150">
<tr>
<td width="50" bgcolor="#CCCCCC">
</td>
<td bgcolor="#FFFF99"> </td>
</tr>
</table>
даст вот такую таблицу
Но и это еще не все ! В качестве фона в таблицах можно использовать изображения
!
Вернемся к файлу с которым мы работаем и в котором прописан вот этот код
<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">
Замечательным свойством фонового изображения является его повторяемость ! Т.е.
если у вас размер ячейки больше чем изображение - то оно будет дублироваться
так, чтобы заполнить все пространство ячейки.
Само собой, в таблице можно писать нужный текст или вставить картинку и таким
образом осуществить некоторую двухслойность страницы.
|