При создании веб-страниц часто необходимо по-разному размещать фрагменты текста и рисунки относительно друг друга, например в различных колонках. Для задания взаимного расположения элементов страницы, представления табличной информации, создания меню следует использовать таблицы.
Теперь рассмотрим, как делать таблицы на 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 тега
зададим толщину рамки таблицы и отцентрируем ее.<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> можно указать заголовок таблицы. Ячейки таблицы могут содержать практически любые теги, доступные в теле документа. В том числе, в ячейку можно поместить другую таблицу.
Комментарии(0)
Для добавления комментариев надо войти в систему и авторизоватьсяКомментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться