Установить cellpadding и cellspacing в css?

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

Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона (пример 1).

Пример 1. Цвет фона


В данном примере получим синий цвет фона у ячеек (тег <td>) и красный у заголовка (тег <th>). Это связано с тем, что стиль для селектора TH не определен, поэтому «просвечивается» фон родителя, в данном случае, селектора TABLE. А цвет для селектора TD указан явно, вот ячейки и «заливаются» синим цветом.

То же самое происходит и с цветом текста. Для всех элементов таблицы в примере он установлен белым.

Результат данного примера показан на рис. 1.

Рис. 1. Изменение цвета фона

Выравнивание содержимого ячеек

По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег <th>, он определяет заголовок, в котором выравнивание происходит по центру. Чтобы изменить способ выравнивания применяется стилевое свойство text-align (пример 5).

Пример 5. Выравнивание содержимого ячеек по горизонтали

В данном примере содержимое тега <th> выравнивается по левому краю, а содержимое тега <td> — по центру. Результат примера показан ниже.

Рис. 5. Выравнивание текста в ячейках

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

Пример 6. Выравнивание содержимого ячеек по вертикали

В данном примере устанавливается высота заголовка <th> как 40 пикселов и выравнивание текста происходит по нижнему краю. Результат примера показан на рис. 6.

Рис. 6. Выравнивание текста в ячейках

Параметр COLS

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Параметр cols задает количество столбцов в таблице, помогая браузеру в подготовке к ее отображению. Без этого параметра таблица будет показана только после того, как все содержимое таблицы будет загружено в браузер и проанализировано. Использование параметра cols позволяет несколько ускорить отображение содержимого таблицы.

Значение по умолчанию

Нет.

Пример 9. Использование параметра cols

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TABLE, параметр cols</title> </head> <body> <table width=»700″ cellspacing=»0″ border=»1″ cols=»10″> <tr> <td>&nbsp;</td> <td>1995</td><td>1996</td><td>1997</td><td>1998</td> <td>1999</td><td>2000</td><td>2001</td><td>2002</td> <td>2003</td> </tr> <tr> <td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td> <td>3</td><td>34</td><td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td> <td>4</td><td>69</td><td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td> <td>7</td><td>73</td><td>79</td><td>34</td><td>86</td> </tr> </table> </body> </html>

Пример использования

Листинг кода <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Параметр cellpadding (Элемент table)</title> </head> <body> <h1>Пример использования атрибута «cellpadding»</h1> <h2>Таблица умножения на 3</h2> <table border=»1″ cellpadding=»7»> <tbody> <tr> <td>1</td> <td>*3</td> <td>=</td> <td>3</td> </tr> <tr> <td>2</td> <td>*3</td> <td>=</td> <td>6</td> </tr> <tr> <td>3</td> <td>*3</td> <td>=</td> <td>9</td> </tr> <tr> <td>4</td> <td>*3</td> <td>=</td> <td>12</td> </tr> <tr> <td>5</td> <td>*3</td> <td>=</td> <td>15</td> </tr> <tr> <td>6</td> <td>*3</td> <td>=</td> <td>18</td> </tr> <tr> <td>7</td> <td>*3</td> <td>=</td> <td>21</td> </tr> <tr> <td>8</td> <td>*3</td> <td>=</td> <td>24</td> </tr> <tr> <td>9</td> <td>*3</td> <td>=</td> <td>27</td> </tr> <tr> <td>10</td> <td>*3</td> <td>=</td> <td>30</td> </tr> </tbody> </table> </body> </html><!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.1//EN» «http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd»><html xmlns=»http://www.w3.org/1999/xhtml»><head><meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /><title>Параметр cellpadding (Элемент table)</title></head><body><h1>Пример использования атрибута «cellpadding»</h1><h2>Таблица умножения на 3</h2><table border=»1″ cellpadding=»7»><tbody><tr> <td>1</td> <td>*3</td> <td>=</td> <td>3</td> </tr><tr> <td>2</td> <td>*3</td> <td>=</td> <td>6</td> </tr><tr> <td>3</td> <td>*3</td> <td>=</td> <td>9</td> </tr><tr> <td>4</td> <td>*3</td> <td>=</td> <td>12</td> </tr><tr> <td>5</td> <td>*3</td> <td>=</td> <td>15</td> </tr><tr> <td>6</td> <td>*3</td> <td>=</td> <td>18</td> </tr><tr> <td>7</td> <td>*3</td> <td>=</td> <td>21</td> </tr><tr> <td>8</td> <td>*3</td> <td>=</td> <td>24</td> </tr><tr> <td>9</td> <td>*3</td> <td>=</td> <td>27</td> </tr><tr> <td>10</td> <td>*3</td> <td>=</td> <td>30</td> </tr></tbody></table></body></html>

