Таблицы в html

Таблицы

Тег <table> ……</table> задаёт начало и конец таблицы.

<tr>…</tr> - строка таблицы
<td>…</td> - столбец таблицы

 

 

Вместе эти теги пишутся так:

<table>
<tr>
<td>ячейка</td>
</tr>
</table>

Это самая маленькая таблица, в ней всего одна строка, содержащая один столбец - ячейку

 

Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, используем атрибут border "рамка", который добавит нам наглядности.

border - задает толщину рамки в пикселях

 

<table border="1">

<tr>

<td>строка1 ячейка1</td>

<td>строка1 ячейка2</td>

<td>строка1 ячейка3</td>

</tr>

<tr>

<td>строка2 ячейка1</td>

<td>строка2 ячейка2</td>

<td>строка2 ячейка3</td>

</tr>

<tr>

<td>строка3 ячейка1</td>

<td>строка3 ячейка2</td>

<td>строка3 ячейка3</td>

</tr>

</table>

Тэг <table>может включать несколько атрибутов:

¨ align="left | center | right" – устанавливает расположение таблицы по отношению к полям документа. Допустимые значения: align=left (выравнивание влево), align=center (выравнивание по центру), align=right (выравнивание вправо).

¨ background="URL" – Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.

¨ bgcolor="цвет" – Устанавливает цвет фона таблицы.

¨ width="значение" – Задает ширину таблицы. Ее можно задать в пикселях (например, WIDTH=400) или в процентах от ширины страницы (например, WIDTH=80%). Если общая ширина содержимого превышает указанную ширину таблицы, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в таблице находятся изображения, параметр width будет проигнорирован, и новая ширина таблицы будет вычислена на основе ее содержимого.

 

 

¨ border="толщина" – устанавливает ширину внешней рамки таблицы и ячеек в пикселях (например, BORDER=4). Если атрибут не установлен, таблица показывается без рамки.

¨ bordercolor="цвет" – Устанавливает цвет рамки таблицы.

¨ cellspacing="значение" – устанавливает расстояние между рамками ячеек таблицы в пикселях (например, CELLSPACING=2).

¨ cellpadding="значение" – устанавливает расстояние между рамкой ячейки и текстом в пикселях (например, CELLPADDING=10).

 

¨ cols="число" – задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано.

¨ rules="значение" – Сообщает браузеру, где отображать границы между ячейками. Толщина границы и ее цвет указывается с помощью параметров border и bordercolor. По умолчанию рамка рисуется вокруг каждой ячейки, образуя тем самым сетку.

 

 

Допустимые значения:

all – Линия рисуется вокруг каждой ячейки таблицы;

cols – Линия отображается между колонками;

none – Все границы скрываются;

rows – Граница рисуется между строками таблицы, созданных через тег <TR>.

 

Задание строк таблицы

 

Тег <TR> служит контейнером для создания строки таблицы. Общая структура:

<table>

<tr>…..</tr>

<tr>…..</tr>

…

</table>

 

 

Атрибуты тега:

¨ bgcolor="цвет" – Устанавливает цвет фона строки таблицы;

 

¨ bordercolor="цвет" – Устанавливает цвет рамки вокруг строки. Рамка показывается, когда установлен параметр border с ненулевым значением у тега <TABLE>.

 

¨ align="left | center | right | justify" – Задает выравнивание содержимого ячеек строки по горизонтали. Выравнивание осуществляется для всех ячеек в пределах одной строки.

¨ valign="top | middle | bottom | baseline" – Устанавливает вертикальное выравнивание содержимого ячеек в строке. По умолчанию содержимое ячейки располагается по ее вертикали в центре – middle.

 

Допустимые значения:

 

top – Выравнивание содержимого ячеек по верхнему краю строки.

middle – Выравнивание по середине.

bottom – Выравнивание по нижнему краю.

 

 

Задание ячеек таблицы

Тег <TD> – предназначен для создания одной ячейки таблицы. Должен размещаться внутри контейнера <TR>.

<table>

<tr>

<td>ячейка 1, 1-строки </td>

…..

<td> ячейка n, 1-строки </td>

</tr>

<tr>

<td>ячейка 1,2-строки </td>

…..

<td> ячейка n, 2-строки </td>

</tr>

…

</table>

Атрибуты тега:

¨ align="left | center | right | justify" – Задает выравнивание содержимого ячейки по горизонтали.

¨ valign="top | middle | bottom | baseline" – Устанавливает вертикальное выравнивание содержимого ячейки.

¨ background="URL" – Определяет изображение, которое будет использоваться в качестве фонового рисунка таблицы.

¨ bgcolor="цвет" – Устанавливает цвет фона ячейки.

¨ bordercolor="цвет" – Устанавливает цвет рамки вокруг ячейки.

¨ colspan="число" – Устанавливает число ячеек, которые должны быть объединены по горизонтали.

¨ rowspan="число" – Устанавливает число ячеек, которые должны быть объединены по вертикали.

¨ height="значение" – Браузер сам устанавливает высоту таблицы и ее ячеек исходя из их содержимого. Однако при использовании параметра height высота ячеек будет изменена. Здесь возможны два варианта. Если значение height меньше, чем содержимое ячейки, то этот параметр будет проигнорирован.

В случае, когда установлена высота ячейки, превышающая ее содержимое, добавляется пустое пространство по вертикали

¨ width="значение" – Задает ширину ячейки. Если общая ширина содержимого превышает указанную ширину ячейки, то браузер будет пытаться «втиснуться» в заданные размеры за счет форматирования текста. В случае, когда это невозможно, например, в ячейке находятся изображения, параметр width будет проигнорирован, и новая ширина ячейки будет вычислена на основе ее содержимого.

 

Заголовки столбцов таблицы - тег <ТН>

 

теги подобны <ТD></ТD>. Отличие состоит в том, что текст, заключенный между тегами <ТН></ТН>, автоматически записывается жирным шрифтом и по умолчанию располагается посередине ячейки.

 

Тег <CAPTION> позволяет создавать заголовки таблицы.

либо под таблицей (<САРТION ALIGN=bottom>).   Заголовок может состоять из любого текста и изображений.

Размеры таблицы.

Пример: <center> <table border="1" width="640" height="480"> <tr> <td…