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

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

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

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

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

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

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

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

Веб-услуги

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

Веб-ресурсы

Заголовки таблиц. Строки таблиц. Ячейки таблиц

Заголовки таблиц

Заголовок таблицы

Тег <caption> позволяет задать заголовок таблицы. Он имеет единственный параметр align. Этот параметр принимает одно из двух значений:

  • top — заголовок помещается над таблицей;

  • <caption align="top">Заголовок таблицы</caption>

  • bottom — заголовок располагается под таблицей.

  • <caption align="bottom">Заголовок таблицы</caption>

Пример:

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

<body>
<table width="200" border="1">
<caption align="top">Заголовок таблицы</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<br>
<table width="200" border="1">
<caption align="bottom">Заголовок таблицы</caption>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>

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

Строки таблицы

С помощью парного тега <tr> описываются стоки таблицы. Он имеет следующие параметры:

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

    • <tr align="left">

    • right — по правому краю;

    • <tr align="right">

    • center — по центру;

    • <tr align="center">

    • justify — по ширине;

    • <tr align="justify">

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Строки таблицы</title>
    </head>

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

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

  • valign — определяет вертикальное выравнивание текста в ячейках таблицы. Может принимать следующие значения:
    • top — по верхнему краю;

    • <tr valign="top">

    • middle — по центру;

    • <tr valign="middle">

    • bottom — по нижнему краю;

    • <tr valign="bottom">

    • baseline — по базовой линии;

    • <tr valign="baseline">

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Строки таблицы</title>
    </head>

    <body>
    <table width="200" height="250" border="1">
    <tr valign="top">
    <td>1</td>
    <td>2</td>
    </tr>
    <tr valign="middle">
    <td>1</td>
    <td>2</td>
    </tr>
    <tr valign="bottom">
    <td>1</td>
    <td>2</td>
    </tr>
    <tr valign="baseline">
    <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" height="250" border="1">
    <tr valign="top" bgcolor="#FF0000">
    <td>1</td>
    <td>2</td>
    </tr>
    <tr valign="middle" bgcolor="#00FF00">
    <td>1</td>
    <td>2</td>
    </tr>
    <tr valign="bottom" bgcolor="#0000FF">
    <td>1</td>
    <td>2</td>
    </tr>
    <tr valign="baseline" bgcolor="#FFFF00">
    <td>1</td>
    <td>2</td>
    </tr>
    </table>
    </body>
    </html>

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

Ячейки таблицы

С помощью тега < td> описываются ячейки таблицы. Тег <td> имеет следующие параметры:

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

    • <td align="left">

    • right — по правому краю;

    • <td align="right">

    • center — по центру;

    • <td align="center">

    • justify — по ширине;

    • <td align="justify">

  • valign — определяет вертикальное выравнивание текста в ячейках таблицы. Может принимать следующие значения:
    • top — по верхнему краю;

    • <td valign="top">

    • middle — по центру;

    • <td valign="middle">

    • bottom — по нижнему краю;

    • <td valign="bottom">

    • baseline — по базовой линии;

    • <td valign="baseline">

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

  • <td width="100">

    <td width="30%">

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

  • <td height="100">

    <td height="20%">

  • bgcolor — определяет цвет фона ячейки;

  • <td bgcolor="#FF0000">

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

  • <td bordercolor="#0000FF">

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

  • <td bordercolordark="#FF0000">

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

  • <td bordercolorlight="#0000FF">

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

  • <td background="images/fon1.png">

    Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Ячейки таблицы</title>
    </head>

    <body>
    <table width="600" border="1" >
    <tr >
    <td width="100" height="100" align="left" valign="top" bgcolor="#CCCC66">1</td>
    <td width="500" bgcolor="#FF0000" align="right" valign="bottom">2</td>
    </tr>
    </table>
    <br>
    <table width="100%" border="1">
    <tr>
    <td width="30%" height="50%"align="center" valign="baseline" bgcolor="#00FF00">1</td>
    <td width="70%" bordercolor="#0000FF" valign="middle">2</td>
    </tr>
    </table>
    <br>
    <table width="100%" border="1">
    <tr>
    <td width="50%" height="100" valign="bottom" bordercolor="#FF0000">1</td>
    <td width="50% "background="../../../images/fon1.png" bordercolor="#00CC33">2</td>
    </tr>
    <tr >
    <td height="50" bgcolor="#FF00FF">1</td>
    <td valign="baseline" bordercolordark="#FF0000" bordercolorlight="#0000FF">2</td>
    </tr>
    </table>
    </body>
    </html>

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

  • colspan —задает количество объединяемых ячеек по горизонтали;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Объединение ячеек</title>
    </head>

    <body>
    <table width="200" border="1">
    <tr>
    <td align="center" colspan="2">1 и 2 объединены</td>
    </tr>
    <tr>
    <td align="center">3</td>
    <td align="center">4</td>
    </tr>
    </table>
    </body>
    </html>

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

    Здесь мы заменили строку

    <td align="center">1</td>

    на

    <td align="center" colspan="2">1 и 2 объединены</td>

    при этом строка

    <td align="center">2</td>

    была удалена.

  • rowspan — указывает количество объединяемых ячеек по вертикали;

  • Пример:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Объединение ячеек</title>
    </head>

    <body>
    <table width="200" border="1">
    <tr>
    <td align="center" rowspan="2">1 и 3 объединены</td>
    <td align="center">2</td>
    </tr>
    <tr>
    <td align="center">4</td>
    </tr>
    </table>
    </body>
    </html>

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

    Здесь строка

    <td align="center">1</td>

    заменена на

    <td align="center" rowspan="2">1 и 3 объединены</td>

    при этом строка

    <td align="center">3</td>

    была удалена.

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

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