Параметр cellpadding (Элемент table)

Параметр CELLPADDING

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Определяет расстояние между границей ячейки и ее содержимым. Этот параметр добавляет пустое пространство к ячейке, увеличивая тем самым ее размеры. Без cellpadding текст в таблице «налипает» на рамку, снижая тем самым его восприятие. Добавление же cellpadding позволяет улучшить читабельность текста. При отсутствии границ особого значения этот параметр не имеет, но может помочь, когда требуется установить пустой промежуток между ячейками.

Значение по умолчанию

Пример 7. Использование параметра cellpadding

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TABLE, параметр cellpadding</title> </head> <body> <table cellpadding=»7″ border=»2″ width=»100%»> <tr> <td> … </td> </tr> </table> </body> </html>

Exemples


Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n’hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !

Tableau simple

HTML

<table>
  <tr>
    <td>Jean</td>
    <td>Biche</td>
  </tr>
  <tr>
    <td>Jeanne</td>
    <td>Biche</td>
  </tr>
</table>

HTML

<!-- Tableau simple avec en-tête -->
<table>
  <tr>
    <th>Prénom</th>
    <th>Nom</th>
  </tr>
  <tr>
    <td>Jean</td>
    <td>Dupont</td>
  </tr>
  <tr>
    <td>Marion</td>
    <td>Duval</td>
  </tr>
</table>

<!-- Tableau utilisant thead, tfoot, et tbody -->
<table>
  <thead>
    <tr>
      <th>Contenu d'en-tête 1</th>
      <th>Contenu d'en-tête 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Contenu interne 1</td>
      <td>Contenu interne 2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Pied de tableau 1</td>
      <td>Pied de tableau 2</td>
    </tr>
  </tfoot>
</table>

<!-- Tableau utilisant colgroup -->
<table>
  <colgroup span="4" class="columns"></colgroup>
  <tr>
    <th>Pays</th>
    <th>Capitales</th>
    <th>Population</th>
    <th>Langue</th>
  </tr>
  <tr>
    <td>USA</td>
    <td>Washington D.C.</td>
    <td>309 millions</td>
    <td>Anglais</td>
  </tr>
  <tr>
    <td>Suède</td>
    <td>Stockholm</td>
    <td>9 millions</td>
    <td>Suédois</td>
  </tr>
</table>

<!-- Tableau utilisant colgroup et col -->
<table>
  <colgroup>
    <col class="column1">
    <col class="columns2plus3" span="2">
  </colgroup>
  <tr>
    <th>Citron vert</th>
    <th>Citron</th>
    <th>Orange</th>
  </tr>
  <tr>
    <td>Vert</td>
    <td>Jaune</td>
    <td>Orange</td>
  </tr>
</table>

<!-- Tableau simple avec une légende -->
<table>
  <caption>Super légende</caption>
  <tr>
    <td>Données géniales</td>
  </tr>
</table>

Web Tasarım Dersleri Cellspacing ve CellPadding Kullanımı

Aralık 5th 2010 | 9 sene önce yazıldı…

10 10 5.069 kez okundu incelendi

Bu dersimizde son olarak tabloları ele alacaz tablo Cellspacing ve CellPadding uygulamasını görüp bir sonraki dersimiz artık web tasarım uygulamaları olacak.

Cellspacing

Cellspacing etiketi arkadaşlar tablo içerisinde yer alan hücreler ve tablo kenarlığı arasındaki belirlemeye yarar Cellspacing değer olarak sadece pixel yönünden değer atanabilir.

Cellspacing Uygulaması

Aşağıdaki uygulamalarda ilk örnekteki tablo Cellspacing değeri 5 ve 2. örnek olarak Cellspacing 20 değeri verecem aradaki farkı anlamak için sizde aynı uygulamayı yapın arkadaşlar aşağıdaki kodları boş bir not defteri ile yazıp farklı kaydet diyerek dosya adı tabloyukseklik1.html olarak kaydedin.<html> <head> <title>Web Tasarım Dersleri Cellspacing Uygulaması Ders 16 </title> </head> <body>

