 |
Таблицы
Так как большинство сайтов "строится" на основе таблиц, то для них мы отвели отдельный раздел.
1. Создание таблицы
2. Параметры width и height
3. Параметры colspan и rowspan
4. Параметры border и bordercolor
5. Параметры cellspacing и cellpadding
6. Параметр rules
7. Параметр align
8. Параметры bgcolor и backgroung
1. Создание таблицы
Таблица задается тегом <table> </table>.
Таблицы состоят из строк и столбцов. Строка таблицы задается тэгом <tr> </tr>, столбец (ячейка) таблицы задается тэгом <td> </td>.
У всех этих тегов есть атрибуты, но о них мы поговорим позже.
Пример таблицы в две строки (<tr> </tr>) с тремя ячейками (<td> </td>):
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>пример 1</td>
<td>пример 2</td>
<td>пример 3</td>
</tr>
<tr>
<td>пример 4</td>
<td>пример 5</td>
<td>пример 6</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
| пример 1 |
пример 2 |
пример 3 |
| пример 4 |
пример 5 |
пример 6 |
|
В данном примере мы использовали параметр border="1", который устанавливает толщину рамки таблицы в пикселях. Может принимать любое положительное число.
2. Параметры width и height Теперь попробуем задать таблице ширину и высоту. Для этого воспользуемся параметрами width и height
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td width="200" height="200">пример 1</td>
<td>пример 2</td>
<td>пример 3</td>
</tr>
<tr>
<td>пример 4</td>
<td>пример 5</td>
<td width="100" height="100">пример 6</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
| пример 1 |
пример 2 |
пример 3 |
| пример 4 |
пример 5 |
пример 6 |
|
Здесь мы задали для первой ячейки (пример 1) ширину (width) 200 пикселей, а высоту (height) 100 пикселей. Ячейки пример 2 и пример 3 вытянулись по первой, т. к. она бóльшая из них. По тому же принципу растянулась и ячейка пример 4.
* Для закрепления данного материала, попробуйте сами разобраться с ячейкой пример 6.
Параметры width и height могут также использоваться и в теге <table>. При этом будет изменяться размер всей таблицы.
3. Параметры colspan и rowspan
Для объединения ячеек используются параметры colspan и rowspan
- Пример использования colspan
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">пример 1</td>
</tr>
<tr>
<td>пример 2</td>
<td>пример 3</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
| пример 1 |
| пример 2 |
пример 3 |
|
- Пример использования rowspan
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">пример 1</td>
<td>пример 2</td>
</tr>
<tr>
<td>пример 3</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
| пример 1 |
пример 2 |
| пример 3 |
|
- Пример использования colspan и rowspan
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2">пример 1</td>
<td rowspan="2">пример 2</td>
</tr>
<tr>
<td>пример 3</td>
<td>пример 4</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
| пример 1 |
пример 2 |
| пример 3 |
пример 4 |
|
Параметр colspan объединяет ячейки по горизонтали, rowspan - по вертикали. Значение этих параметров зависит от того, сколько ячеек мы хотим объединить. В нашем случае это 2.
* К примеру, мы хотим объединить 5 ячеек по горизонтали, тогда: colspan="5"
4. Параметры border и bordercolor
- Параметр border задает рамку вокруг всей таблицы и вокруг каждой ячейки
(см. пункт 1. Создание таблицы)
- Параметр bordercolor устанавливает цвет рамки таблицы. Значение указывается в шестнадцатеричном формате (например, bordercolor="#FFCCOO") или в виде наименования (например, bordercolor="green")
5. Параметры cellspacing и cellpadding
- Параметр cellspacing задает расстояние между внешними границами ячеек. Если установлен параметр border, толщина границы принимается в расчет.
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table cellspacing="10" border="1">
<tr>
<td>пример 1</td>
<td>пример 2</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
- Параметр cellpadding определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Аргументом является любое целое значение в пикселях или процентах от доступного пространства.
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table cellpadding="7" border="1">
<tr>
<td>пример 1</td>
<td>пример 2</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
6. Параметр rules
- Параметр rules описывает рамки вокруг таблицы. Может принимать следующие значения:
| all |
Отображает все части рамки внутри таблицы |
| cols |
Отображает все вертикальные рамки внутри таблицы |
| rows |
Отображает все горизонтальные рамки внутри таблицы |
| groups |
Линия отображается между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL> |
| none |
Удаляет все рамки вокруг таблицы |
Пример с параметром rules="cols"
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table rules="cols" border="3">
<tr>
<td>пример 1</td>
<td>пример 2</td>
</tr>
<tr>
<td>пример 3</td>
<td>пример 4</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
| пример 1 |
пример 2 |
| пример 3 |
пример 4 |
|
7. Параметр align
- Параметр align выравнивает таблицы относительно документа. Может принимать следующие значения:
| center |
по центру |
| left |
по левому краю |
| right |
по правому краю |
8. Параметры bgcolor и background
- Параметр bgcolor определяет цвет заднего фона таблицы. Значение цвета можно задавать двумя способами:
• По его названию (bgcolor="red")
• По шестнадцатеричному значению (bgcolor="#FF0000")
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table bgcolor="#FF0000" border="1">
<tr>
<td>пример 1</td>
<td>пример 2</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
- Параметр background определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше ширины или высоты таблицы, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и содержимым таблицы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей.
Для примера будем использовать эту картинку:
<html>
<head>
<title>Создание таблиц в HTML</title>
</head>
<body>
<table background="picture/fon.jpg" border="1">
<tr>
<td>пример 1</td>
<td>пример 2</td>
</tr>
</table>
</body>
</html>
|
Вот так будет выглядить наша таблица:
|
 |
