Как добавить таблицу на сайт

Здравствуйте! В этой статье рассмотрим как добавить таблицу на сайт. На заре веба где то в годах 90-х 20 столетия таблицы использовались для верстки сайтов. Надо сказать, что тогда сайты были еще не настолько переполнены различными элементами и были внешне простыми. Поэтому тогда казалось что нет ничего более простого чем верстка сайтов на основе таблиц.

Но прошли годы и веяния в дизайне сайтов сильно изменились и таблицы уже в качестве верстки страниц сайта уже давно не применяются, а используются по своему прямому назначению то есть для отображения различных данных.

Как создать таблицу

Таблица может состоять из строк и столбцов на пересечении которых есть ячейки, содержащие текст, рисунки, видео и другие данные. Как правило таблицы применяются для упорядочения данных и вывода различной информации.

Для того чтобы добавить таблицу на сайт есть специальный тег <table>. Этот элемент является как бы родительским контейнером для других элементов.

Любая таблица состоит из строк и столбцов за выод строк отвечает элемент <tr> а за столбцы <td>.

В таблице должна быть хотя бы одна ячейка. Для шапки таблицы как правило вместо <td> используют <th> это для того чтобы текст был выровнен по центру и был жирного начертания.

Таблица создание

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег TABLE</title>
 </head>
 <body>
  <table border="1" width="100%" cellpadding="5">
   <tr>
    <th>Ячейка 1</th>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3</td>
    <td>Ячейка 4</td>
  </tr>
 </table>
 </body>
</html>

Просмотреть пример

Атрибуты <table>

Давайте рассмотрим атрибуты тега <table>.

align

применяется для выравнивания содержимого таблицы имеет следующие значения:

left — выравнивает по левому краю
right — выравнивает по правому краю
center — выравнивает по центру
justify — выравнивает по ширине

bgcolor

задает цвет фона таблицы

border

устанавливает рамку в таблице значение задается в пикселах.

cellpadding

позволяет задать внутренние отступы в ячейках таблицы, если не указывать то текст будет прилипать к краям таблицы.

cellspacing

Задает расстояние между внешними границами ячеек. Если установлен атрибут border, толщина границы принимается в расчет и входит в общее значение.

cols

Данный атрибут указывает количество столбцов в таблице.

width

Позволяет задать ширину таблицы. Если не указывать то ширина таблицы задается по содержимому.

Атрибуты тега <td>

align

Позволяет задать выравнивание ячейки по горизонтали. Принимает значения: left —- выравнивает по левому краю, center — по центру и right — по правому краю.

bgcolor

Задает цвет фона ячейки.

colspan

Позволяет объединить ячейки по горизонтали. В этом атрибуте надо указать количество ячеек для объединения и при этом удалить на одну ячейку меньше чем вы объединяете. Например объединяете три ячейки, тогда 2 ячейки удалите.

height

Данный атрибут задает высоту ячейки. Зачастую высоту ячейки можно не указывать браузер сам вычисляет высоту по содержимому.

rowspan

Позволяет объединять ячейки по вертикали при этом надо указать число объединяемых ячеек.

valign

Устанавливает вертикальное выравнивание в ячейке. По умолчанию содержимое ячейки располагается по ее вертикали в центре. Принимает такие значения: top — выравнивание по верхнему краю строки, middle — выравнивание по середине, bottom — выравнивание по нижнему краю, baseline — выравнивание по базовой линии.

width

Позволяет задать ширину ячейки таблицы.

Выравнивание таблиц

Для того чтобы выравнивать таблицу используется атрибут align тега table. Причем результат будет заметен только в том случае если таблица не занимает всей ширины страницы.

Выравнивание таблицы по правому краю

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выравнивание таблицы</title>
 </head>
 <body>
  <table width="200" bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" align="right">
   <tr><td>Содержимое таблицы</td></tr>
  </table>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh 
     euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.</p>
 </body>
</html>

Просмотреть пример

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

Для того чтобы объединить две и более ячеек в одну используются атрибуты colspan и rowspan тега <td>. Атрибут colspan устанавливает число ячеек объединяемых по горизонтали. Аналогично работает и атрибут rowspan, с тем лишь отличием, что объединяет ячейки по вертикали. Перед добавлением атрибутов проверьте число ячеек в каждой строке, чтобы не возникло ошибок. Так, <td colspan=»3″> заменяет три ячейки, поэтому в следующей строке должно быть три тега <td> или конструкция вида <td colspan=»2″>…</td><td>…</td>. Если число ячеек в каждой строке не будет совпадать, появятся пустые фантомные ячейки. В примере 12.3 приведен хотя и валидный, но неверный код, в котором как раз проявляется подобная ошибка.

Неверное объединение ячеек

<!DOCTYPE HTML">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Неправильное использование colspan</title>
 </head>
 <body>
   <table border="1" cellpadding="5" width="100%">
    <tr>
     <td colspan="2">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>
    <tr>
     <td>Ячейка 3</td>
     <td>Ячейка 4</td>
    </tr>
   </table>
 </body>
</html>

Просмотреть пример

В первой строке примера задано три ячейки, две из них объединены с помощью атрибута colspan, а во второй строке добавлено только две ячейки. Из-за этого возникает дополнительная ячейка, которая отображается в браузере.

Объединение ячеек по вертикали и горизонтали

<!DOCTYPE HTML">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Объединение ячеек</title>
 </head>
 <body>
  <table border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td rowspan="2">Браузер</td>
    <th colspan="2">Internet  Explorer</th>
    <th colspan="3">Opera</th>
    <th colspan="2">Firefox</th>
   </tr>
   <tr>
    <th>6.0</th><th>7.0</th><th>7.0</th><th>8.0</th><th>9.0</th><th>1.0</th><th>2.0</th>
   </tr>
   <tr align="center">
    <td>Поддерживается</td>
    <td>Нет</td><td>Да</td><td>Нет</td><td>Да</td><td>Да</td><td>Да</td><td>Да</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть пример

