Логотип Инфоурока

Получите 30₽ за публикацию своей разработки в библиотеке «Инфоурок»

Добавить материал

и получить бесплатное свидетельство о размещении материала на сайте infourok.ru

Инфоурок Информатика Другие методич. материалыТеория. Web-дизайн. "Таблицы в HTML"

Теория. Web-дизайн. "Таблицы в HTML"

§1.Использование таблиц в HTML

1.1. Основные теги таблиц

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

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

.

Заполнение таблицы происходит построчно; для обозначения строки используется пара тегов

. Строка состоит из ячеек, для задания которых используют либо теги ..., если эти ячейки содержат заголовки столбцов, либо теги .... Заголовки выводятся полужирным шрифтом и располагаются по центру ячейки. Данные имеют обычный шрифт и выравниваются по левой стороне ячейки. Для задания заголовка всей таблицы используются теги и .



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

Заголовок1 Заголовок2

Ячейка 1Ячейка 2

Ячейка 3Ячейка 4



Наличие в ячейках данных не обязательно. Создать пустую ячейку можно двумя способами: ничем не заполнять ее контейнер (

), либо поместить в нее символ неразрывного пробела, задаваемого специальной последовательностью символов -   (т. е. создать ячейку вида  ).

Нет надобности отдельно создавать пустые ячейки, если планируется, что все оставшиеся в строке ячейки не будут заполнены. Так как тег

1.2.Основные атрибуты таблицы

Назначение основных атрибутов тега

BORDER=n

Определяет ширину рамки таблицы (в пикселах), например, BORDER=1; значение, равное нулю, означает отсутствие рамки

WIDTH=n

Определяет ширину всей таблицы в пикселах, либо в процентах от ширины окна браузера

HEIGHT=n

Определяет высоту всей таблицы в пикселах, либо в процентах от высоты окна браузера

ALIGN

Задает горизонтальное выравнивание таблицы в окне браузера; имеет значения left, center и right (по умолчанию - left)

CELL">CELLSPACING=n

Добавляет свободное пространство между ячейками внутри всей таблицы; по умолчанию значение равно 2


HSPACE=n

Задает области свободного пространства указанной ширины (в пикселах) слева и справа от таблицы

VSPACE=n

Задает области свободного пространства заданной высоты (в пикселах) сверху и снизу от таблицы

BGCOLOR=цвет

Устанавливает цвет фона всей таблицы

BACKGROUND=URL

Указывает фоновое изображение для таблицы, где URL -- адрес источника (имя файла с изображением)

Пример:

Если тег

то ячейки таблицы будут обрамлены рамкой, a таблица выровнена по центру окна браузера.


В HTML не предусмотрено специальных средств раскрашивания таблиц. Однако большинство браузеров имеют расширения, позволяющие изменять цвет ячеек и рамок. Вы можете изменить цвет фона ячейки при помощи атрибута BGCOLOR перед размещением в ней текста или изображения, а также использовать атрибут BORDERCOLOR для изменения цвета рамки ячейки. Теги

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

1.3.Выравнивание данных в ячейках

При помощи атрибутов ALIGN и VALIGN можно по-разному размещать данные относительно границ ячейки. Эти атрибуты используются совместно с тегами

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

Атрибут ALIGN может принимать значения left, center и right (по умолчанию - left для данных и center для заголовков); он определяет горизонтальное выравнивание данных в ячейках и действует на всю строку, если не отменяется тем же атрибутом в отдельной ячейке

Атрибут VALIGN может иметь значения top, bottom, middle и baseline (по умолчанию - middle); он регулирует положение данных относительно верхней и нижней границ ячейки и влияет на всю строку, если не отменяется таким же атрибутом в отдельной ячейке. baseline применяется ко всем элементам строки и выравнивает их по базовой линии

Атрибут ALIGN может принимать значения left, center и right (по умолчанию - center)

Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию - middle)

Атрибут ALIGN может принимать значения left, center и right (по умолчанию - left)

Атрибут VALIGN может иметь значения top, bottom и middle (по умолчанию - middle)

Атрибут ALIGN может иметь значения top и bottom (по умолчанию - top); размещает заголовок таблицы сверху или снизу

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

Для соединения двух смежных ячеек в одном столбце нужно использовать атрибут ROWSPAN тега

или , например,

<TD ROWSPAN=2>


Для объединения двух смежных ячеек в одной строке нужно использовать атрибут COLSPAN тех же тегов, например,

<TD COLSPAN=2>

1.4.Примеры таблиц

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

Среднее значение

Рост Вес

Мужчины 174 78

Женщины 165 56

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

Заголовок на 3 столбца

Заголовок на 1 строку

Ячейка 1

Ячейка 2

Заголовок на 3 строки

Ячейка 3

Ячейка 4

Ячейка 5Ячейка 6

Ячейка 7Ячейка 8

Таблица с раскрашенными ячейками

CELL; background: #e6e6e6">

Простой заголовок

Заголовок на 2 столбца

Заголовок на 1 строку

Ячейка 1

Ячейка 2

Заголовок на 3 строки

Ячейка 3

Ячейка 4

Ячейка 5

Ячейка 6

Ячейка 7

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

5 479 873 материала в базе

Материал подходит для УМК

Скачать материал

Другие материалы

  • 16.12.2019
  • 265

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 25.01.2020 160
    • DOCX 34.5 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Нессонова Елена Вячеславовна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Пожаловаться на материал
  • Автор материала

    Нессонова Елена Вячеславовна
    Нессонова Елена Вячеславовна
    • На проекте: 5 лет и 3 месяца
    • Подписчики: 5
    • Всего просмотров: 5108
    • Всего материалов: 15