Как добавить пространство вокруг текста ячеек?

Чтобы текст внутри ячеек таблицы не сливался с рамкой, браузер добавляет к ячейкам небольшое пустое пространство. Величину этого пространства можно регулировать с помощью свойства 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. Для наглядности ячейки выделены фоновым цветом.

Расстояние от края ячейки до текста