Html table cellpadding: Атрибут cellpadding | HTML | WebReference – HTML table cellpadding Attribute

Leave a Comment / Html / By /

Атрибут cellpadding | HTML | WebReference

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

Данный атрибут устарел, взамен используйте стили.

Синтаксис

<table cellpadding="<число>">...</table>

Значения

Любое целое значение в пикселях или процентах.

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

Пример

<!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">
   <tr>
    <td> ... </td>
   </tr> 
  </table>
 </body>
</html>

Примечание

В CSS вместо атрибута cellpadding используйте стилевое свойство padding, добавляя его к селектору td или th.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>padding</title>
  <style>
   td {
    border: 1px solid #333;
    padding: 5px;
   }
  </style>
 </head>
 <body> 
  <table>
   <tr>
    <td> ... </td>
   </tr> 
  </table>
 </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 08.11.2016

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

HTML/Атрибут cellpadding (Элемент table)

<!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> <h2>Пример использования атрибута «cellpadding»</h2> <h3>Таблица умножения на 3</h3> <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>
<h2>Пример использования атрибута «cellpadding»</h2>
<h3>Таблица умножения на 3</h3>
<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>

HTML | Атрибут cellpadding

HTML, Веб-технологии

Атрибут HTML <table> cellpadding используется для указания пространства между содержимым ячейки и стенкой ячейки . Атрибут cellpadding задается в пикселях.

Синтаксис:

<table cellpadding="pixels">

Значения атрибута:

  • пиксели: он содержит пространство между содержимым ячейки и стенкой ячейки в виде пикселей.

Примечание. Атрибут <table> cellpadding не поддерживается HTML 5.

Пример:

<!DOCTYPE html>

<html>

  

<head>

    <title>

        HTML table cellpadding Attribute

    </title>

</head>

  

<body>

    <h2>GeeksforGeeks</h2>

  

    <h3>HTML table cellpadding Attribute</h3>

  

    <table border="1" 

           cellpadding="15">

        <caption>Author Details</caption>

  

        <tr>

            <th>NAME</th>

            <th>AGE</th>

            <th>BRANCH</th>

        </tr>

        <tr>

            <td>BITTU</td>

            <td>22</td>

            <td>CSE</td>

        </tr>

        <tr>

            <td>RAM</td>

            <td>21</td>

            <td>ECE</td>

        </tr>

    </table>

</body>

  

</html>

Выход:

Поддерживаемые браузеры: браузер, поддерживаемый атрибутом <table> cellpadding HTML , приведен ниже:

  • Гугл Хром
  • Internet Explorer
  • Fire Fox
  • Сафари
  • опера

Рекомендуемые посты:

HTML | Атрибут <table> cellpadding

0.00 (0%) 0 votes

seodon.ru | Теги HTML — Тег TABLE

Опубликовано: 25.06.2010 Последняя правка: 10.12.2015

Атрибут cellpadding, тега <TABLE>, применяется для указания размеров внутренних отступов от границ ячеек до их содержимого. По умолчанию размер этих отступов равен нулю, и если границы видимы, то содержимое ячеек вплотную к ним прилегает, что бывает не всегда удобно. Если же границы ячеек не отображаются, то при помощи cellpadding можно просто увеличивать расстояния между ячейками. Причем, так как это внутренние отступы, то они будут того же цвета, что и фон ячеек — это актуально, когда фон ячеек отличатся от фона таблицы.

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

Значения

Размер отступов может задаваться двумя способами.

  • 1. Любое неотрицательное число задающее размеры в пикселях. Тогда для всех четырех сторон будут установлены одинаковые размеры отступов.
  • 2. Любое неотрицательное число задающее размеры в процентах, исходя из высоты и ширины ячеек равных 100%. В этом случае горизонтальные и вертикальные отступы могут быть разные и каждый из отступов получит половину от указанного размера. Например: мы задали cellpadding= «20%». Тогда у нас будут отступы по 10% с каждой стороны исходя из размеров ячеек. Если у нас ячейки с шириной 100px и высотой 60px, то боковые отступы будут по 10px, а сверху и снизу по 6px.

В любом случае ни один из популярных браузеров не поддерживает процентные значения атрибута cellpadding. Они просто игнорируют знак процента (%) и считают значения в пикселях.

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

Синтаксис

<table cellpadding="значение">...</table>

Обязательный атрибут: нет.

Пример HTML: применение атрибута 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>seodon.ru - Тег TABLE, атрибут cellpadding</title>
 </head>
 <body>
  <table border="3" cellpadding="10">
   <tr>
    <td>Размер внутренних отступов равен 10px.</td>
   </tr>
  </table>
 </body>
</html>

Результат примера

Поддержка версиями HTML

Версия:HTML 4.01HTML 5XHTML 1.0XHTML 1.1
Поддержка:ДаНетДаДа

Данный атрибут отсутствует в HTML 5, вместо него рекомендуется использовать стили (CSS).

Поддержка браузерами

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ДаДаДаДаДа

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *