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

Чтобы оформить границы ячеек таблицы, достаточно применить 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;
}

Результат: