Строение таблиц

Для большинства страниц, сверстанных таблицами, достаточно совсем небольшого количества тегов. Прежде чем делать таблицу, ее надо хорошенько продумать, лучше всего ее нарисовать, можно на бумаге или в каком нибудь графическом редакторе, хотя бы в программе «Paint».

Теги таблиц

<table> открывающий тег таблицы
</table> закрывающий тег таблицы

<tr>тег - начало строки
эти теги создают новый ряд (строку) ячеек
</tr> тег - конец строки

<th> открывающий тег ячейки
содержимое ячейки - table header (заголовок таблицы)
текст внутри этих тегов будет выделен полужирным шрифтом и отцентрирован
</th> закрывающий тег ячейки

<td> открывающий тег ячейки
содержимое ячейки
</td> закрывающий тег ячейки


Атрибуты

width - ширина таблицы и ячеек указывается в "%" или в пикселях "800", указывать в HTML высоту таблиц и ячеек не рекомендуется (код не пройдет валидацию), для указания высоты, используйте таблицы стилей - CSS

border - толщина рамки

cellspacing - расстояние между ячейками

cellpadding - расстояние между рамкой ячейки и текстом

align - выравнивание по горизонтали ( слева="left" центр="center" справа="right" )

valign - выравнивание по вертикали ( верх="top" середина="middle" низ="bottom" )

colspan - количество ячеек по горизонтали

rowspan - количество ячеек по вертикали


Просмотр примеров

Для просмотра примеров таблиц, скопируйте в блокнот, HTML код расположенный ниже, сохраните, как index.html. Выделив мышкой код таблицы, копируйте его и вставляйте поочередно, между тегами <body> и </body>.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
<title>С чего начинать</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>

</body>
</html>

Таблица с одной ячейкой

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td>Ячейка </td>
</tr>
</table>

Результат

Ячейка

Таблица с тремя ячейками

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td>Это ячейка № 1</td>
</tr>
<tr>
<td>Это ячейка № 2</td>
</tr>
<tr>
<td>Это ячейка № 3</td>
</tr>
</table>

Результат

Это ячейка № 1
Это ячейка № 2
Это ячейка № 3

Если между тегами <td> </td> не ставить теги <tr> </tr> ячейки будут располагаться горизонтально

Пример

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td>Это ячейка № 1</td>
<td>Это ячейка № 2</td>
<td>Это ячейка № 3</td>
</table>

Результат

Это ячейка № 1 Это ячейка № 2 Это ячейка № 3

Таблица (три строки) + (три столбца)

<table border="1" cellpadding="0" cellspacing="0" width="50%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

1 01 001
2 02 002
3 03 003

Отступ

Чтобы текст не касался границ ячеек, изменяйте значение параметра cellpadding

Пример

<table border="1" cellpadding="5" cellspacing="0" width="50%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

1 01 001
2 02 002
3 03 003

cellspacing

При измении значения параметра cellspacing меняется внешний вид таблицы

Пример

<table border="1" cellpadding="5" cellspacing="10" width="50%">
<tr>
<td width="33%">1</td>
<td width="33%">01</td>
<td width="34%">001</td>
</tr>
<tr>
<td width="33%">2</td>
<td width="33%">02</td>
<td width="34%">002</td>
</tr>
<tr>
<td width="33%">3</td>
<td width="33%">03</td>
<td width="34%">003</td>
</tr>
</table>

Результат

1 01 001
2 02 002
3 03 003

Таблица усложняется 1

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

<table border="1" cellpadding="5" cellspacing="0" width="100%">
<caption>Заголовок таблицы</caption>
<tr>
<th colspan=2>логотип</th>
</tr>
<tr>
<th width="25%">навигация</th>
<th width="75%">заголовок</th>
</tr>
<tr>
<td width="25%" valign="top">
<ul>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
</ul>
</td>
<td width="75%" valign="top">контент</td>
</tr>
<tr>
<td colspan=3>подвал (банеры, счетчики)</td>
</tr>
</table>

Результат

Заголовок таблицы
логотип
навигация заголовок
контент
подвал (банеры, счетчики)

Таблица усложняется 2

<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<th colspan=3>логотип</th>
</tr>
<tr>
<th width="20%">навигация</th>
<th width="60%">заголовок 1</th>
<th width="20%">заголовок 2</th>
</tr>
<tr>
<td width="20%" valign="top">
<ul>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
</ul>
</td>
<td width="60%" valign="top">контент</td>
<td width="20%" valign="top">суб-контент</td>
</tr>
<tr>
<td colspan=3>подвал (банеры, счетчики)</td>
</tr>
</table>

Результат

логотип

Навигация

Заголовок контента

Заголовок суб-контента
контент суб-контент
подвал (банеры, счетчики)

CSS (Таблицы Каскадных Стилей)

Добавив таблице, ячейке класс (class="...") или id (id="..."), можно будет управлять их внешним видом, используя CSS. Для начала сменим, значение параметров border и cellpadding на "0" и допишем в код таблицы классы. Каждому классу в CSS зададим свойства, например, если мы используем на странице три варианта заголовков (h1, h2 и h3), тогда каждому из них присвоим свой класс (h1 class="zag1") - (h2 class="zag2") - (h3 class="zag3"). В CSS пишем:

.zag1 {
font:36px verdana, arial, helvetica, sans-serif; /* шрифт, размер шрифта */
color : #000; /* цвет шрифта */
font-weight:900; /* насыщенность шрифта */
}
.zag2 {
font:28px helvetica, arial, sans-serif;
color : #666;
font-weight:800;
}
.zag3 {
font:20px sans-serif;
color : #ccc;
font-weight:700;
}

