Урок 10: Таблицы Таблицы используются, когда вам необходимо показать "табличные
данные", например, информацию, логически упорядоченную в столбцы и
ряды.
Это трудно?
Построение таблиц в HTML может показаться сложным на первый взгляд, но, если
вы не будете дёргаться, это окажется строго логичным - как и всё в HTML.
Пример 1:
Code
<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
Какая разница между <tr> и <td>?
Как видно из приведённого примера, это, возможно, самый сложный из примеров 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 3 Cell 4
Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.
В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в
таблице может быть неограниченное число рядов и столбцов.
Пример 2:
Code
<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:
Code
<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:
Code
<table border="1" width="30%">
Этот пример будет отображён в браузере как таблица шириной в 30% экрана.
Проверьте сами.
Ещё атрибуты?
У таблиц есть много атрибутов. Вот ещё два:
- align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в
ряду или в отдельной ячейке.
Например, left, center или right.
- valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle
или bottom.
Пример 5:
Code
<td align="right" valign="top">Cell 1</td>
Что можно вставлять в таблицы?
Теоретически - всё: текст, ссылки и изображения... НО таблицы
предназначаются для вывода табличных данных (т. е. данных, которые
изначально представляются в виде столбцов и рядов), поэтому избегайте вставки
данных в таблицы только потому, что вы хотите разместить их рядом друг с другом.
В добрые старые времена Internet - т. е. несколько лет назад - таблицы часто
использовались для распределения содержимого на странице. Однако сегодня для
этого есть более крутой способ - CSS. Но об этом позже.
Теперь примените ваши знания на практике и создайте несколько таблиц
различных размеров, с разными атрибутами и содержимым. Это займёт у вас
несколько минут(часов).
