Таблицы в HTML

Разметка таблиц в HTML — подмножество языка оформления документов HTML, предназначенное для рисования таблиц.

Пример простой таблицы

Пример таблицы в браузере

<table border="1">
  <caption> Пример таблицы </caption>
  <tr>
    <th> Заголовок 1 </th>
    <th> Заголовок 2 </th>
  </tr>
  <tr>
    <td> Ячейка 1 </td>
    <td> Ячейка 2 </td>
  </tr>
  <tr>
    <td> Ячейка 3 </td>
    <td> Ячейка 4 </td>
  </tr>
</table>

Этот пример правильно отрабатывает движок MediaWiki (хотя в викидвижке есть и свой способ отрисовки таблиц), а также LiveJournal.

Здесь:

• <table> — тег, который открывает и завершает (</table>) описание таблицы.
• border="1" — параметр, который включает отображение рамки (если этого параметра нет, и не назначен стиль CSS, то рамка у таблицы не отображается).
• <caption> — описывает заголовок таблицы (необязателен).
• <tr> — описывает строку (row) таблицы, внутри которой находятся ячейки (<th> и <td>).
• <th> — описывает ячейку-заголовок таблицы. По умолчанию такие ячейки выделяются жирным шрифтом и центровкой. http://www.htmlbook.ru/html/th.html
• <td> — описывает значение ячейки таблицы.

Пример таблицы с параметрами и стилями

Пример таблицы со стилями CSS.

<table border="1" cellpadding="5" 
style="border-collapse: collapse; border: 1px solid black;"> 
  <caption align="bottom"> Пример таблицы </caption>
  <tr style="background-color: silver">
    <th> Заголовок 1 </th>
    <th> Заголовок 2 </th>
  </tr>
  <tr>
    <td> Ячейка 1 </td>
    <td> Ячейка 2 </td>
  </tr>
  <tr>
    <td> Ячейка 3 </td>
    <td> Ячейка 4 </td>
  </tr>
</table>

В этом примере:

• border="1" — установка толщины рамки.
• cellpadding="5" — отступы от рамки до текста внутри таблицы.
• border-collapse: collapse; — стиль CSS, который убирает задвоенность рамки.
• border: 1px solid black; — стиль рамки. Разные браузеры по-разному воспринимают: отрисовывают указанным стилем либо внешнюю границу, либо и внутренние перемычки тоже.
• background-color: silver; — цвет фона у группы ячеек назначен светло-серым (см. Цвета в HTML). Для этой же цели можно использовать атрибут HTML bgcolor.
• align="bottom" — перемещение заголовка таблицы вниз (стиль "caption-side: bottom" не отрабатывает в IE).

Пример правильно отрабатывает в MediaWiki и в LiveJournal. При помощи других элементов описания стилей можно задать стили сразу для всех таблиц HTML в документе (тег <style>), сразу для всех или группы документов сайта (тег <link>), либо только для некоторых таблиц, указав для них имя класса (атрибут class).

Использование уже готового класса

Результат применения стиля wikitable к таблице

В CSS движка MediaWiki прописан начиная с версии r48842 готовый стиль для таблиц. Его можно использовать следующим образом:

<table class="wikitable">
  <caption> Пример таблицы </caption>
  <tr>
    <th> Заголовок 1 </th>
    <th> Заголовок 2 </th>
  </tr>
  <tr>
    <td> Ячейка 1 </td>
    <td> Ячейка 2 </td>
  </tr>
  <tr>
    <td> Ячейка 3 </td>
    <td> Ячейка 4 </td>
  </tr>
</table>

Назначение внешнего вида рамки

За это отвечают атрибуты HTML:

• border
• bordercolor
• cellspacing
• frame
• rules

Атрибуты CSS:

• border-color
• border
• border-collapse
• border-width
• border-style

Цвет фона у ячеек

Назначить нужный цвет фона у ячеек и всей таблицы можно при помощи атрибута bgcolor или стиля background-color CSS.

<table cellpadding="5" cellspacing="8" bgcolor="silver">
  <tr>
    <td bgcolor="red"> Ячейка 1 </td>
    <td bgcolor="green"> Ячейка 2 </td>
  </tr>
 
  <tr bgcolor="blue">
    <td> Ячейка 3 </td>
    <td bgcolor="yellow"> Ячейка 4 </td>
  </tr>
</table>

В этом примере таблице назначен серый цвет (он перекрывается цветом ячеек там где они есть), а цвет, назначенный ячейке td, перекрывает цвет, назначенный строке (tr).

Вместо атрибута bgcolor можно с тем же результатом использовать стиль CSS background-color:

<table cellpadding="5" cellspacing="8" style="background-color: silver;" >
  <tr>
    <td style="background-color: red;"> Ячейка 1 </td>
    <td style="background-color: green;"> Ячейка 2 </td>
  </tr>
 
  <tr style="background-color: blue;">
    <td> Ячейка 3 </td>
    <td  style="background-color: yellow;"> Ячейка 4 </td>
  </tr>
</table>

Этот пример правильно отрабатывается движком MediaWiki и ЖЖ, и выглядит так:

Ячейка 1	Ячейка 2
Ячейка 3	Ячейка 4

В викидвижке предыдущий пример с bgcolor не показывает серого цвета для фона таблицы.

Тег <table>

Начинает и завершает описание таблицы.

<table>
...
</table>

Видимость рамки таблицы

Чтобы рамка таблицы стала видимой (по умолчанию она невидимая), ей нужно назначить параметр border:

<table border="1">
...
</table>

Убирание задвоенности рамки

По умолчанию рамка является «объемной» и состоит из двух линий. Чтобы сделать рамку простой одинарной, можно прописать ей стиль:

