Лабораторная работа №4

Таблицы.

1. Таблицы

Таблицы используются, когда вам необходимо показать "табличные данные", например, информацию, логически упорядоченную в столбцы и ряды.

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

Пример 1:

<table>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3	Cell 4

Как видно из приведённого примера, то это, возможно, самый сложный из примеров HTML, которые мы рассматривали до сих пор. Сделаем следующие пояснения:

Для вставки таблиц используются 3 базовых тэга:

• <table> - начало и конец таблицы.

• <tr> - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек.

• <td> - сокращение от "table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы.

В Примере 1 таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>Cell 1</td> и <td>Cell 2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>.

Ряды это горизонтальные строки ячеек, а столбцы - вертикальные столбцы ячеек:

Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.

В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

Пример 2:

<table>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

<tr>

<td>Cell 5</td>

<td>Cell 6</td>

<td>Cell 7</td>

<td>Cell 8</td>

</tr>

<tr>

<td>Cell 9</td>

<td>Cell 10</td>

<td>Cell 11</td>

<td>Cell 12</td>

</tr>

</table>

будет выглядеть в браузере:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

Ещё атрибуты.

Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

Пример 3:

<table border="1">

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

<tr>

<td>Cell 3</td>

<td>Cell 4</td>

</tr>

</table>

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3	Cell 4

Толщина рамки специфицируется в пикселях.

Как и с изображениями, вы можете указывать размер таблицы в пикселях или в процентах от размера экрана:

Пример 4:

<table border="1" width="30%">

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

У таблиц есть много атрибутов. Вот ещё два:

• align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, center или right.

• valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

Пример 5:

<td align="right" valign="top">Cell 1</td>

Что можно вставлять в таблицы?

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

Несколько лет назад Internet - таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более эффективный способ - CSS. Но об этом позже.

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