Результат
Заголовок
Заголовок
Заголовок

В CSS перед именем класса ставится точка - (.name), а если используется ID (идентификатор), то перед именем ID ставится решетка # - (#name). Имя класса и идентификатора, обязательно должно начинаться с буквы, если их в CSS много, чтобы не запутаться можно добавлять цифры - (.name1) - (.name2). Имя идентификатора повторятся не должно, например если у Вас на странице, несколько таблиц, каждой давайте имя, отличное от другого - (table id=page) - (table id=menu) - (table id=content), применять одно и тоже имя класса можно быть сколько угодно - (p class=text) - (span class=text) - (strong class=text), но тогда и свойства элементов, будут одинаковыми.

В Интернете можно скачать справочники по CSS, хороший справочник по CSS, написал Влад Мержевич, скачать его можно нажав на эту ссылку

Простая табличная страница

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th colspan=3 class="header"><h1>Драгоценные и поделочные камни</h1></th>
</tr>
<tr>
<th width="20%" class="left_top"><h3>Навигация</h3></th>
<th width="60%" class="content_top"><h3>Нефрит</h3></th>
<th width="20%" class="right_top"><h3>Заголовок суб-контента</h3></th>
</tr>
<tr>
<td width="20%" valign="top" class="left">
<ul>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
<li><a href="index.html" title="Ссылка">Ссылка</a></li>
</ul>
</td>
<td width="60%" valign="top" class="content">
<p>
Камни-целители, хранители и защитники от скверны. К ним относится весь род нефритов. Нефрит, жадеит, жад - это родственные камни, разные очень, от зеленоватых до белых, розоватых, голубых, оранжевых.
</p>
<p>
Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Часто присутствующие коричневые полоски являются результатом окисления железа по трещинам в камне.
</p>
<p>
Главный камень - белый нефрит. Белые и желтые — очень редкие нефриты. Нефриты - камни-допинги, камни-наркотики. Камни-воины. Нефрит - замечательный камень. Виды нефрита - очень разные "по звучанию". Они, как и лунные камни, священные камни в Китае. Нефрит связан с Венерой, Сатурном и Луной. В медицине с почками связан лишь белый нефрит.
</p>
</td>
<td width="20%" valign="top" class="right">
<p>
Зеленый нефрит, а особенно голубой - совершенно иные, к почкам никакого отношения не имеют. Нефриты не связаны ни с каким знаком Зодиака. Это - один из ключевых камней вообще. Этот камень связан с религией и одновременно с перестройкой всей жизни. Носить нефрит можно только тем людям, которые стараются полностью поменять свою жизнь, встать на совершенно новый, уникальный уровень, переделаться, перестроиться.
</p>
</td>
</tr>
<tr>
<td colspan=3 class="footer"><p>подвал (банеры, счетчики)</p></td>
</tr>
</table>
 

Теперь немного CSS

<style type="text/css">

body {
margin : 0;
padding : 0;
background-color:#fff;
}

h1, h2 {
color : #5E985A;
font-weight:700;
padding-left : 4px;
}

h3 {
color : #507E4B;
font-weight:700;
padding: 0 0 3px 0;
margin : 0;
}

.header, .left_top, .content_top, .right_top {
background-color:#95C094;
}

.left {
background-color:#C1DAC0;
color : #333;
padding : 7px 7px 0 7px;
}

.content {
background-color:#fff;
color : #333;
padding : 7px 7px 20px 7px;
}

.right {
background-color:#C1DAC0;
color : #333;
padding : 7px 7px 0 7px;
}

.right p {
font:11px sans-serif;
color : #333;
line-height:1.5;
}

.footer {
background-color:#95C094;
text-align : center;
padding-top : 15px;
padding-bottom : 15px;
}

.footer p{
font:10px verdana, arial, helvetica, sans-serif;
color : #fff;
}

</style>

Глобальные стили задают вид элементов всего документа.
Для этого используется
<style type="text/css"> ... </style>
Размещается в заголовке документа.

<html>
<head>
<title>Пример</title>
<style type="text/css">
h1{color:red; font-style:italic; font-size:32px}
</style>
</head>
<body>
<h1>Заголовок красным курсивом </h1>
</body>
</html>

Результат

Драгоценные и поделочные камни

Навигация

Нефрит

Заголовок 2

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

Цвет нефрита колеблется от серого до травяно-зеленого, может быть желтым, голубым и черным. Интенсивность окраски меняется в зависимости от содержания в составе минерала окислов железа. Часто присутствующие коричневые полоски являются результатом окисления железа по трещинам в камне.

Главный камень - белый нефрит. Белые и желтые — очень редкие нефриты. Нефриты - камни-допинги, камни-наркотики. Камни-воины. Нефрит - замечательный камень. Виды нефрита - очень разные "по звучанию". Они, как и лунные камни, священные камни в Китае. Нефрит связан с Венерой, Сатурном и Луной. В медицине с почками связан лишь белый нефрит.

Зеленый нефрит, а особенно голубой - совершенно иные, к почкам никакого отношения не имеют. Нефриты не связаны ни с каким знаком Зодиака. Это - один из ключевых камней вообще. Этот камень связан с религией и одновременно с перестройкой всей жизни. Носить нефрит можно только тем людям, которые стараются полностью поменять свою жизнь, встать на совершенно новый, уникальный уровень, переделаться, перестроиться.

подвал (банеры, счетчики)


Верстка таблицы для прайс-листа

Изменение внешнего вида таблицы и ячеек при помощи CSS

Изменение внешнего вида рамок таблицы и ячеек при помощи CSS

Закругленные углы таблицы и блока

Вернуться
Hosted by uCoz