Информатика - Программирование - html - Таблицы

Информатика - Программирование - 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"
Дата публикации:

Хештеги: :: :: ::

Смотрите также учебники, книги и учебные материалы:

Следующие учебники и книги:
Предыдущие статьи:

 


 



2024-11-21 12:13:28