dzekson - урок 10 таблицы

html - таблицы

Одним из самых применяемых в html средств являются таблицы .

Создание таблицы может показаться вам поначалу трудным , но по ходу изучения создания таблиц html вы поймете , что это не так уж и трудно и страшно .

Элемент таблицы состоит из трех различных тегов html :

1. <table> - определяет таблицу

2. <tr> - определяет строку в таблице

3. <td> - определяет стандартную клетку в таблице

html - код таблицы :

<table border="1">
<tr>
<td>Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
</tr>
<tr>
<td>Строка 2 Ячейка 1</td>
<td>Строка 2 Ячейка 2</td>
</tr>
</table>

результат :

Строка 1 Ячейка 1	Строка 1 Ячейка 2
Строка 2 Ячейка 1	Строка 2 Ячейка 2

Содержание элементов , таких как списки html , изображения и даже элементы других таблиц могут быть помещены внутри каждой ячейки таблицы .

html - код таблицы :

<table border="1">
<tr>
<td width="50%">
<ul>
<li>Элемент Списка 1</li>
<li>Элемент Списка 2</li>
<li>Элемент Списка 3</li>
</ul>
</td>
<td>
<ul>
<li>Элемент Списка 4</li>
<li>Элемент Списка 5</li>
<li>Элемент Списка 6</li>
</ul>
</td>
</tr>
<tr>
<td>
<p>Во избежание потери дискеты с важной школь...</p>
</td>
<td>
<a href="http://dzekson.ucoz.ru/" target="_blank" rel="nofollow">
<img src="http://dzekson.ucoz.ru/37.jpg" class="linksESPN" />
</a>
</td>
</tr>
</table>

результат :

Элемент Списка 1 Элемент Списка 2 Элемент Списка 3	Элемент Списка 4 Элемент Списка 5 Элемент Списка 6
Во избежание потери дискеты с важной школь...

Таблица может содержать в себе бесконечное число строк .

Каждая строка таблицы это по сути таблица в таблице .

Таблица может содержать бесконечное число табличных данных в ячейках ( <td> <tr> ).

Строки и столбцы являются своеобразными контейнерами (домами) других элементов таких , как текст , ссылки , изображения , списки , что мы и видели в примере выше . Ниже мы приведем пример использования цвета фона таблицы , например для того , чтобы отличать разные элементы таблицы .

код таблицы :

<table border="1">
<tr title="Вы смотрите на Строку 1" bgcolor="c0c0c0">
<td>Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
</tr>
<tr title="Вы смотрите на Строку 2" bgcolor="aqua">
<td>Строка 2 Ячейка 1</td>
<td>Строка 2 Ячейка 2</td>
</tr>
</table>

результат :

Строка 1 Ячейка 1	Строка 1 Ячейка 2
Строка 2 Ячейка 1	Строка 2 Ячейка 2

html - таблицы : охват многократных рядов и клеток

Используйте rowspan , чтобы охватить несколько рядов , сливающий вместе строки таблицы и colspan , чтобы охватить несколько колонок .

html - таблица , атрибуты - rowspan и colspan :

<table border="1">
<tr>
<td><b>Столбец 1</b></td>
<td><b>Столбец 2</b></td>
<td><b>Столбец 3</b></td>
</tr>
<tr>
<td rowspan="2">Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
<td>Строка 1 Ячейка 3</td>
</tr>
<tr>
<td>Row 2 Ячейка 2</td>
<td>Row 2 Ячейка 3</td>
</tr>
<tr>
<td colspan="3">Строка 3 Ячейка 1</td>
</tr>
</table>

результат :

Столбец 1	Столбец 2	Столбец 3
Строка 1 Ячейка 1	Строка 1 Ячейка 2	Строка 1 Ячейка 3
Строка 1 Ячейка 1	Строка 2 Ячейка 2	Строка 2 Ячейка 3
Строка 3 Ячейка 1

Клетки , поля и интервалы

атрибут - cellspadding определяет какое расстояние будет между ячейками ,расстояние между содержанием ячейки до ее границы

(ширину ячейки , ширину границы) .

атрибут - cellspacing определяет какое расстояние будет заданно между внешними границами ячеек .

таблица с применением атрибутов cellspading и cellspacing :

<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<td><b>Столбец 1</b></td>
<td><b>Столбец 2</b></td>
</tr>
<tr>
<td>Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
</tr>
<tr>
<td>Строка 2 Ячейка 1</td>
<td>Row 2 Ячейка 2</td>
</tr>
</table>

результат :

Столбец 1	Столбец 2
Строка 1 Ячейка 1	Строка 1 Ячейка 2
Строка 2 Ячейка 1	Строка 2 Ячейка 2

Ниже мы кое что уберем из нашего кода таблицы , а точнее атрибут - cellspacing .

Это должно наглядно продемонстрировать разницу между cellspacing и cellspadding .

код таблицы без атрибута-cellspacing :

<table border="1" cellpadding="10" bgcolor="rgb(0,255,0)">
<tr>
<td><b>Столбец 1</b></td>
<td><b>Столбец 2</b></td>
</tr>
<tr>
<td>Строка 1 Ячейка 1</td>
<td>Строка 1 Ячейка 2</td>
</tr>
<tr>
<td>Строка 2 Ячейка 1</td>
<td>Row 2 Ячейка 2</td>
</tr>
</table>

результат :

Столбец 1	Столбец 2
Строка 1 Ячейка 1	Строка 1 Ячейка 2
Строка 2 Ячейка 1	Строка 2 Ячейка 2

Значение , заданное для отступов и интервалов интерпретируется браузером как значение установленное в пикселях .

Так что значение 10 подразумевает под собой 10 пикселей в ширину .

Большинство html - атрибутов ,которые используют числовые значения представляют собой значения в пикселях .