УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 4. Таблицы в HTML

Если рассмотреть какую-нибудь Веб-страницу, то можно сказать: страница имеет определённую, упорядоченную структуру, которую проще всего представить в виде таблицы.

Так, страница моего сайта выполнена (на момент составления этих уроков она была такой) в виде таблицы, в которой четыре строки:

Уроки html для начинающих
Рис. 3.

Первая и третья строки к тому же разделены на ячейки. А информация находится в ячейках таблицы.

Если присмотреться к любой странице других сайтов, можно увидеть то же самое: структура страницы задана в виде таблицы, имеющей строки и ячейки. Даже если границ таблицы не видно…

Поэтому на этом уроке мы научимся создавать таблицы и задавать их внешний вид. Мы создадим страницу сайта в виде вот такой таблицы:

Уроки html для начинающих
Рис. 4.

Рассмотрим её.

Любая таблица имеет горизонтальные строки. В нашем примере три строки. И каждая строка может быть разделена на ячейки. У нас это так:

 

Уроки html для начинающих
Рис. 5.

Но для простоты построения таблицы представим, что ячеек во всех строках поровну - три. А потом лишние просто "сотрём". Помните, как чертили на уроках черчения? Сначала много-много сплошных тонких линий и ничего толком не разберешь. Потом нужное обводим, а лишнее - стираем, и получается вполне понятное изображение. Примерно так же и здесь…

Вот из чего будем исходить:

Уроки html для начинающих
Рис. 6.

То есть, как бы имеем таблицу в три строки с тремя ячейками в каждой.

Приступим.

Откроем созданный файл index.html в "Блокноте" (это можно сделать двумя способами: 1) открыть файл двойным щелчком мыши, затем кликнуть правой кнопкой посреди окна и выбрать "Просмотр html-кода"; 2) не открывая файл, кликнуть на нём правой кнопкой, выбрать "Открыть с помощью" - "Блокнот").

Открылся текстовый редактор с кодом нашей страницы.

Таблица задаётся тегами <table> и </table>. Строки задают тегами <tr> и </tr>, а ячейки - тегами <td> и </td>.

Вставим эти теги в тело документа (между <body> и </body>). Между <table> и </table> пропишем следующий код для трёх строк и в каждой строке по три ячейки:

Листинг 4.1

…..
<body>
<table>
<tr>
<td> Здесь будет картинка, отражающая тему сайта </td>
<td> Имя сайта: ВСЁ О СОБАКАХ </td>
<td> А эту ячейку мы потом уберём </td>
</tr>
<tr>
<td> Здесь будет рекламный баннер </td>
<td> Эту ячейку объединим с двумя другими </td>
<td> Эту ячейку тоже объединим с двумя другими </td>
</tr>
<tr>
<td> Здесь будет панель навигации </td>
<td> Здесь разместим уникальные, качественные, содержательные статьи. </td>
<td>Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр. </td>
</tr>
</table>

</body>
</html>

 

Сохраним документ и посмотрим результат в браузере:

Уроки html для начинающих
Рис. 7.

Очевидно, нужно указать размеры таблицы, да и чтобы рамка была видна… Как это сделать?

Большинство тегов имеют вспомогательные команды - атрибуты, с помощью которых задаются конкретные значения для элементов Веб-страницы.

Для тега <table> есть следующие атрибуты и их значения:

align = right | left | center | justify - атрибут для горизонтального выравнивания в ячейке по правом/левому краю/по центру/по ширине.

valign = top | bottom | middle - выравнивание данных в ячейке по верхнему\нижнему краю и вертикальной середине.

width = - ширина ячейки

height = - высота ячейки

BGCOLOR = - цвет фона ячеек таблицы

bordercolor = "#FF0000" - цвет рамки

Border = - толщина линии рамки таблицы

Ширина и высота могут выражаться как в %, так и в пикселях. Толщина линий - в пикселях. Цвет для браузеров задают в виде кода, который можно посмотреть в специальной таблице.

Добавьте следующий код (напомню, новый код выделен коричневым):

Листинг 4.2

……
<body>
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC">
<tr>
<td> Здесь будет картинка, отражающая тему сайта </td>
<td> Имя сайта: ВСЁ О СОБАКАХ </td>
<td> А эту ячейку мы потом уберём </td>
</tr>
<tr>
<td> Здесь будет рекламный баннер </td>
<td> Эту ячейку объединим с двумя другими </td>
<td> Эту ячейку тоже объединим с двумя другими </td>
</tr>
<tr>
<td> Здесь будет панель навигации </td>
<td> Здесь разместим уникальные, качественные, содержательные статьи. </td>
<td>Здесь будет разная служебная информация: форма подписки на рассылку, информация о партнёрских программах и пр. </td>
</tr>
</table>
</body>
</html>

Внимание! значения атрибутов заключаются в кавычки! (например: BORDER="2")

Сохраним документ и посмотрим результат в браузере:

Уроки html для начинающих
Рис. 8.

Это уже кое-что.

Во второй части этого урока мы разберёмся, как объединять ячейки >>>>>>>

Важно! Web-технологии постоянно развиваются, совершенствуются. Те статьи по HTML, что выложены на нашем сайте - это необходимый минимум, который следует освоить, но информация в них несколько утарела. Со времени их написания появилась новая версия HTML - HTML5. Поэтому рекомендую скачать бесплатно видеоуроки по HTML, в которых вы найдёте много нового, соответствующего новым стандартам сайтостроения.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

Оставьте свой отзыв о статье:



Введите цифровой код с картинки*:

осторожно, мошенник!

Эта информация поможет сохранить вам деньги >>>

Рассылки

"Вокруг Сайта"
подпишитесь и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта

SmartResponder.ru
Ваше имя: *
Ваш e-mail: *

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

PHP-песочница
Подписаться письмом

Скачать видео

Разделы Сайта