Щоб текст усередині осередків таблиці не зливався з рамкою, браузер додає до осередків невеликий порожній простір. Величину цього простору можна регулювати за допомогою властивості padding, додаючи його до селекторів td та th. У прикладі 1 значення padding задано як 10 пікселів для всіх сторін комірки.
Приклад 1. Використання padding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Таблиця</title> <style> table { width: 80%; /* Ширина таблиці */
margin: auto; /* Вирівнюємо таблицю по центру */
}
td { background: #FFC60B; /* Фон осередків */
text-align: center; /* Вирівнюємо текст по центру комірки */
padding: 10px; /* Відстань від краю осередку до тексту */
}
</style>
</head>
<body> <table> <tr> <td>Балбес</td> <td>Бувалий</td>
</tr> <tr> <td>Трус</td> <td>Шурік</td>
</tr>
</table>
</body>
</html>Результат цього прикладу показаний на рис. 1. Для наочності осередку виділено фоновим кольором.">
Мал. 1. Відстань від краю осередку до тексту