<table border=”1″ cellspacing=”5″ bordercolor=”#FF0000″> <tr align=”center”> <td width=”100″>Ana Sayfa</td> <td width=”100″>Hakkımızda</td> <td width=”100″>Ürünler</td> <td width=”100″>İletişim</td> </tr> </table>

</body> </html>

Html Cellspacing Uygulaması 5 Piksel

2. Cellspacing Örneği

<html> <head> <title>Web Tasarım Dersleri Cellspacing Uygulaması Ders 16 </title> </head> <body>

<table border=”1″ cellspacing=”20″ bordercolor=”#FF0000″> <tr align=”center”> <td width=”100″>Ana Sayfa</td> <td width=”100″>Hakkımızda</td> <td width=”100″>Ürünler</td> <td width=”100″>İletişim</td> </tr> </table>

</body> </html>

Evet arkadaşlar örneğimizde ilkinde cellspacing değeri 5 verdik ve 2. örnek 20 verdik 2. örnekte hücrelerin tablo kenarlıklarından nasıl uzaklaştığı net görünmektedir buradaki işlem hücre ile gerçekleşti aşağıda anlatacağım işlemse sadece hücre içindeki verileri etkileyecek.

Cellpadding

Cellpadding etiketi arkadaşlar tablo hücreleri içinde yer alan yazı, resim türü içeriğimizin hücre kenarlıkları ile içeriğin arasındaki mesafeyi Cellpadding ile ayarlanabilir piksel cinsinden değer verebiliriz.

Cellpadding Uygulaması

Yukardaki gibi yine 2 örnek yapacam arkadaşlar değer olarak ilk örnekte 5 diğer örnekte 20 piksel vereceğim sizlerde not defterinizde uygulayıp deneyin.

<html> <head> <title>Web Tasarım Dersleri Cellpadding Uygulaması Ders 16 </title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″></head> <body>

<table border=”1″ cellpadding=”5″ bordercolor=”#FF0000″> <tr align=”center”> <td width=”100″>Ana Sayfa</td> <td width=”100″>Hakkımızda</td> <td width=”100″>Ürünler</td> <td width=”100″>İletişim</td> </tr> </table>

</body> </html>

Cellpadding Uygulaması


2. Örnek yukardaki örnekten tek farkı değerin 5ten 20ye çekilmesi

Cellpadding Uygulaması

Evet arkadaşlar Cellpadding uygulamamızda değer arttıkça hücre içnde yer alan yazı veya resimler hücre kenarlıklarından uzaklaştığı görülmektedir.

Bugünkü dersimiz bu kadar arkadaşlar bir sonraki dersimiz ise artık proje uygulamaları olacak çerçeveler ile başlayacaz Allahın izniyle.

Теги таблицы

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

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

COLGROUP предназначен для задания ширины и стиля одной или нескольких колонок таблицы.

TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD.

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

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

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

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

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

TR служит контейнером для создания строки таблицы.

Параметр CELLSPACING

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Значение по умолчанию

0 (когда нет параметра border) 2 (когда параметра border установлен)

Пример 8. Использование параметра cellspacing

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TABLE, параметр cellspacing</title> </head> <body> <table cellspacing=»5″ cellpadding=»10″ border=»1″ width=»100%»> <tr> <td> … </td> <td> … </td> </tr> </table> </body> </html>

Accessibilité

Légendes

Fournir un élément pour légender le tableau avec une description claire et concise permet aux utilisateurs de décider s’ils doivent lire le contenu du tableau ou le passer.

Une telle légende fournit une aide pour les personnes qui naviguent avec des outils d’assistance comme des lecteurs d’écran.

  • Ajouter une légende à un tableau grâce à
  • Légendes et résumés • Tableaux • Tutoriels d’accessibilité du W3C WAI (en anglais)

Portées des lignes et des colonnes

L’attribut peut être redondant dans certains contextes où la portée peut être déterminée avec les autres éléments. Toutefois de nombreux lecteurs d’écran utilisent cet attribut pour répliquer l’organisation générale du tableau. Dans les tableaux plus complexes, pourra être utilisé afin de fournir les informations nécessaires à l’organisation (tant au moteur HTML qu’aux outils d’assistance).

Exemple

<table>
  <caption>Noms et valeurs des couleurs</caption>
  <tbody>
    <tr>
      <th scope="col">Nom</th>
      <th scope="col">Hexadécimal</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Turquoise</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Ocre</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

