Глиф Учебники

Как сделать таблицу с рамками

Справочник · HTML и CSS · 1 минута чтения

Сетка из линий вокруг каждой ячейки:

CSS
table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #999;
  padding: 6px 12px;
}

Подключите эти правила в файле стилей или в теге <style> — как в уроке Таблицы в HTML.

Другие варианты

Только горизонтальные линии между строками — чисто и современно:

CSS
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px 12px;
  border-bottom: 1px solid #ddd;
  text-align: left;
}

Рамка вокруг всей таблицы без внутренних линий:

CSS
table {
  border: 2px solid #333;
  border-collapse: collapse;
}

Полосы через строку («зебра») — каждая вторая строка тела таблицы с фоном:

CSS
tbody tr:nth-child(even) {
  background-color: #f5f5f5;
}

even — чётные строки, odd — нечётные.

Шапка другим цветом:

CSS
thead th {
  background-color: #333;
  color: #fff;
}

Промежутки между ячейками

Если, наоборот, нужны отдельные ячейки с зазором, оставьте border-collapse: separate (так по умолчанию) и задайте зазор:

CSS
table {
  border-collapse: separate;
  border-spacing: 4px;
}

Подводные камни