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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Чтобы оформить границы ячеек таблицы, достаточно применить CSS свойство border.

Рассмотрим пример:

<table>
  <tr>
    <th>Наименование</th>
    <th>Кол-во</th>
  </tr>
  <tr>
    <td>Груши</td>
    <td>10</td>
  </tr>
  <tr>
    <td>Яблоки</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Мандарины</td>
    <td>5</td>
  </tr>
</table>

Стили:

table, td, th {
  /* задаем границу для всех элементов */
  border: 3px solid #245488;
}

td, th {
  /* делаем отступ в ячейках, выставляем выравнивание текста */
  padding: 10px 20px;
  text-align: center;
}

Результат:

На рисунке выше видно, что граница "задвоилась", так как css свойство border применяется к каждому элементу таблицы - и к table, и к каждому th/td. Для того, чтобы "схлопнуть" такие границы достаточно применить свойство border-collapse.

Стили:

table, td, th {
  border-collapse: collapse;
  border: 3px solid #245488;
}

Результат:

3 года назад

Вячеслав Межуревский

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

1 месяц

SASS

Навык работы с препроцессором SASS для эффективной и структурированной стилизации веб-приложений

2 месяца

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

Похожие вопросы