Как выровнять таблицу по центру html

Выравнивание таблицы работает только в случае, когда явно задана её ширина и она меньше 100%. При соблюдении этих условий для селектора table следует задать свойство margin со значением auto. Оно обозначает, что отступы от таблицы вычисляются автоматически, это как раз и приводит к её центрированию.

Исходный HTML:

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

Стили:

  table {
    width: 300px;
    /* центрируем таблицу */
    margin: auto;
    /* выравнивание текста внутри ячеек */
    text-align: center;
    /* делаем границы красивыми */
    border-collapse: collapse;
  }

  td {
    /* делаем видимыми границы у таблицы */
    border: 1px solid #333;
  }