Вставляем таблицу в HTML

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

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

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

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

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

Создадим новый файл table.html и рисуем в нем нашу первую таблицу.

Пусть она будет состоять из 3-х столбцов и 3-х строк.

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

<body>
<!--задаем таблицу шириной 700 пикселей (точек) и располагаем её посередине страницы-->
<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><!-- начинаем третью строку таблицы-->
<td>c1</td>
<td>c2</td>
<td>c3</td>
</tr>
</table><!-- закончили таблицу-->

</body>
</html>

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

В окне веб-браузера это будет выглядеть ТАК.

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

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

добавим в него дополнительные параметры.

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

Вносим изменения в наш table.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 – светлый оттенок того же цвета – у нас получится обьёмное изображение бордюра.
А если нам этого не надо, и мы желаем получить аккуратненькую таблицу с тонкими линиями – тогда присвоим одному из этих двух параметров цвет фона. В нашем случае фон белый.

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

или так:

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

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

А что бы нам ещё такого интересного, сделать с этим тэгом? Может подкрасим фон таблицы?

Тег <body> мы уже подкрашивали, <table> — подкрашивается точно также:

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

А теперь подкрасим первую строку таблицы синим цветом, а ячейку 3 серым:

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

<body>
<!--задаем таблицу шириной 700 пикселей (точек) и располагаем её посередине страницы-->
<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>b2</td>
<td bgcolor="#CCCCCC"><!-- красим ячейку в серый цвет-->
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.

Теперь, когда мы поэксперементировали над созданием таблиц, создадим таблицу с информацией о компании АВС.

Создадим новый HTML-документ.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Информация о компании АВС</title>
</head>

<body>
<table>
<tr>
<td>Главная страница</td>
</tr>
<tr>
<td>О компании</td>
</tr>
<tr>
<td>Услуги</td>
</tr>
<tr>
<td>Контакты</td>
</tr>
<tr>
<td>Прайс-лист</td>
</tr>
<tr>
<td>Регистрация</td>
</tr>
<tr>
<td>Гостевая книга</td>
</tr>
<tr>
<td>Полезные ссылки</td>
</tr>
</table>
</body>
</html>

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

В окне веб-браузера это будет выглядеть ТАК.

По умолчанию таблица отображается по левому краю окна и линии сетки таблицы не отображаются. С помощью атрибута border тега <table>зададим толщину рамки таблицы и отцентрируем ее.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Информация о компании АВС</title>
</head>

<body>
<table border="2" align="center">
<tr>
<td>Главная страница</td>
</tr>
<tr>
<td>О компании</td>
</tr>
<tr>
<td>Услуги</td>
</tr>
<tr>
<td>Контакты</td>
</tr>
<tr>
<td>Прайс-лист</td>
</tr>
<tr>
<td>Регистрация</td>
</tr>
<tr>
<td>Гостевая книга</td>
</tr>
<tr>
<td>Полезные ссылки</td>
</tr>
</table>
</body>
</html>

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

В окне веб-браузера это будет выглядеть ТАК.

На веб-страницах таблицы часто используются в качестве меню, элементы которого являются ссылками. На основе элементов таблицы Главная страница и Услуги создадим ссылки на подготовленные ранее документы abc.html и abc_serv.html.

Откроем через редактор Блокнот последнюю веб-страницу и заменим пары <td></td> на <th></th> которая по умолчанию определяет полужирное начертание содержимого ячеек и центрирование данных.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Информация о компании АВС</title>
</head>

<body>
<table border="2" align="center">
<tr>
<th><a href="abc12.html" target="_blank">Главная страница</a></th>
</tr>
<tr>
<th>О компании</th>
</tr>
<tr>
<th><a href="abc_serv.html" target="_blank">Услуги</a></th>
</tr>
<tr>
<th>Контакты</th>
</tr>
<tr>
<th>Прайс-лист</th>
</tr>
<tr>
<th>Регистрация</th>
</tr>
<tr>
<th>Гостевая книга</th>
</tr>
<tr>
<th>Полезные ссылки</th>
</tr>
</table>
</body>
</html>

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

В окне веб-браузера это будет выглядеть ТАК.

C помощью пары тегов <caption></caption> можно указать заголовок таблицы. Ячейки таблицы могут содержать практически любые теги, доступные в теле документа. В том числе, в ячейку можно поместить другую таблицу.



  • Другие |
назадвверхвперед
Rambler's Top100