В данной таблице установлено восемь колонок и три строки. Часть ячеек с надписями «Internet Explorer» , «Opera» и «Firefox» объединены где по две, а где и по три ячейки. В ячейке с надписью «Браузер» применено объединение по вертикали.

По умолчанию таблица формируется в виде сетки, при этом в каждой строке таблицы содержится одинаковое количество ячеек. Такой вариант вполне подходит для формирования простых таблиц, но совершенно не годится для тех случаев, когда предстоит сделать сложную таблицу. В подобных ситуациях применяются два основных метода: объединение ячеек и вложенные таблицы.

Вложенные таблицы

Объединение ячеек имеет некоторые недостатки, поэтому этот метод создания таблиц нельзя использовать повсеместно.

Явно заданная высота ячейки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>Объединение ячеек</title>
 </head>
 <body>
  <table width="100%" border="1" cellpadding="4" cellspacing="0">
   <tr>
    <td width="100" valign="top">Duis te feugifacilisi. Duis autem dolor in hendrerit 
         in vulputate velit esse molestie consequat.</td>
    <td rowspan="2" valign="top">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing  elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam  erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution  ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat. Duis te  feugifacilisi. Ut wisi enim ad minim veniam, quis 
         nostrud exerci taion  ullamcorper suscipit lobortis nisl ut aliquip ex 
         en commodo consequat.</td>
   </tr>
   <tr>
    <td height="40">Lorem ipsum</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть пример

Левая нижняя ячейка согласно коду HTML имеет высоту 40 пикселов, но поскольку высота содержимого правой колонки больше, чем содержимое левой колонки, то высота ячейки меняется. Получается, что атрибут height в данном случае игнорируется. Заметим, что данная особенность проявляется только в браузере Opera, но и другие браузеры могут отображать сложные таблицы с ошибками. Это часто выражается в тех таблицах, где явно устанавливается высота ячеек и их объединение по вертикали. Для упрощения верстки применяется прием с вложенными таблицами.

Суть идеи проста — в ячейку вкладывается еще одна таблица со своими параметрами. Поскольку эти таблицы в каком-то смысле независимы, то можно создавать довольно причудливые конструкции. Чтобы вложенная таблица занимала всю ширину ячейки, таблице надо задать ширину 100%.

Вложенные таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Вложенные таблицы</title>
 </head>
 <body>
  <table width="100%" border="0" cellpadding="5" cellspacing="0">
   <tr>
    <td width="150" valign="top" bgcolor="#f0f0f0">
     <table width="100%" cellpadding="2" cellspacing="1">
      <tr><td bgcolor="#ffffff">Lorem</td></tr>
      <tr><td bgcolor="#ffffff">Ipsum</td></tr>
      <tr><td bgcolor="#ffffff">Dolor</td></tr>
      <tr><td bgcolor="#ffffff">Sit</td></tr>
      <tr><td bgcolor="#ffffff">Amet</td></tr>
     </table>
    </td>
    <td valign="top" bgcolor="#ffffee">Lorem ipsum dolor sit amet, consectetuer 
         adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet 
         dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis 
         nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea 
         commodo consequat.</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть пример

В данном макете с помощью таблицы создается две колонки, причем левая колонка имеет фиксированную ширину 150 пикселов. Чтобы создать подобие навигации, внутрь ячейки добавлена еще одна таблица с шириной 100%.

Заголовок таблицы

При большом количестве таблиц на странице каждой из них удобно задать заголовок, содержащий название таблицы и ее описание. Для этой цели в HTML существует специальный тег <caption>, который устанавливает текст и его положение относительно таблицы. Проще всего размещать текст по центру таблицы сверху или снизу от нее, в остальных случаях браузеры по разному интерпретируют атрибуты тега <caption>, из-за чего результат получается неодинаковый. По умолчанию заголовок помещается сверху таблицы по центру, его ширина не превышает ширины таблицы и в случае длинного текста он автоматически переносится на новую строку. Для изменения положения заголовка у тега <caption> существует атрибут align, который может принимать следующие значения.

left — выравнивает заголовок по левому краю таблицы. Браузер Firefox располагает текст сбоку от таблицы, Internet Explorer и Opera располагают заголовок сверху, выравнивая его по левому краю.
right — в браузере Internet Explorer и Opera располагает заголовок сверху таблицы и выравнивает его по правому краю таблицы. Firefox отображает заголовок справа от таблицы.
center — заголовок располагается сверху таблицы по ее центру. Такое расположение задано в браузерах по умолчанию.
top — результат аналогичен действию атрибута center, но в отличие от него входит в спецификацию HTML 4 и понимается всеми браузерами.
bottom — заголовок размещается внизу таблицы по ее центру.

Создание заголовка таблицы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Заголовок таблицы</title>
 </head>
 <body>
  <table width="100%" border="1" cellpadding="4" cellspacing="0">
   <caption>Изменение добычи ресурсов по годам</caption>
   <tr>
    <th>&nbsp;</th><th>2003</th><th>2004</th><th>2005</th>
   </tr>
   <tr>
    <td>Нефть</td><td>43</td><td>51</td><td>79</td>
   </tr>
   <tr>
    <td>Золото</td><td>29</td><td>34</td><td>48</td>
   </tr>
   <tr>
    <td>Дерево</td><td>38</td><td>57</td><td>36</td>
   </tr>
  </table>
 </body>
</html>

Просмотреть пример

Смотрите видеоурок по созданию таблиц