Как изменить размер ячейки в таблице html

Для изменения размера ячейки в таблице HTML можно использовать атрибуты width и height.

Например, чтобы установить ширину ячейки на 100 пикселей и высоту в 50 пикселей, нужно добавить следующий код внутри тега <td>:

<td width="100" height="50">Содержимое ячейки</td>

Если необходимо установить размер ячейки в процентах от ширины таблицы, можно использовать значение атрибута "width" в процентах.

<td width="25%">Содержимое ячейки</td>

Также, можно использовать стилевые свойства для установки размера ячейки:

<td style="width: 100px; height: 50px;">Содержимое ячейки</td>

Рекомендуется использовать стилевые свойства и CSS-классы вместо атрибутов width и height, так как они позволяют более гибко управлять размерами ячеек и производить изменения внешнего вида без изменения HTML-кода.

Чтобы изменить размер ячейки в таблице HTML используется CSS.

Можем задать ширину и высоту напрямую для ячейки:

<table>
  <tr>
    <td style="width: 100px; height: 50px;">Содержимое ячейки</td>
  </tr>
</table>

Либо может создать общий класс в CSS:

<style>
  .custom-cell {
    width: 100px;
    height: 50px;
  }
</style>

<table>
  <tr>
    <td class="custom-cell">Содержимое ячейки</td>
  </tr>
</table>

Также можем задать размер для всей колонки с помощью тега <col>:

<table>
  <colgroup>
    <col style="width: 100px;">
  </colgroup>
  <tr>
    <td>Содержимое ячейки</td>
  </tr>
</table>

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

td {
  width: 25%; /* Ячейка займет четверть ширины таблицы */
}

Размер ячейки задают CSS-свойствами width и height у тега <td> или <th>:

<td style="width: 130px; height: 40px;">Ячейка</td>

В проекте стили выносят в CSS и задают ширину сразу всему столбцу.

Ширина столбца

Ширину достаточно задать одной ячейке в столбце, остальные подстроятся. Для всех столбцов сразу есть тег <colgroup>:

<table class="price">
  <colgroup>
    <col style="width: 60%">
    <col style="width: 20%">
    <col style="width: 20%">
  </colgroup>
  <tr><th>Курс</th><th>Срок</th><th>Цена</th></tr>
  <tr><td>Python-разработчик</td><td>10 мес.</td><td>от 2 400 ₽</td></tr>
</table>

Если ширина не применяется

По умолчанию браузер сам распределяет ширину по содержимому и может проигнорировать заданную. Включите фиксированную раскладку:

.price {
  width: 100%;
  table-layout: fixed;
}

С table-layout: fixed ширины столбцов берутся из первой строки или из <col>, длинный текст переносится.

Длинные слова и ссылки, которые не переносятся, разбейте:

.price td {
  overflow-wrap: anywhere;
}

Высота строки

Высоту обычно задают строке или отступами внутри ячеек:

.price td {
  padding: 12px 16px;
}

height у ячейки работает как минимальная высота: если текст не помещается, ячейка вырастет.

Объединить ячейки

Ячейка шире на два столбца или выше на две строки:

<td colspan="2">Занимает два столбца</td>
<td rowspan="2">Занимает две строки</td>

Старые атрибуты

<td width="130" height="35"> и bgcolor из старых шаблонов браузеры понимают, но в HTML5 эти атрибуты устарели. Фон ячейки задают через CSS: background: #499fd8;.

Таблицы и их оформление разбирают на курсе «Профессиональная верстка».