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>

Задания[править]

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

Дополнительные задания[править]

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


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

Смотри также[править]