ТАБЛИЦЫ |
Основным тегом таблицы является тег <table>[</table>].Каждая таблица состоит из ряда <tr>( table-таблица, row-ряд) и
ячеек (<td>data-данные) .Текст внутри тега <td> отображается обычным начертанием с выравниванием по левому краю.Также существует тег <th>(table header-заголовок) внутри которого текст отображается жирным начертанием с выравниванием по центру.Таблице также можно присвоить заголовок с помощью тега <caption>[</caption>](caption-заголовок).
|
<html>
<head>
<title></title>
</head>
<body>
<table>
<caption>Пример</caption>
<tr>
<th>текст1</th>
<th>текст2<th>
</tr>
<tr>
<td>текст3<td>
<td>текст4<td>
</tr>
</table>
</body>
</html> | Пример
| текст1 |
текст2 |
| текст3 |
текст4 |
| Структура таблицы:рамка таблицы имеет два параметра толщину и цвет.
Параметр border=" "может показывать структуру таблицы и толщину рамки в пикселах.Параметр bordercolor=" "задает цвет рамки.(поддерживается Internet Explorer,другии браузеры могут отображать цвет рамки неправильно)
Параметры высотыи ширинытаблицы:- width-ширина таблицы
- height-высота таблицы
Данные парметры могут быть указаны в процентах или пикселах.Если ширина и высота будут указаны в пикселах,то таблица будет иметь фиксированные размеры вне зависиммости от изменения размера окна браузера. В случае использования единицы измерения в качестве процентов, размер таблицы будет варьироваться от размера окна браузера. | - cellspacing
- данный параметр регулирует расстояние между соседними ячейками таблицы по вертикали и горизонтали
cellspacing="3"| eeeee | eeeee | eeeee |
|---|
cellspacing="9"| eeeee | eeeee | eeeee |
|---|
- cellpadding
- данный параметр регулирует отступ между рамкой и содержимым
cellpadding="3"| eeeee | eeeee | eeeee |
|---|
cellpadding="9"| eeeee | eeeee | eeeee |
|---|
|
Синтаксис: <table border="2" bordercolor="red" width="200" height="300" cellpadding="2" cellpacing="1"> |
Объединение ячеек:- colspan-данный параметр объединяет ячейки по горизонтали
- rowspan-данный параметр объединяет ячейки по вертикали
Данные параметры используются только в тегах <td> и <th>
Пример:
Объединяем ячейки 1 и 2.
<th>1</th><th>2</th>→<th colspan="2">1-2<th>
Объединяем ячейки 3,5 и 7.
<th>3</th>...
<th>5</th>...→<th rowspan="3">3-5-7</th>
<th>7</th>... | <html>
<head><title></title>
</head>
<body>
<table border="4" cellspacing="0" cellpadding="0" height="300" width="180">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<th>3</th>
<th>4</th>
</tr>
<tr>
<th>5</th>
<th>6</th>
</tr>
<tr>
<th>7</th>
<th>8</th>
</tr>
</table>
</body>
</html>
|
<html>
<head><title></title>
</head>
<body>
<table border="4" cellspacing="0" cellpadding="0" height="300" width="180">
<tr>
<th colspan="2" > 1-2</th>
</tr>
<tr>
<th rowspan="3" width="80">3-5-7</th>
<th>4</th>
</tr>
<tr>
<th>6</th>
</tr>
<tr>
<th>8</th>
</tr>
</table>
</body>
</html> |
Типы выравниваний таблиц:align(выравнивать)-тип выравнивания таблицы.Cуществует три параметра данного значения:- align="left"-выравнивание таблицы по левому краю(задается по умолчанию)
- align="right"выравнивание по правому краю
- align="center"-центрирование таблицы
Типы выравниваний содержимого таблиц:align-тип выравнивания содержимого таблиц по горизонтали.Данный параметр имеет три значения:
- align="left"-выравнивание содержимого ячейки по ее левому краю
- align="right"-выравнивание содержимого ячейки по ее правому краю
- align="center"-центрирование содержимого ячейки
valign-тип выравнивания содержимого таблиц по вертикали.Имеет четыре значения:- valign="middle"-выравнивание по середине ячейки(по умолчанию)
- valign="top"-выравнивание по верхнему краю ячейки
- valign="bottom"-выравнивание по нижнему краю ячейки
- valign="baseline"-вырвнивание по базовой линии
|
Фон ячеек
- bgcolor-задает цвет ячеек(<tr bgcolor="#2a3e21">)Данный параметр используется для тегов <tr>,<td> и <th>
- background-этот параметр указывает путь к изображению,которое будет служить фоном.Применяется в тегах <td> и <th>
|
<html >
<head ><title ></title >
</head >
<body >
<table cellspacing="0" cellpadding="0" border="2" width="200" height="200" >
<tr >
<td bgcolor="#6c6c00" >1</td >
<td bgcolor="#480048" >2</td >
<td bgcolor="#6c3800">3</td >
</tr >
<tr bgcolor="red" >
<th> 4</th >
<th>5</th >
<th >6</th >
</tr>
<tr >
<th bgcolor="#000080">7</th >
<th background="dog1.gif" >8</th >
<th bgcolor="#184800">9</th >
</tr >
</body >
</html > |
|
|
|---|