Ajouter sur un élément permettra d’aider à décrire le fait que la cellule est en haut de la colonne. Indiquer sur un élément permettra d’indiquer que la cellule est la première de la ligne.

  • Les tableaux avec deux en-têtes • Tutoriels d’accessibilité web W3C WAI (en anglais)
  • Les tableaux avec des en-têtes hétérogènes • Tutoriels d’accessibilité web W3C WAI (en anglais)
  • H63 : Utiliser l’attribut afin d’associer les cellules de l’en-tête et celles des données dans les tableaux de données | Techniques W3C pour WCAG 2.0 (en anglais)

Tableaux complexes

Les technologies d’assistance telles que les lecteurs d’écran peuvent rencontrer des difficultés lors de l’analyse de tableaux complexes où les cellules d’en-tête ne sont pas associées aux données de façon clairement verticale ou horizontale. Généralement, cela se traduit par la présence des attributs et .

Si possible, on présentera le tableau différemment, en le divisant en plusieurs tableaux simples qui ne nécessitent pas l’utilisation des atttributs et . En plus d’aider à la compréhension pour les personnes qui utilisent des outils d’assistance, cela pourra bénéficier aux personnes souffrant de troubles cognitifs.

Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs et afin d’associer « informatiquement » les cellules du tableaux avec les en-têtes correspondantes.

  • Les tableaux avec des en-têtes sur plusieurs niveaux • Tutoriels d’accesibilité web W3C WAI (en anglais)
  • H43 : Utiliser les attributs et afin d’associer les cellules de données et les cellules d’en-tête dans les tableaux | Techniques W3C pour  WCAG 2.0 (en anglais)

Границы и рамки

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

Использование атрибута cellspacing

Известно, что атрибут cellspacing тега <table> задает расстояние между ячейками таблицы. Если используется разный цвет фона таблицы и ячеек, то между ячейками возникнет сетка линий, цвет которых совпадает с цветом таблицы, а толщина равна значению атрибута cellspacing в пикселах. В вышеприведенном примере 2 этот эффект показан, поэтому повторять его не будем.

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

Применение свойства border

Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.

Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек (пример 3).

Пример 3. Добавление двойной рамки

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

Результат примера показан на рис. 3.


Рис. 3. Граница вокруг таблицы и ячеек

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

Хотя в коде примера этот атрибут нигде не фигурирует, браузер использует его по умолчанию. Если задать

Пример 4. Создание одинарной рамки

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

Результат примера показан на рис. 4.

Рис. 4. Граница вокруг таблицы

При добавлении border-collapse: collapse значение атрибута cellspacing тега <table> игнорируется.

Параметр HEIGHT

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

Устанавливает высоту таблицы. В спецификации HTML 4 этого параметра нет, однако браузеры в большинстве случаев понимают его, если не задан DOCTYPE. В том случае, когда в документе задан строгий DOCTYPE, браузеры высоту таблицы, заданную через параметр height, игнорируют.

Аналог CSS

height

Пример 10. Высота таблицы

<!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>Тег TABLE, параметр height</title> </head> <body> <table cellpadding=»10″ bgcolor=»#ffcc00″ align=»center» width=»50%» height=»50%»> <tr> <td> … </td> </tr> </table> </body> </html>

Параметр RULES

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

Аргументы

all
Линия рисуется вокруг каждой ячейки таблицы.
groups
Линия отображается между группами, которые образуются тегами <THEAD>, <TFOOT>, <TBODY>, <COLGROUP> или <COL>.
cols
Линия отображается между колонками.
none
Все границы скрываются.
rows
Граница рисуется между строками таблицы, созданых через тег <TR>.

Аналог CSS

border

Пример 11. Использование параметра rules

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TABLE, параметр rules</title> </head> <body> <table cellspacing=»0″ cellpadding=»10″ rules=»rows» border=»1″ width=»80%»> <tr> <td> … </td> <td> … </td> <td> … </td> </tr> </table> </body> </html>

Параметр BACKGROUND

HTML: 3.2 4 XHTML: 1.0 1.1

Описание

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

В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей

Аналог CSS

background-image

Пример 3. Фоновый рисунок в таблице

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″> <title>Тег TABLE, параметр background</title> </head> <body> <table background=»/images/rules.gif» width=»600″> <tr> <td> … </td> </tr> </table> </body> </html>


С этим читают