ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Теги, используемые при создании таблиц
Таблицы являются стандартом HTML. Таблица Web-страницы – это сетка для показа данных в строках и столбцах. Однако таблицы можно применять как средство обхода ограничений HTML. Например, в HTML нельзя точно расположить элементы по горизонтали, но при использовании таблицы можно добавлять столбцы для перемещения элементов. Чтобы создать таблицу вручную, необходимо сначала сформировать первую строку, затем каждую ячейку с ее содержимым. Таблица в WEB-страничку вставляется парным тегом <table> и </table>.
У тега <table> есть несколько параметров:
border - определяет ширину бордюра таблицы и может принимать значения от 0 до 10.Если значение border равно 0, то бордюр будет невидимым, например,
<table border=0>
width - задает ширину таблицы по отношению к ширине экрана в процентах., например,
<table width=”60%”>
bgcolor –определяет цвет фона под таблицей, например,
<table bgcolor=”#c0b1c1”>
background – наклеивает обои под таблицу, например,
<table background=”oboi,jpg”>
Между тегами <table > и </table>могут располагаться: теги заголовка таблицы (<caption> и </сaption>), теги заголовков строк или столбцов (<th>и </th>), теги формирования строк (<tr> и </tr>), теги формирования столбцов (<td. > и </td>).
Теги <caption> и </caption> используется для оформления заголовков таблицы,
например,
<caption>название таблица</caption>
Тег <caption> имеет параметр, определяющий положение заголовка таблицы, – align. Он может принимать два значения:
align=top- заголовок расположен над таблицей,
align=bottom- заголовок расположен под таблицей,
например,
<caption align=bottom >
Теги <tr> и </tr> используются для формирования строки таблицы. Тег <tr> имеет следующие параметры:
1. align - горизонтальное выравнивание внутри строки. Он может принимать значения:
align=left - выравнивание содержимого строки по левому полю;
align=right - выравнивание содержимого строки по правому полю;
align=center- выравнивание содержимого строки по центру.
2. valign - вертикальное выравнивание внутри строки. Он может принимать значения:
align= top – выравнивание по верхнему полю строки;
align= bottom - выравнивание по нижнему полю строки;
align= middle - выравнивание по середине.
3. bgcolor– задает цвет фона под строкой,
например,
<tr align=left bgcolor=”ffffff”>
Теги <td> и </td> используются для формирования столбцов таблицы. Тег <td> имеет следующие параметры:
1. align - горизонтальное выравнивание внутри столбца. Он может принимать следующие значения:
align=left- выравнивание содержимого столбца по левому полю;
align=right- выравнивание содержимого столбца по правому полю;
align=center- выравнивание содержимого столбца по центру.
2. valign - вертикальное выравнивание внутри строки. Он может принимать следующие значения:
align= top – выравнивание по верхнему полю столбца;
align= bottom - выравнивание по нижнему полю столбца;
align= middle - выравнивание по середине.
3. bgcolor– задает цвет фона под столбцом.
Пример создания простейшей таблицы.
<html>
<body>
<head>
<title>
Создание таблицы
</title>
<body bgcolor=”#ffffff” link=”#ff0000” vlink=”#ff0000”>
<table border >
<tr align=center>
<td>ячейка таблицы 1
</td>
<td>
ячейка таблицы 2
</td>
<tr>
<td>ячейка таблицы 3
</td>
<td>ячейка таблицы 4</td>
</tr>
</table>
<body>
</html>
Результат выполнения программы:
Чтобы назвать столбцы и строки таблицы используется парный тег < th> и </th>. Он имеет следующие параметры:
1. align – горизонтальное выравнивание заголовка.
2. valign – вертикальное выравнивание заголовка
3. width – ширина заголовка в пикселах.
4. bgcolor – цвет фона под заголовком.
Пример создания заголовков.
<html>
<body>
<head>
<title>
Создание таблицы
</title>
<body bgcolor=”#ffffff” link=”#ff0000” vlink=”#ff0000”>
<caption align=top>
Самая простая таблица с заголовками
</caption>
<table border>
<th> Заголовок 1</th>
<th> Заголовок 2</th>
<th> Заголовок 3</th>
<tr>
<td> Ячейка А </td>
<td> Ячейка b </td>
<td> Ячейка c </td>
</tr>
<tr>
<td> Ячейка d </td>
<td> Ячейка e </td>
<td> Ячейка f </td>
</tr>
</table>
<body>
</html>
Результат выполнения программы:
Гораздо чаще встречаются сложные таблицы. В них ячейки располагаются одновременно в нескольких соседних столбцах или строках. Для объединения ячеек используются параметры colspan и rowspan. Параметр colspan сообщает программе просмотра, что нужно растянуть клетку таблицы на несколько столбцов. Например, чтобы объединить ячейки двух столбцов, необходимо написать сolspan=2. Чтобы объединить ячейки двух строк необходимо написать rowspan=2.
Пример таблицы с использованием параметров colspan и rowspan.
<body>
<head>
<title>Создание таблицы</title>
<body bgcolor=”#ffffff” link=”#ff0000” vlink=”#ff0000”>
<table border>
<tr>
<td align=center rowspan=2 valign=middle>
Большая ячейка а
</td>
<td> Маленькая ячейка 1 </td>
<td> Маленькая ячейка 2 </td>
</tr>
<tr>
<td> Маленькая ячейка 3 </td>
<td> Маленькая ячейка 4</td>
</tr>
<tr>
<td> Маленькая ячейка c </td>
<td align=center colspan=2>
Большая ячейка d
</td>
</tr>
</table>
</body>
</html>
Результат выполнения программы:
При создании таблицы ширина столбца оказывается равной самому широкому элементу в таблице. В HTML можно задать конкретную ширину и высоту ячейки таблицы. Чтобы задать ширину и высоту строки таблицы используются параметры width и height тега <tr>. Чтобы задать ширину и высоту столбца таблицы используются параметры width и height тега <td>.
Пример задания высоты строки и ширины столбца.
<html>
<body>
<head>
<title>Создание таблицы</title>
<body bgcolor=”#ffffff” link=”#ff0000” vlink=”#ff0000”>
<table noborder width=”80%”>
<tr height=100>
<td align=left>
Мы имеем опыт обучения детей посредством компьютерных сетей
</td>
<td align=center width=100 >
<img src="kart.jpg">
</td>
</tr>
<tr height=100 >
<td align=left >
В 1986 году в
<a href=http://www.vega.ru>
Международной лаборатории Вега
</a>
начали организовывать детский компьютерный клуб,
основанный на принципах американской программы
<a href=”5/htm”>
”5-е измерение”
</a>
</td>
<td align=center width=100 >
<img src="kart.jpg">
</td>
</tr>
</table>
</body>
</html>
Результат выполнения программы:
В данном примере для большей наглядности бордюр таблицы сделан невидимым.
Не нашли, что искали? Воспользуйтесь поиском: