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

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Разработка сайтов под ключ

Веб-услуги

Обучающие программы для веб-разработчиков

Веб-ресурсы

Таблицы. Структура таблицы. Разметка страницы

Таблицы

Основными средствами HTML для разметки страницы или композиции веб-страницы являются таблицы и фреймы. Ячейки таблицы создаются контейнерными тегами и могут содержать другие элементы: тексты, графику, элементы пользовательского интерфейса и даже другие таблицы. Некоторые или все разграничительные линии таблицы можно сделать невидимыми. Таким образом, таблицы можно рассматривать как средство позиционирования элементов документа. Фреймы представляют собой объекты, во многом похожие на главное окно браузера. Клиентскую область браузера можно разбить на несколько прямоугольных областей (фреймов), загрузив в каждую из них свой HTML-документ.

Таблицы

В HTML-документе таблицы используются в следующих случаях:

  • как средство представления данных;
  • как элемент оформления страницы, с помощью которого можно точно разместить на странице текст и графику.
Структура HTML-таблицы
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Структура HTML-таблицы</title>
</head>

<body>
<table width="400" align="center" border="1">
<caption>Заголовок таблицы</caption>
<tr>
<td align="center">1</td>
<td align="center">2</td>
</tr>
<tr>
<td align="center">3</td>
<td align="center">4</td>
</tr>
</table>
</body>
</html>

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

Эта структура описывает таблицу 2х2 с заголовком. Таблица и значения в ячейках выровнены по центру. Все ячейки таблицы пронумерованы от 1 до 4. Таблица вставляется в HTML-документ с помощью парного тега <table>. Отдельная ячейка таблицы описывается с помощью тега <td>, а ряд ячеек — с помощью тега <tr>. Тег <caption> позволяет задать заголовок таблицы. Рассмотрим эти теги подробно.

Вставка таблицы в документ

Тег <table> имеет следующие параметры:

  • border — управляет отображением линий сетки таблицы, а также задает толщину рамки вокруг таблицы. По умолчанию рамка не отображается. Если этот параметр не указан или его значение равно 0, то сетка не отображается. Допускается не указывать значение этого параметра, и тогда рамка будет иметь толщину 1. Каждая ячейка имеет собственную рамку толщиной 1 пиксел, которая не отображается, если в теге <table> указан параметр border с отличным от нуля значением или без значения;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Отображение линий сетки</title>
    </head>

    <body>
    <table width="200"> <!--Здесь сетка не отображается -->
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="200" border="0"> <!--Здесь сетка не отображается -->
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="200" border="3"> <!--В этом случае сетка отображается, толщина рамки вокруг таблицы равна 3 пикселам -->
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • cellspacing —задает толщину линий сетки внутри таблицы или расстояние между рамками соседних ячеек. По умолчанию параметр имеет значение 2. Если параметру присвоить значение 0, то рамки смежных ячеек сольются в одну линию;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Отображение линий сетки</title>
    </head>

    <body>
    <table width="200" border="1" cellspacing="1"> <!--Здесь толщина ячейки равна 1 -->
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="200" border="1" cellspacing="0"> <!--Здесь рамки ячеек слиты в одну линию -->
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • cellpadding — указывает размер отступа между рамкой ячейки и данными внутри ячейки. По умолчанию параметр имеет значение 1;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Отображение линий сетки</title>
    </head>

    <body>
    <table width="200" border="1" cellspacing="0" cellpadding="3"> <!--Здесь размер отступа равен 3 -->
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • width — определяет ширину таблицы в пикселах или процентах от размера окна;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Отображение линий сетки</title>
    </head>

    <body>
    <table width="200" border="1">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="50%" border="1">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

    height —задает высоту таблицы в пикселах или процентах от размера окна;

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Отображение линий сетки</title>
    </head>

    <body>
    <table width="200" height="100" border="1">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="100%" height="100%" border="1">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • align — задает выравнивание таблицы, а также обтекание таблицы текстом. Он может принимать следующие значения:
    • left — таблица выравнивается по левому краю, а текст обтекает ее справа ;

    • <table align="left">

    • right — таблица выравнивается по правому краю, а текст обтекает ее слева;

    • <table align="right">

    • center — таблица выравнивается по центру;

    • <table align="center">

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Отображение линий сетки</title>
    </head>

    <body>
    <table width="200" border="1" align="left">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="200" border="1" align="right">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="200" border="1" align="center">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • bgcolor — указывает цвет фона таблицы;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Отображение линий сетки</title>
    </head>

    <body>
    <table width="200" border="1" bgcolor="#80FFFF">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="200" border="0" bgcolor="silver">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • background — определяет URL-адрес фонового рисунка;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Цвет фонового рисунка</title>
    </head>

    <body>
    <table width="200" border="1" background="images/fon1.png">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • bordercolor — определяет цвет рамки таблицы;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Цвет рамки</title>
    </head>


    <body>
    <table width="200" border="1" bordercolor="#0000FF">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    <br>
    <table width="200" border="1" bordercolor="red">
    <tr>
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • bordercolordark —определяет цвет нижней и правой частей внешней рамки таблицы;

  • <table border="1" bordercolordark="#00FF00">

  • bordercolorlight — определяет цвет верхней и левой частей рамки таблицы;

  • <table border="1" bordercolorlight ="#0000FF">

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Цвет рамок</title>
    </head>

    <body>
    <table width="200" border="1" bordercolordark="#FF0000" bordercolorlight="#0000FF">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

Выборочное отображение рамок таблицы

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

Параметр frame может принимать следующие значения:

  • box —отображать все четыре стороны рамки;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="box">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

    above — отображать только верхнюю часть рамки;

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="above">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

  • below — отображать только нижнюю часть рамки;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="below">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

  • hsides — отображать горизонтальные части рамки сверху и снизу;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="hsides">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

  • vsides — отображать только левую и правую вертикальные части рамки;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="vsides">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

  • lhs — отображать только левую часть рамки;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="lhs">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

  • rhs — отображать только правую часть рамки;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="rhs">
    <tr>
    <td> </td>
    <td> </td>

    </tr>
    </table>
    </body>
    </html>

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

  • void —не отображать внешнюю рамку.

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" frame="void">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

  • Атрибут rules может принимать следующие значения:
    • all — отображать все вертикальные и горизонтальные линии;
    • rows — отображать только горизонтальные линии между строками;
    • cols — отображать только вертикальные линии между столбцами;
    • none — не отображать разделительные линии;

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Выборочное отображение рамок рамок</title>
    </head>

    <body>
    <table width="200" border="1" rules="all">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    <br>
    <table width="200" border="1" rules="rows">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    <br>
    <table width="200" border="1" rules="cols">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    <br>
    <table width="200" border="1" rules="none">
    <tr>
    <td> </td>
    <td> </td>
    </tr>
    </table>
    </body>
    </html>

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

Комментарии(0)

Для добавления комментариев надо войти в систему и авторизоваться
Комментирование статей доступно только для зарегистрированных пользователей:Зарегистрироваться