Из электронной книги «Лучший учебник html. Основы html.», автор Андрей Галямов, сайт zvirec com icon

Из электронной книги «Лучший учебник html. Основы html.», автор Андрей Галямов, сайт zvirec com


Смотрите также:
Учебник по html :: Уроки html. Что нужно для изучения уроков html?...
Основы html
Лекция «Основы html»...
1 Основы веб строительства Цель...
Концепция www 5 Создание Web-страницы с помощью языка html 7 1 Язык html 7 Структура html...
Реферат по информационным технологиям на тему «Интернет, html и html-редакторы»...
Впоследнее время www стал самым популярным сервисом Интернета. И, естественно...
Http://edu rin ru/html/157. html...
Календарно тематическое планирование Элективный курс по информатике «html программирование» 9...
«Обыкновенные дроби»...
Разметка Web-страниц при помощи таблицы...
Словарь по html...



Загрузка...



скачать




Разберемся с таблицами в html

(глава из электронной книги «Лучший учебник html. Основы html.», автор Андрей Галямов, сайт zvirec.com)

Html таблицы - полезная штука. Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью
и CSS ). Вот классический пример табличной структуры:

 

Шапка сайта(логотип и все такое)

Ссылка 1

Ссылка 2

Ссылка 3

Ссылка 4

Ссылка 5




Основное содержание

Реклама и все такое

Блок копирайта

Давайте разбираться как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента.

TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах.

TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

^ Давайте попробуем создать таблицу из двух рядов и двух столбцов:








ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2


Вот как это будет выглядеть в браузере:

ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

Разобрались? Т.е. таблица начинается с , затем идёт , указывающий на начало нового ряда. В ряду вставлены две ячейки: и . Ряд закрывается , и сразу начинается новый ряд . В новом ряду также две ячейки. Таблица закрывается
ряд 1 ячейка1ряд1 ячейка2
. Все довольно логично

^ А как можно объединить ячейки?

Для этого существуют данные атрибуты.

COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

Пример 1:








ряд 1 ячейка 1+2
ряд 2 ячейка 1 ряд 2 ячейка 2


Получим в браузере:

ряд 1 ячейка 1+2

ряд 2 ячейка 1

ряд 2 ячейка 2

Пример 2:









Ячейка 1, ряд 1+2ряд1 ячейка2
ряд 2 ячейка 2


Получим в браузере:

Ячейка 1, ряд 1+2

ряд1 ячейка2

ряд 2 ячейка 2

^ Вот еще полезные атрибуты:

CELLPADDING – определяет расстояние (в пикселах) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом.

CELLSPACING – определяет расстояние (в пикселах) между границами соседних ячеек таблицы html.

WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала.

HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.

Пример 1:






>ряд 2 ячейка 2

ряд 1 ячейка1ряд1 ячейка2
ряд 2 ячейка 1


Результат в браузере:

ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

Пример 2:






>ряд 2 ячейка 2

ряд 1 ячейка1ряд1 ячейка2
ряд 2 ячейка 1


Результат в браузере:

ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

Пример 3:






>ряд 2 ячейка 2

ряд 1 ячейка1ряд1 ячейка2
ряд 2 ячейка 1


Результат в браузере:

ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

^ И наконец последние четыре атрибута:

ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left.

VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы .Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу,и установить посередине).

BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.

Примечание: можно хоть каждой ячейке таблицы задать свой цвет фона или фоновый рисунок. Но: если вы задаете фоновый цвет (или рисунок) в базовом элементе TABLE то во всех ячейках будет этот фон(рисунок), и если вы захотите в какой-то ячейке поменять, пропишите соответсвующий атрибут именно для этой ячейки.

Приведу пример:







ряд 1 ячейка1ряд1 ячейка2
ряд 2 ячейка 1ряд 2 ячейка 2


Результат в браузере:

ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

 

^ Еще один пример:







ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2


Результат в браузере:

ряд 1 ячейка1

ряд1 ячейка2

ряд 2 ячейка 1

ряд 2 ячейка 2

Если картинка меньше чем ячейка, то она будет дублироваться, как показано в примере. Если больше - то будет отображаться та часть которая влезет :) .

НУ вот впринципе и всё по таблицам. Если не получилось запомнить не расстраивайтесь. С практикой все запомнится(как говорят главное знать, где подсмотреть!). В программе Adobe Dreamweaver все делается очень просто.

Скачать 49.54 Kb.
оставить комментарий
Дата02.10.2011
Размер49.54 Kb.
ТипУчебник, Образовательные материалы
Добавить документ в свой блог или на сайт

Ваша оценка этого документа будет первой.
Ваша оценка:
Разместите кнопку на своём сайте или блоге:
rudocs.exdat.com

Загрузка...
База данных защищена авторским правом ©exdat 2000-2017
При копировании материала укажите ссылку
обратиться к администрации
Анализ
Справочники
Сценарии
Рефераты
Курсовые работы
Авторефераты
Программы
Методички
Документы
Понятия

опубликовать
Загрузка...
Документы

Рейтинг@Mail.ru
наверх