Атрибут cellpadding тега <table> — відступи в комірках
Визначає відстань між рамкою комірки та її вмістом.
Цей атрибут додає порожній простір до осередку, збільшуючи тим самим її розміри. Без cellpadding текст в таблиці «залазить» на рамку, знижуючи тим самим його сприйняття. Іншими словами - додавання cellpadding дозволяє поліпшити читабельність тексту.
Загальний опис
автор: NagarD
- Порада
-
При відсутності кордонів цей атрибут особливого значення не має, але може допомогти, коли потрібно встановити проміжок між комірками.
автор: с3с - Порада
-
Даний атрибут застарів, рекомендуємов використовувати CSS стиль -
автор: с3сpadding.
Синтаксис
<table cellpadding="pixels">Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | ≤12.1 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Приклад використання HTML атрибута cellpadding теґа <table>
HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості cellpadding в межах від 0 до 100 переміщаючи повзунок.</p>
<p id="text">hmghk</p>
<input type="range" min="0" max="100" step="1" value="0" id="range" onmousemove="f()">
<hr>
<table id = "table" border="2">
<caption><p>З використанням атрибуту cellpadding</p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td>Понеділок</td>
<td>8:00 - 16:00</td>
<td>12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td>Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td>П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>
<table border="2">
<caption><p>Без використанням атрибуту cellpadding</p><hr>Графік роботи</caption>
<thead>
<tr>
<th>День тиждня</th>
<th>Роботчий час</th>
<th>Обідня перерва</th>
</tr>
</thead>
<tr>
<td>Понеділок</td>
<td>8:00 - 16:00</td>
<td>12:00 - 13:00</td>
</tr>
<tr>
<td>Вівторок</td>
<td>9:00 - 17:00</td>
<td>13:00 - 14:00</td>
</tr>
<tr>
<td>Середа</td>
<td>11:00 - 19:00</td>
<td>15:00 - 16:00</td>
</tr>
<tr>
<td>Четверг</td>
<td>9:00 - 18:00</td>
<td>13:30 - 14:30</td>
</tr>
<tr>
<td>П'ятниця</td>
<td>9:00 - 13:00</td>
<td>12:00 - 13:30</td>
</tr>
</table>CSS
table{
width:500px;
height:200px;
float:left;
margin-left:5px;
}
table,th,td{
text-align:center;
}
th,td{
background:#ffffffc5;
}
caption{
font-size:20px;
color:blue;
}
*{
text-align:center;
}JS
text.innerHTML = "Поточний інтервал: 0";
function f() {
var range = document.getElementById("range").value;
var element = document.getElementById("table");
var text = document.getElementById("text");
element.setAttribute("cellpadding", range);
text.innerHTML = "Поточний інтервал:" + range;
}
//# sourceURL=pen.jsЧотири таблиці з тим самим вмістом: без cellpadding, з cellpadding="15", з cellpadding="15" та правилом padding: 0 у CSS (атрибут не спрацює) і сучасний варіант із різними відступами по горизонталі й вертикалі.
HTML
<p>1. без cellpadding</p>
<table>
<tr><td>Ціна</td><td>250 грн</td></tr>
</table>
<p>2. cellpadding="15"</p>
<table cellpadding="15">
<tr><td>Ціна</td><td>250 грн</td></tr>
</table>
<p>3. cellpadding="15", але в CSS задано padding: 0</p>
<table cellpadding="15" class="reset">
<tr><td>Ціна</td><td>250 грн</td></tr>
</table>
<p>4. сучасний запис: padding: 6px 20px</p>
<table class="modern">
<tr><td>Ціна</td><td>250 грн</td></tr>
</table>CSS
p {
font: 14px sans-serif;
margin: 14px 0 4px;
color: #444;
}
table { border-collapse: collapse; }
td { border: 1px solid #888; }
.reset td { padding: 0; }
.modern td { padding: 6px 20px; }Різниця між HTML 4.01 та HTML5
Атрибут cellpadding не підтримується в HTML5.
Коментарі
Коментарів ще немає — будьте першим!