<table border="1" style="border-collapse: collapse;">
...
</table>

Прочие параметры

• align=[left|center|right] (css: text-align) : выравнивание таблицы относительно документа;
• bgcolor=[$html-color] (css: background-color) : цвет фона для всей таблицы (может быть переопределен нижележащими элементами);
• border=[$integer] : толщина рамки таблицы (целое положительное число в пискелах без постфикса «px»);
• cellspacing=[$integer] : расстояние меж ячейками таблицы с учетом толщины рамки (целое положительное число);
• width=[$] : ширина таблицы (целое положительное число в пикселах или процентах от ширины всего документа);
• height=[$] : высота таблицы (целое положительное число в пикселах или процентах от высоты всего документа).

Параметры могут быть прописаны непосредственно в самой таблице в пространстве тега <table> или же, что является более правильным, при помощи стилей CSS (тогда указывается только идентификатор или класс; также стили CSS могут быть прописаны непосредственно в коде таблицы внутри параметра style=[$css]).

Тег <caption>

Необязательный тег, который позволяет дать описание (заголовок) к таблице. Принимает параметр

• align = top|bottom|left|right - расположение надписи относительно таблицы.

Тег <tr>

Начинает и завершает описание строки таблицы. Ячейки в ее пределах могут быть определены при помощи тегов <th> или <td> (см. ниже).

<tr>
  ...
</tr>

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

Тег <td>

Описание ячейки таблицы. Должен располагаться внутри тегов <tr>.

<td>
  ...
</td>

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

Объединить две или более ячейки таблицы можно при помощи параметров colspan и rowspan.

<table border="1">
    <tr> 
     <td rowspan="2">Ячейка 1</td>
     <td>Ячейка 2</td>
    </tr>

    <tr> 
     <td>Ячейка 3</td>
    </tr>
</table>

В этом примере две ячейки объединяются по вертикали, а в следующей строке таблицы должно быть меньше описаний <td>.

Прочие параметры

• align, bgcolor, width, height : значение аналогично глобальным параметрам и переопределяет все параметры более высокого уровня;

Тег <colgroup>

Разница в отрисовке примера различными браузерами.

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

 <table border="1">
  <colgroup span="2" width="150">
  <colgroup span="1" width="80">
   <tr> 
   <td>aaa</td><td>bbb</td><td>ccc</td>
  </tr>
 </table>

В этом примере 2 колонкам таблицы назначена ширина 150 пикселей, а еще одной - 80 пикселей.

Ниже сделана попытка назначить выравнивание (align) и стиль (style) колонкам таблицы.

 <table border="1">
  <colgroup span="2" width="150" align="center" style="font-weight:bold;">
  <colgroup span="1" width="80" align="right" style="font-style:italic;">
   <tr> 
   <td>aaa</td><td>bbb</td><td>ccc</td>
  </tr>
 </table>

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

Firefox, Chrome, и Safari поддерживают только width и span атрибуты элемента colgroup.

Викидвижок не воспринимает этот тег.

Тег <col>

Примерно то же самое (синоним?) и работает (или точнее не работает) в различных браузерах точно так же, как и предыдущий тег COLGROUP.

 <table border="1">
  <col span="2" width="150" align="center" style="font-weight:bold;">
  <col span="1" width="80" align="right" style="font-style:italic;">
   <tr> 
   <td>aaa</td><td>bbb</td><td>ccc</td>
  </tr>
 </table>

В стандарте прописано, что можно комбинировать эти теги:

   <COLGROUP width="20">
      <COL span="39">
      <COL id="format-me-specially">
   </COLGROUP>

Викидвижок не воспринимает этот тег.

Примеры стилей CSS

• border: 1px solid black; /* стиль рамки */
• border-collapse:collapse; /* убирание задвоенности рамки */
• width:100%;
• height:50px;
• text-align:right;
• vertical-align:bottom;
• padding:15px; /*расстояние от текста внутри таблицы до рамки */
• background-color:green;
• color:white;

Источник - по ссылке.

История табличных тегов

Атрибут WIDTH для тегов <TD> и <TH>, устанавливающий ширину ячейки таблицы в пикселях или процентах, был введён в браузере Netscape Navigator начиная с версии 1.1.

Атрибут BGCOLOR, предназначенный для задания цвета фона ячеек таблицы <TD> и <TH>, стал использоваться в Netscape Navigator 3.0 beta.

См. также

• Цвета в HTML
• Обтекание картинок текстом в HTML

Ссылки

• Стили CSS для элементов таблиц

Документы w3.org

• http://www.w3.org/TR/CSS21/tables.html
• http://www.w3.org/TR/html401/struct/tables.html Tables in HTML documents
• Стиль рамки таблицы в HTML и CSS в Циклопедии

Таблицы в HTML относится к теме «HTML»   ±

<HTML> [править] %%::*::%% HTML • HTML5 • XHTML • MHTML • HTM • спецсимволы HTML Теги <A> • <font> • <FORM> • <img> • <input> • <select> • <textarea> • <noindex> Устаревшие: <LAYER> Атрибуты nofollow Инструкции Обтекание картинок текстом в HTML • Фреймы • Таблицы в HTML • Форма (HTML) • Списки HTML Разметка сайтов HTML в MediaWiki • HTML в Скайпе • Разметка Живого Журнала • Разметка на Лепре Цвета в HTML #c0ffee • #chucknorris Программы Microsoft FrontPage • 1stPage • Сравнение редакторов HTML (ранних) Арт HTML-Mosaic Болезни Диватоз • Классянка • Эффект Упячки Организации W3C • WHATWG