Простейшая таблица

Для описания простейшей таблицы необходимо использовать три тега:

• Тег <table> обозначает таблицу;
• Тег <tr> расшифровывается как «table row», обозначает строку таблицы;
• Тег <td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы.

Пример простейшей таблицы:

<table>
  <tr>
    <td>Ячейка 1.1</td>
    <td>Ячейка 1.2</td>
  </tr>
  <tr>
    <td>Ячейка 2.1</td>
    <td>Ячейка 2.2</td>
  </tr>
</table>

Рамки таблиц

Рамки по умолчанию отображаются, если у тега <table> задан атрибут border с ненулевым значением. При помощи атрибута border можно изменять только толщину рамок. Более гибко можно управлять рамками при помощи CSS.

По умолчанию браузер рисует рамки таблицы и рамки отдельных ячеек раздельно. Чтобы избавиться от таких двойных рамок, используется CSS-свойство таблицы border-collapse. Вот так:

table {
  border-collapse: collapse;
}

Значение collapse убирает двойные рамки: схлопываются рамки соседних ячеек, а также рамки ячеек и внешняя рамка таблицы.

Для управления отдельными рамками необходимо использовать следующие свойства:

• border-top — верхняя рамка;
• border-right — правая рамка;
• border-bottom — нижняя рамка;
• border-left — левая рамка.

Отступы внутри ячеек

Отступы внутри ячеек можно добавлять с помощью атрибута cellpadding тега <table>, но лучше задавать отступы с помощью CSS.

CSS-свойство padding задаёт «внутренние отступы элемента» со всех сторон. Можно задавать отступы для каждой из сторон отдельно, используя свойства:

• padding-top — отступ вверх;
• padding-right — отступ вправо;
• padding-bottom — отступ вниз;
• padding-left — отступ влево.

Отступы между ячейками

Отступы между ячейками не работают с border-collapse: collapse.

Свойство border-collapse: separate является значением по умолчанию и «расклеивает» ячейки.

Отступы между ячейками можно задать с помощью атрибута cellspacing тега <table> или c помощью CSS-свойства border-spacing, которое задаётся для всей таблицы.