• доступно о веб-разработке
04.11.2012 HTML, Технологии

Таблицы / Неделя HTML

Вот и подходит к концу неделя HTML. Конечно, не последняя. И на её исходе мы обратимся к одному важному элементу передачи информации — таблицам. Таблица дополняет простой текст возможностью структурировать и сопоставить информацию. Для этого она и предназначена, но раньше, когда науке были неизвестны джедайские методы div-ной верстки, многие целые страницы верстали таблицами.

Сейчас, конечно, это моветон, атавизм и анахронизм.

Таблицы применяются только по прямому назначению.

Как выглядит код таблицы?

Обозначается сама таблица, как вы могли догадаться, созвучным тегом <table>.

<table>
…
</table>

Внутри таблицы — столбцы <tr> и их ячейки <td>.

<table>
<tr><td>Текст ячейки 1</td><td>Текст ячейки 2</td></tr>
<tr><td>Текст ячейки 3</td><td>Текст ячейки 4</td></tr>
</table>
Текст ячейки 1 Текст ячейки 2
Текст ячейки 3 Текст ячейки 4

Тег <table> имеет специальные параметры, которые могут задавать расстояние между ячейками и отступ в них, а также толщину бордюра (хотя последний удобнее задавать через CSS).

<table cellpadding="5" cellspacing="5" border="2">
<tr><td>Текст ячейки 1</td><td>Текст ячейки 2</td></tr>
<tr><td>Текст ячейки 3</td><td>Текст ячейки 4</td></tr>
</table>
Текст ячейки 1 Текст ячейки 2
Текст ячейки 3 Текст ячейки 4

Ячейки можно объединять, используя для них параметры colspan и rowspan.

<table cellpadding="5" cellspacing="5" border="2">
<tr><td colspan="2">Текст ячейки 1 </td></tr>
<tr><td>Текст ячейки 3</td><td>Текст ячейки 4</td></tr>
</table>
Текст ячейки 1
Текст ячейки 3 Текст ячейки 4
<table cellpadding="5" cellspacing="5" border="2">
<tr><td>Текст ячейки 1</td><td>Текст ячейки 2</td></tr>
<td>Текст ячейки 4</td></tr>
</table>
Текст ячейки 1 Текст ячейки 2
Текст ячейки 4

У таблицы может быть три части — заголовок (где вписываются названия столбцов), тело таблицы(обязательная часть) и подвал.
Выглядит при использовании всех этих элементов таблица следующим образом:

<table>
<thead>
 <tr><th>№</th><th>Поле 1</th><th>Поле 2</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>5</td><td>10</td></tr>
<tr><td>2</td><td>5</td><td>10</td></tr>
</tbody>
<tfoot>
<tr><td>Сумма</td><td>10</td><td>20</td></tr>
</tfoot>
</table>
Поле 1 Поле 2
1 5 10
2 5 10
Сумма 10 20

Можно выравнивать содержимое ячеек при помощи параметров align и valign (по вертикали):

<table width="100%">
<tbody>
 <tr><td align="center" valign="center">Центр</td></tr>
</tbody>
</table>
Центр

Плюс к тому таблицам можно задавать CSS-стили, в результате чего они могут выглядеть красиво и оригинально.

Можете посмотреть, какие таблицы предлагает популярный ныне CSS-фреймворк (библиотека) Twitter Bootstrap:
http://twitter.github.com/bootstrap/base-css.html#tables

Вот, в принципе, и все, что я хотел рассказать о таблицах.
Если у кого-нибудь есть что добавить — пишите в комментариях.

Следующая неделя будет посвящена PHP.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Нас 1000 человек!

Уважаемые участники проекта ДвижКод, дорогие друзья! Прошло немногим более месяца, а нас уже больше 1000 человек! О чем это говорит?...

Закрыть