Информатика - Программирование - html - Таблицы
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Понятие табличного представления данных не нуждается в дополнительном пояснении. В HTML таблицы используются не только традиционно, как метод представления данных, но и как средство форматирования WEB - страниц.
Создание простейших таблиц
Описание таблиц должно располагаться внутри раздела <body>. Документ может содержать произвольное число таблиц.
Каждая таблица должна начинаться тегом <table> и завершаться тегом </table>. Каждая строка начинается тегом <tr> и заканчивается тегом </tr>. Отдельная ячейка в строке обрамляется контейнером <td>, </td>.
Пример:
<html>
<head>
<title>таблицы</title>
</head>
<body>
<table>
<tr>
<td bgcolor="#FFCC33">ячейка 1.1</td>
<td bgcolor="#FFFF33">ячейка 1.2</td>
<td bgcolor="#336699">ячейка 1.3</td>
<tr>
<tr>
<td bgcolor="#FFFF33">ячейка 2.1</td>
<td bgcolor="#FFCC33">ячейка 2.2</td>
<td bgcolor="#FFFF33">ячейка 2.3</td>
</tr>
<tr>
<td bgcolor="#336699">ячейка 3.1</td>
<td bgcolor="#FFFF33">ячейка 3.2</td>
<td bgcolor="#FFCC33">ячейка 3.3</td>
</tr>
</table>
</body>
</html> посмотреть
Заголовок таблиц
Заголовок таблиц оформляется с помощью тега <caption>, который имеет один единственный параметр align:
align = top - заголовок над таблицей
align = bottom - заголовок под таблицей
Пример:
<html>
<head>
<title>таблицы</title>
</head>
<body>
<table>
<caption align = top>Тренировочная таблица</сaption>
<tr>
<td bgcolor="#FFCC33">ячейка 1.1</td>
<td bgcolor="#FFFF33">ячейка 1.2</td>
<td bgcolor="#336699">ячейка 1.3</td>
<tr>
<tr>
<td bgcolor="#FFFF33">ячейка 2.1</td>
<td bgcolor="#FFCC33">ячейка 2.2</td>
<td bgcolor="#FFFF33">ячейка 2.3</td>
</tr>
<tr>
<td bgcolor="#336699">ячейка 3.1</td>
<td bgcolor="#FFFF33">ячейка 3.2</td>
<td bgcolor="#FFCC33">ячейка 3.3</td>
</tr>
</table>
</body>
</html> посмотреть
Следует отметить, что это редкий случай, когда параметр aling может использоваться как для вертикального выравнивания так и для горизонтального выравнивания. Однако двойное использование в одном заголовке параметра aling недопустимо. Поэтому дополнительно введен дополнительный параметр - valing принимающий значения: top и bottom.
Пример:
<html>
<head>
<title>таблицы</title>
</head>
<body>
<table>
<caption align = left valign=top>Тренировочная таблица</caption>
<tr>
<td bgcolor="#FFCC33">ячейка 1.1</td>
<td bgcolor="#FFFF33">ячейка 1.2</td>
<td bgcolor="#336699">ячейка 1.3</td>
<tr>
<tr>
<td bgcolor="#FFFF33">ячейка 2.1</td>
<td bgcolor="#FFCC33">ячейка 2.2</td>
<td bgcolor="#FFFF33">ячейка 2.3</td>
</tr>
<tr>
<td bgcolor="#336699">ячейка 3.1</td>
<td bgcolor="#FFFF33">ячейка 3.2</td>
<td bgcolor="#FFCC33">ячейка 3.3</td>
</tr>
</table>
</body>
</html>
параметры тега <table>
Основной тег таблиц <table> может использоваться с рядом параметров, которые могут быть опущены:
* border
* cellspacing
* cellpadding
* width
* align
* heignt
* bgcolor
Разберем первый параметр border. По умолчанию рамки в таблицах не рисуются, однако для традиционного использования таблиц ее ячейки полезно отделить друг от друга линиями сетки, что облегчает восприятие и понимание информации, содержащейся в таблице. Для добавления в таблицу рамок добавляем в тег <table> параметр <border>, который может иметь численное значение:
Пример:
<html>
<head>
<title>таблицы</title>
</head>
<body>
<table border=10>
<caption align = left valign=top>Тренировочная таблица</caption>
<tr>
<td bgcolor="#FFCC33">ячейка 1.1</td>
<td bgcolor="#FFFF33">ячейка 1.2</td>
<td bgcolor="#336699">ячейка 1.3</td>
<tr>
<tr>
<td bgcolor="#FFFF33">ячейка 2.1</td>
<td bgcolor="#FFCC33">ячейка 2.2</td>
<td bgcolor="#FFFF33">ячейка 2.3</td>
</tr>
<tr>
<td bgcolor="#336699">ячейка 3.1</td>
<td bgcolor="#FFFF33">ячейка 3.2</td>
<td bgcolor="#FFCC33">ячейка 3.3</td>
</tr>
</table>
</body>
</html> посмотреть
Численное значение определяет толщину рамки в пикселях вокруг таблицы, однако на толщину рамок вокруг ячеек это значение влияния не оказывает. При отсутствии численного значения оно принимается равным минимальному значению (1).
Разберем значение параметра cellspacing:
cellspacing = num
где num - численное значение параметра в пикселях, которое не может быть опущено и которое задает расстояние между ячейками
Пример:
<html>
<head>
<title>таблицы</title>
</head>
<body>
<table border=10 cellspacing =5>
<caption align = left valign=top>Тренировочная таблица</caption>
<tr>
<td bgcolor="#FFCC33">ячейка 1.1</td>
<td bgcolor="#FFFF33">ячейка 1.2</td>
<td bgcolor="#336699">ячейка 1.3</td>
<tr>
<tr>
<td bgcolor="#FFFF33">ячейка 2.1</td>
<td bgcolor="#FFCC33">ячейка 2.2</td>
<td bgcolor="#FFFF33">ячейка 2.3</td>
</tr>
<tr>
<td bgcolor="#336699">ячейка 3.1</td>
<td bgcolor="#FFFF33">ячейка 3.2</td>
<td bgcolor="#FFCC33">ячейка 3.3</td>
</tr>
</table>
</body>
</html> посмотреть
ЗАПОМНИМ!
Посмотрите и запишите в тетрадь все возможные параметры используемые с таблицами. Более подробно и них говорить не стоит, давайте применять на практике.
bgcolor="#FFCC33" - цвет фона таблицы (строки, ячейки)
background="картинка.gif" - задает фоновый рисунок
width="50" или width="50%"- ширина таблицы
height="45" или height="45%"- высота таблицы
cellspacing="5" - расстояние между ячейками
cellpadding="5" - расстояние внутри ячеек
border="3" - задает толщину рамки таблицы
bordercolor="#000000" - задает цвет рамки таблицы
А вот вариант, когда ячейки таблицы будут располагаться вплотную друг к другу, иногда это очень полезно:
border="0" cellspacing="0" cellpadding="0"
Дата публикации:
Теги: обучение информатике :: информатика :: программирование :: html
Смотрите также учебники, книги и учебные материалы:
Следующие учебники и книги:
- Microsoft Word - Формулы, таблицы, нижние индексы - Практическое задание
- Microsoft Word - Таблицы, колонки, назначение клавиш символам - Практическое задание
- Microsoft Word - Форматирование текста - Практическое задание
- Информатика - Программирование - html - Списки
Предыдущие статьи:
- Информатика - Программирование - html - Ссылки
- Информатика - Программирование - html - Графика
- Информатика - Программирование - html - Форматирование
- Информатика - Программирование - html - Настройки цвета