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

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

Начинают и заканчивают таблицу тэгами <table> … </table>.

Тэг <TR> начинает каждую строку таблицы, внутри ряда содержание каждой ячейки начинает тэг <TD>. Поэтому структура таблицы выглядит так:

 

<table> <TR>

<TD>Ряд 1, ячейка 1</TD> <TD>Ряд 1, ячейка 2</TD>

</TR>

<TR>

<TD>Ряд 2, ячейка 1</TD> <TD>Ряд 2, ячейка 2</TD>

</TR>

</table>

На экране такая таблица будет выглядеть так:

Ряд 1, ячейка 1 Ряд 1, ячейка 2
Ряд 2, ячейка 1 Ряд 2, ячейка 2

Ячейки 1й строки (ряда) можно оформить как заголовки столбцов:
тэг <TH> начинает каждый заголовок столбца таблицы. Например:

<TR> <TH>заголовок столбца 1 <TH>заголовок столбца 2

Заголовок над всей таблицей задаёт парный тэг <caption> с атрибутами, напр.:

<caption align="top">Заголовок таблицы </caption>

Для установки разных параметров всей таблицы к тэгу <table> добавляют:

Ÿ атрибут border=n задаёт толщину рамки вокруг таблицы. По умолчанию толщина =0 (текст стоит в табличной форме, но сетка таблицы не видна).
Например:при <table border=5>вид таблицы такой:

Ряд 1, ячейка 1 Ряд 1, ячейка 2
Ряд 2, ячейка 1 Ряд 2, ячейка 2

Ÿ атрибут width=n задаёт ширину таблицы в пикселях, или в % по отношению к ширине всего экрана. Например: <table border=1 width=400>

Ÿ атрибут height=n задаёт высоту таблицы в пикселях,

например: <table height=200 border=1>

Ÿ атрибут cellpadding=n задаёт поля внутри ячеек таблицы (т.е. текст будет отступать от края ячейки на заданное количество пикселей). По умолчанию эти поля =2 пикселя. Например: <table cellpadding=10 border=1>

Ÿ атрибут cellspacing=nзадаёт ширину поля между ячейками (тогда у каждой ячейки появится своя рамка, и между этими рамками будет расстояние, заданное атрибутом cellspacing). По умолчанию ширина границ 2 пикселя.

При создании таблиц применяют атрибуты, задающие параметры и для отдельных рядов таблицы (если они заключены между тэгами <TR>..</TR>) или ее ячеек

Ÿ атрибут align выравнивает содержимое ячеек по горизонтали. По умолчанию содержимое выравнивается по левому краю. Пример:

Тип атрибута Align=Left Align=Center Align=Right
Вид в таблице Текст слева Текст по центру Текст справа

Ÿ атрибут valign выравнивает содержимое ячеек по вертикали. Атрибут может принимать значения top, middle или bottom. По умолчанию – выравнивание middle. Атрибут используется, если высота ячейки больше, чем занимает ее содержимое. Пример:

Тип атрибута Valign= Top Valign= Middle Valign=Bottom
Вид текста в таблице Текст вверху ячейки Текст по середине ячейки Текст внизу ячейки

Ÿ атрибут colspan=n объединяет n ячеек ряда, начиная с данной, в 1 ячейку

A B C
D E (данная ячейка занимает два столбца)
F G H

В данном случае описание 2го ряда таблицы содержит описание только 2х ячеек (в остальных рядах по 3 ячейки) и выглядит так:

<TR>

<TD>D</TD>

<TD colspan=2>E (данная ячейка занимает 2 столбца)</TD>

</TR>

Ÿ атрибут rowspan=n объединяет n ячеек столбца, начиная с данной, в 1ячейку

A B C
D E (данная ячейка занимает 2 ряда) F
G H

Html-код для создания такой таблицы выглядит так:

<table cellpadding=5 border=1>

<TR>

<TD>A</TD> <TD>B</TD> <TD>C</TD>

</TR>

<TR>

<TD>D</TD><TD rowspan=2>E(данная ячейка занимает 2 ряда)</TD>

<TD>F</TD>

</TR>

<TR>

<TD>G</TD> <TD>H</TD>

</TR> </table>

Ÿ атрибут width=n – установка ширины ячейки. Ширина задается в пикселях или в % от ширины всей таблицы.

Ÿ атрибут height=n – установка высоты ячейки. Задается в пикселях.

ЗАДАНИЕ. Откройте 1.htm в Блокноте. Между <body>..</body> всё удалите и далее создадим таблицу номеров телефонов.

Для вставки таблицы, причем с заданной толщиной линий (border) и шириной таблицы (width) введите тег: <table border="10" width="100%">

Для заголовка введите: <caption align="top">Список телефонов</caption>

Для задания 1й строки таблицы (с двумя заголовками столбцов) так:

<TR bgcolor="yellow" align="center"> <TH>Фамилия <TH>Номер телефона

Создайте следующие строки таблицы, предваряя каждую тегом <TR> и помещая содержимое каждой ячейки после тега <TD>. Заполните 5-10 строк

Последнюю строку задайте так:

<TR> <TD align="center" colspan="2"> На 1 этаже здания - бесплатный телефон

Завершите таблицу тегом </table> Сохраните файл под именем таблица.htm

<html> <head><title> Пример 9 </title></head> <body> <table border=10 width=100%> <caption align="top"> Список телефонов </caption> <TR bgcolor="yellow" align="center"> <TH>Фамилия <TH>Номер телефона <TR> <TD>Иванов <TD>41-23-15 <TR> <TD>Петров <TD>61-20-15 <TR> <TD>Сидоров <TD>70-90-09 <TR> <TD>Кузнецов <TD>61-10-89 <TR> <TD align="center"colspan="2"> На 1этаже здания - бесплатный телефон </table> </body> </html>

Откройте файл таблица.htm в Internet Explorer.
Изучите, как заданные атрибуты влияют на вид таблицы в браузере.

Измените ширину окна браузера. Как при этом изменяется вид таблицы?









Дата добавления: 2015-02-23; просмотров: 633; ЗАКАЗАТЬ НАПИСАНИЕ РАБОТЫ


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию, введите в поисковое поле ключевые слова и изучайте нужную вам информацию.

Поделитесь с друзьями:

Если вам понравился данный ресурс вы можете рассказать о нем друзьям. Сделать это можно через соц. кнопки выше.
helpiks.org - Хелпикс.Орг - 2014-2020 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.012 сек.