Таблица - один из основных инструментов для создания web-страниц. Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном. Если вы прошли серию уроков Делаем сайт - первые шаги, то вы понимаете о чем речь.Любая таблица представляет собой набор строк и столбцов, на пересечении которых находятся ячейки. Например:Название таблицы| столбец 1 | столбец 2 | столбец 3 |
|---|
| первый столбец первой строки | второй столбец первой строки | третий столбец первой строки | | первый столбец второй строки | второй столбец второй строки | третий столбец второй строки | | первый столбец третьей строки | второй столбец третьей строки | третий столбец третьей строки | Рассмотрим нашу таблицу с точки зрения HTML: - сама таблица задается с помощью тегов <table></table>,
- у таблицы есть название - теги <caption></caption>,
- таблица состоит из строк - теги <tr></tr>,
- каждая строка состоит из столбцов - теги <td></td>,
- столбцы имеют названия, расположенные в первой строке - теги <th></th>.
Создадим таблицу, где в качестве содержимого укажем пересечение номеров строк и столбцов:<![CDATA[
<html>
<head>
<title>html table</title>
</head>
<body>
<table>
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
]]>Результат:Название таблицы| 1 | 2 | 3 |
|---|
| 11 | 12 | 13 | | 21 | 22 | 23 | | 31 | 32 | 33 | - width - задает ширину таблицы (в пикселах или % от ширины экрана),
- bgcolor - задает цвет фона ячеек таблицы,
- background - заливает фон таблицы рисунком,
- border - задает рамку указанной ширины (в пикселах) вокруг всей таблицы.
Применим эти параметры:<![CDATA[
<html>
<head>
<title>html table</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
]]>Результат:Название таблицы| 1 | 2 | 3 |
|---|
| 11 | 12 | 13 | | 21 | 22 | 23 | | 31 | 32 | 33 | - align - задает выравнивание таблицы: слева (right), справа (left), по центру (center),
- cellspacing - задает расстояние между ячейками таблицы (в пикселах),
- cellpadding - задает расстояние между текстом и внутренней границей ячейки таблицы (в пикселах).
Применим эти параметры:<![CDATA[
<html>
<head>
<title>html table</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="5" cellpadding="10">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
]]>Результат:Обратите внимание, границы у таблицы двойные. Если указать cellspacing="0", то границы примут привычный вид:<![CDATA[
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="0" cellpadding="10">
]]>Результат:Вообще, за границы отвечают два параметра: - frame - задает вид рамки вокруг таблицы и может принимать следующие значения:
- void - рамки нет,
- above - только верхняя рамка,
- below - только нижняя рамка,
- hsides - только верхняя и нижняя рамки,
- vsides - только левая и правая рамки,
- lhs - только левая рамка,
- rhs - только правая рамка,
- box - все четыре части рамки.
- rules - задает вид внутренних границ таблицы и может принимать следующие значения:
- none - между ячейками нет границ,
- groups - границы только между группами строк и группами столбцов (будут рассмотрены чуть позже),
- rows - границы только между строками,
- cols - границы только между стобцами,
- all - отображать все границы.
С помощью этих параметров можно задавать границы так, как вам хочется. Здесь приведем только один пример, сами же поэкспериментируйте со всеми.<![CDATA[
<html>
<head>
<title>html table</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="5" cellpadding="10"
rules="rows" frame="void">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr><td>11</td><td>12</td><td>13</td></tr>
<tr><td>21</td><td>22</td><td>23</td></tr>
<tr><td>31</td><td>32</td><td>33</td></tr>
</table>
</body>
</html>
]]>Результат:Следует заметить, что границы в разных браузерах отображаются немного по-разному.Оформляем строки (tr) и ячейки (td)Таблицы формируются построчно. Поэтому, заданные в строке (tr) параметры распространяют свое действие на все ячейки (td) строки. У строк можно использовать три параметра:- align - выравнивает текст в ячейках по горизонтали, может принимать значения: слева (right), справа (left), по центру (center),
- valign - выравнивает текст в ячейках по вертикали, может принимать значения: вверх (top), вниз (bottom), по центру (middle),
- bgcolor - задает цвет строки.
Посмотрим на примере:<![CDATA[
<html>
<head>
<title>html tr</title>
</head>
<body>
<table width="300" bgcolor="plum" border="1"
align="center" cellspacing="0" cellpadding="10">
<caption>Название таблицы</caption>
<tr><th>1</th><th>2</th><th>3</th></tr>
<tr align="center" valign="middle" bgcolor="yellow">
<td>
11 Текст во всех ячейках этой строки
центрирован по центру как по вертикали,
так и по горизонтали
</td>
<td>12</td>
<td>13</td>
</tr>
<tr align="left" valign="bottom">
<td>
21 Здесь текст прижат к левому краю
по горизонтали и книзу - по вертикали
</td>
<td>22</td>
<td>23</td>
</tr>
<tr align="right" valign="top" bgcolor="yellow">
<td>
31 Текст во всех ячейках этой строки
прижат по горизонтали к правому краю,
по вертикали - кверху
</td>
<td>32 </td>
<td>33</td>
</tr>
</table>
</body>
</html>
]]>Результат:Эти же параметры можно применять и к отдельным ячейкам, т.е. к любому тегу <td>, действие будет распространяться только на саму ячейку.Например, в предыдущем коде добавьте в любой тег <td> параметр bgcolor="red".<![CDATA[
<td bgcolor="red">
21 Здесь текст прижат к левому краю
по горизонтали и книзу - по вертикали
</td>
]]>Результат:Но к ячейкам можно применять еще два параметра:- width - задает ширину столбца (в пикселах или в процентном соотношении, где за 100% принимается ширина таблицы),
- height - задает высоту ячейки, причем все ячейки в этой же строке станут этой высоты.
Например, добавим в наш код, в теги <th> эти параметры<![CDATA[
<tr>
<th width="50%" height="50">1</th>
<th width="30%">2</th>
<th width="20%">3</th>
</tr>
]]>Результат:Следует отметить, если не задавать ширину и высоту, то таблица будет формироваться по содержимому (так было в предыдущих примерах).
|
