HTML: различия между версиями
Содержимое удалено Содержимое добавлено
Строка 448:
===Таблицы===
Таблицы удобно задавать с помощью HTML, так как в HTML можно делать вложенные элементы. Таблица также состоит из вложенных элементов. Таблица (<nowiki> <table> </nowiki>) состоит из строк (<nowiki> <tr> </nowiki> - table row), каждый из которых также состоит из ячеек (<nowiki> <td> </nowiki> - table data). А внутри ячейки может быть уже все что угодно. Даже еще одна таблица. Выглядит это так:
{|Border=1
|-
| Строка 1 Столбец 1 || Строка 1 Столбец 2 || Строка 1 столбец 3
|-
| Строка 2 Столбец 1 || Строка 2 Столбец 2 || Строка 2 Столбец 3
|-
| Строка 3 Столбец 1 || Строка 3 Столбец 2 || Строка 3 столбец 3
|}
<source lang="html4strict">
<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>
</source>
По умолчанию таблицы отображаются без границ:). То есть границы невидимы. Это иногда полезно, но иногда мы хотим чтобы границы были видны. Для этого задают значение атрибута <code>border</code>. Он задает толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображается.
Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <nowiki><td></nowiki> пишут <nowiki><th></nowiki>. Выглядит это так:
{|Border=1
|-
!!!Столбец 1!!Столбец 2
|-
!Строка 1
| Строка 1 Столбец 1
| Строка 1 Столбец 2
|-
! Строка 2
| Строка 2 Столбец 1
| Строка 2 Столбец 2
|}
А пишется вот так:
<source lang="html4strict">
<table border="1">
<tr><td></td> <th> Столбец 1 </th> <th> Столбец 2 </th> </tr>
<tr> <th> Строка 1 </th> <td> Строка 1 Столбец 1 </td> <td> Строка 1 Столбец 2 </td> </tr>
<tr> <th> Строка 2 </th> <td> Строка 2 Столбец 1 </td> <td> Строка 2 Столбец 2 </td> </tr>
</table>
</source>
Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <nowiki> <b> </nowiki> или <nowiki> <strong> </nowiki>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.
Некоторые браузеры не отображают пустые ячейки (т.е. не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер, и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска:) (Non Breakable SPace). Назвали его несокрушимым, того, что слова разделены таким пропуском переносятся на следующую строку только вместе.
Ячейки таблицы можно объединять. Делается это с помощью атрибутов colspan и rowspan тегу <nowiki> <td> </nowiki>. colspan указывает на сколько колонок будет пролегать данная ячейка, а rowspan на сколько строк. Такой код:
<source lang="html4strict">
<table border="1">
<tr><td colspan="2"> Строка 1 Столбец 1 Простягяеться на два вправо </td> <td> Строка 1 Столбец 3 </td> </tr>
<tr><td> Строка 2 Столбец 1</td> <td rowspan="3"> Строка 2 Столбец 2 простягяеться на 2 вниз </td> <td> Строка 2 Столбец 3 </td> </tr>
<tr><td> Строка 3 Столбец 1 </td><td> Строка 3 Столбец 3 </td> </tr>
</table>
</source>
Дает такой результат:
<table border="1">
<tr><td colspan="2"> Строка 1 Столбец 1 Простягяеться на два вправо </td><td> Строка 1 Столбец 3 </td> </tr>
<tr><td>Строка 2 Столбец 1</td><td rowspan="3"> Строка 2 Столбец 2 простягяеться на 2 вниз</td><td> Строка 2 Столбец 3 </td></tr>
<tr><td> Строка 3 Столбец 1</td><td>Строка 3 Столбец 3</td></tr>
</table>
Кроме строк таблица может иметь заголовок. Тег <nowiki><caption></nowiki> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причем сразу после открывающего тега. Такой заголовок представляет собой текст по умолчанию отображен перед таблицей и описывающий ее. <br>
Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <nowiki><thead></nowiki>, основную часть <nowiki><tbody></nowiki> и итог <nowiki><tfoot></nowiki>.
==Ссылки==
| |||