Как в html сделать таблицы в


Как в html сделать таблицы в

Как в html сделать таблицы в

Как в html сделать таблицы в



Стиль рамки таблицы задаётся в и при помощи атрибутов, которые могут относиться как к таблице целиком, так и к отдельным её элементам. Из-за различий реализации разные браузеры могут показывать одну и ту же таблицу по-разному.

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

Пример таблицы со стилями . <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>

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

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

Пример правильно отрабатывает в и в .

[] Использование класса CSS

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

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

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

<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 для тега <>:

Атрибуты CSS:

[] Толщина рамки

Table border.PNG

Аналогично работает стиль , однако рамка не отображается, если не установлен отличный от нуля атрибут border или стиль . При одновременной установке толщины при помощи border-width и border, приоритет имеет border-width.

Для указывается числовое значение или синоним: thin (1-2 пиксела), medium (3-4 пиксела) и thick (5-6 пикселов), значения отличаются для разных браузеров.

Table class border-width word.PNG

Можно указать от 1 до 4 значений толщины.

Table class border-width.png

Для раздельного назначения толщины границам можно использовать стили , , , .

Цвет рамки можно установить при помощи атрибута bordercolor тега <> (отсутствует в стандарте HTML 4.01 и не поддерживается браузером Opera).

Для назначения цвета рамке имеется CSS-стиль .

Table bordercolor.PNG

Для назначения разных цветов разным сторонам границы есть стили , , , .

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

<table style="border-width: 10; width: 250; border-color: red green blue yellow; border-style: ridge"> <tr> <td>border-color: red green blue yellow</td> </tr> </table>

Назначение разных цветов рамке

Для указания цветов можно использовать шестнадцатеричные значения наподобие #aabbcc, см. .

Для назначения стиля рамки используется CSS-атрибут .

Table class border-style.png

При единичной толщине рамки в версий 6 и ниже имеется ошибка для стиля dotted (он отображается как dashed):


Для назначения разных стилей четырём сторонам рамки можно перечислить стили через пробел (сверху по часовой стрелке) в выражении или использовать свойства , , , .

<table style="border-width: 10; width: 280; border-style: ridge double groove solid"> <tr> <td>border-style: ridge double groove solid</td> </tr> </table>

Назначение стилей разным сторонам рамки

[] Внутренняя и внешняя рамки

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

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

<html> <style type="text/css"> table { background: red; / цвет фона / border: 1px #ff0000 solid; / стиль внешней рамки / } td { border: 1px green solid; / стиль рамки ячеек / padding: 0.2em; } th { background: #ffaaaa; border: 1px blue solid; / стиль рамки заголовков / padding: 0.2em; } </style> <table> <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>

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

[] Расстояние между ячейками

Расстоянием между ячейками в показанном выше случае можно управлять при помощи атрибута тега <> cellspacing или атрибута стиля (не работает в IE).

Htms table cellspacing.PNG

<table cellspacing="10"> <tr> ...

При замере оказывается, что эти расстояния действительно составляют указанное число пикселей, причём, во всех трех браузерах (IE, Opera, Firefox).

[] Объединённая рамка

Чтобы объединить смежные линии, используют атрибут стиля CSS : collapse.

<html> <style type="text/css"> table { background: #ffdddd; / цвет фона / border: 1px #ff0000 solid; / стиль рамки / border-collapse: collapse ; / убирание задвоенности рамки / } td { border: 1px #00ff00 solid; / стиль рамки ячеек / padding: 0.2em; } th { background: #ffaaaa; border: 1px #0000ff solid; / стиль рамки заголовков / padding: 0.2em; } </style> <table> <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>

Разные браузеры при этом, к сожалению, произвольно смешивают стили, которые были назначены таблице, ячейкам и заголовкам:

Htms table border collapse.PNG

Однако, если внешнюю линию (прописанную для тега <>) сделать более толстой, то картина меняется на следующую:

Htms table border collapse2.png

[] Проблемы с назначением стиля внутренней рамки

Предположим, что мы хотим прописать чёрную тонкую рамку всем ячейкам таблицы, используя стиль : 1px solid black к тегу <>.

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

К сожалению, разные браузеры «понимают» под этим разное: либо стиль внешней рамки (не включая внутренние линии таблицы), либо стиль вообще всех линий. Для назначения точного стиля внутренних рамок, который работает во всех браузерах, требуется описать его для внутренних ячеек (<> и <>). Это удобнее всего сделать в CSS-описании, при условии, что есть доступ к стилям CSS.

[] Таблицы без рамки

Таблица без рамки. Таблица без рамки и значением cellspacing="8" у тега table.

Возможны таблицы совсем без рамки, с назначением только цвета фона у ячеек.

<html> <table cellpadding="5"> <tr style="background-color: gray; color:white"> <th> Заголовок 1 </th> <th> Заголовок 2 </th> </tr> <tr style="background-color: silver;"> <td> Ячейка 1 </td> <td> Ячейка 2 </td> </tr> <tr style="background-color: silver;"> <td> Ячейка 3 </td> <td> Ячейка 4 </td> </tr> </table> </html>

Пример правильно работает в MediaWiki и LiveJournal.

[] Отрисовка рамок таблицы только вокруг групп

При помощи атрибута rules="groups" тега <> можно нарисовать рамки вокруг групп, заданных тегами <>, <>, <>, <> или <>. Значение rules="cols" или rules="rows" тега <> позволяет отобразить рамку, соответственно, только вокруг колонок или строк.

[] Расстояние от текста внутри таблицы до рамки

Для этого служит параметр CSS для содержимого ячейки <>, например:

<td style="padding:15px"> Текст ячейки </td>

Для всей таблицы (<>) этот атрибут стиля «отдаляет» внешнюю рамку от внутренних ячеек (для IE это не работает).

Table padding.png

Чтобы назначить отступ от внутреннего текста до рамки всем ячейкам, нужно использовать атрибут cellpadding тега <>:

<html> <table border=1 cellpadding=30px> <tr> <td> aaa <td> bbb <td> ccc </table>

Table cellpadding.png

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


Источник: http://cyclowiki.org/wiki/%D0%A1%D1%82%D0%B8%D0%BB%D1%8C_%D1%80%D0%B0%D0%BC%D0%BA%D0%B8_%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B_%D0%B2_HTML_%D0%B8_CSS


Как в html сделать таблицы в фото


Как в html сделать таблицы в

Как в html сделать таблицы в

Как в html сделать таблицы в

Как в html сделать таблицы в

Как в html сделать таблицы в

Как в html сделать таблицы в

Как в html сделать таблицы в

Далее: