HTML/Таблицы

Теги, необходимые для создания таблиц

Таблицы в HTML относительно легко создаются и редактируются. Для этого используются теги:

<table> … </table> — объявляет таблицу.
<caption> … </caption> — объявляет заголовок таблицы, он не входит в саму таблицу (располагается сверху от неё), но его следут размещать внутрь контейнера <table>.
<thead> … </thead> — объявляет «шапку» (верхнюю часть) таблицы.
<tbody> … </tbody> — объявляет «тело» (основное содержимое) таблицы.
<tfoot> … </tfoot> — объявляет «подвал» (нижнюю часть) таблицы.
<tr> … </tr> — объявляет строку таблицы.
<td> … </td> — объявление ячейки.
<th> … </th> — ячейка заголовка таблицы

Объединение ячеек

Вертикальное:

 <tr><td rowspan="3">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><tr>
 <tr><td>&nbsp;</td><td>&nbsp;</td><tr>
 <tr><td>&nbsp;</td><td>&nbsp;</td><tr>

Горизонтальное:

 <tr><td>&nbsp;</td><td colspan="2">&nbsp;</td><tr>
 <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><tr>

Оформление

 <table cellspacing="0" cellpadding="2" border="1">

Пример таблицы

<!DOCTYPE html>
<html>
   <head>
      <title>
         Очень важная таблица
      </title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
      <table>
         <caption>
            Lorem ipsum... 
         </caption>
         <thead>
            <tr>
               <th>
                  Lorem
               </th>
               <th>
                  Ipsum
               </th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>
                  Muspi
               </td>
               <td>
                  Merol
               </td>
            </tr>
         </tbody>
         <tfoot>
            <tr>
               <td colspan="2">
                  А &copy; нету! 
               </td>
            </tr>
         </tfoot>
   </body>
</html>

Задания

Создайте новую страницу и разметку в ней с помощью таблицы. Разметка должна включать блоки: шапку сайта, область контента, блок меню, подпись к сайту, для этих целей желательно использовать теги <thead>, <tbody> и <tfoot>.

Дополнительные задания

Убедитесь в валидности Вашего сайта и при желании разместите в «подвалу» соответствующий значок.

Курс HTML

Предыдущий урок: HTML/Списки — Следующий урок: HTML/Фрэймы

Смотри также

b:en:HyperText Markup Language/Tables