• 1285
  • 0
  • Уровень сложности исполнения: Справочник

Верстка страниц таблицами
Откройте блокнот и скопируйте в него:

Код:
<!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 name="description" content="текст о странице">
<meta name="keywords" content="ключевые слова">
<meta name="author" content="имя автора">
<meta name="robots" content="all">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
Здесь будут таблицы, блоки, фото и т.д.
</body>
</html>
Теперь нажмите в верхнем левом углу ФАЙЛ => "СОХРАНИТЬ КАК" впишите в название файла index.html и сохраните его в основной директории. Сделайте несколько копий страниц для таблиц, текста, и т.д. Это будут те страницы, на которых Вы можете попробовать все то, что узнаете здесь. Нужный Вам HTML код сохраняйте в «Блокноте» (расширение “.txt”) и используйте, как шпаргалку. Имена страницам лучше давать информативные, то есть, например страницу о музыке назвать music.html, а страницу с фотографиями photo.html и т.д.

Основные теги страницы

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
объявление типа документа
Код:
<html lang="ru">
начало html кода

Код:
<head>
начало блока информации для браузеров
Код:
<title>учебная страница</title>
— это название страницы
Код:
<meta...>
- о мета тегах
Код:
<link rel="stylesheet" type="text/css" href="ссылка на файл css">

Тег
Код:
<link>
определяет ссылку. В отличие от тега A, тег LINK может располагаться только в части заголовка HEAD документа. Информация, указанная в элементе LINK, может по-разному обрабатываться броузерами, в зависимости от указанных атрибутов.

Код:
<link rel="icon" href="ссылка на картинку ico" type="image/x-icon">
иконка
Код:
</head>
конец блока информации для браузеров

Код:
<body>
начало тела страницы
содержимое страницы
Код:
</body>
конец тела страницы

Код:
</html>
конец html кода
Таблицы

Для большинства страниц достаточно совсем небольшого количества тегов.

Теги таблиц

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

Атрибуты
width - ширина таблицы указывается в "%" или в пикселях "800"
border - толщина рамки
cellspacing - расстояние между ячейками
cellpadding - расстояние между рамкой ячейки и текстом
align - выравнивание по горизонтали ( по умолчанию слева="left" центр="center" справа="right" )
valign - выравнивание по вертикали ( верх="top" середина="middle" низ="bottom" )
colspan=x - количество ячеек по горизонтали
rowspan=x - количество ячеек по вертикали
Примеры таблиц
навигациязаголовок
менюконтент
Код:
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<tr>
<th width="25%">навигация</th>
<th width="75%">заголовок</th>
</tr>
<tr>
<td width="25%" valign="top">меню</td>
<td width="75%" valign="top">контент</td>
</tr>
</table>
таблица1
логотип
навигациязаголовок
контент
подвал (банеры, счетчики)
Код:
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<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>

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

Код:
<table border="1" cellpadding="0" 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>
таблица1
Копируйте код любой из таблиц вставляйте в HTML код страницы между и и пробуйте изменять атрибуты самостоятельно. Используя табличную верстку можно вставлять в таблицу еще одну, две и т.д. таблицы

Пример
логотип
>контент-верхсуб-контент-верх
текстконтент-низсуб-контент-низ
подвал
Код:
<table border="1" cellpadding="0" cellspacing="0" width="100%" id="table-1">
<tr>
<td width="100%">логотип</td>
</tr>
<tr>
<td width="100%">
<table border="1" cellpadding="0" cellspacing="0" width="100%" id="table-2">
<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="50%" valign="top">контент-верх</td>
<td width="30%" valign="top">суб-контент-верх</td>
</tr>
<tr>
<td width="20%">текст</td>
<td width="50%" >контент-низ</td>
<td width="30%">суб-контент-низ</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">подвал</td>
</tr>
</table>

Собственно это почти все, что нужно знать о таблицах. Чтобы быстрее понять, что к чему, сделаем одну страничку вместе

Можешь почитать и вот эту статейку "Будем фиксировать менюшку "

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

----