• Теория
  • Теория

Колонка таблицы

Итак, мы разобрались как стилизовать ряды. А что насчёт столбцов?

В HTML-таблицах для стилизации столбцов используется тег <col>. Тег пишется в начале таблицы и не закрывается. Первый <col> в разметке влияет на каждую первую ячейку в рядах таблицы, то есть, на первый столбец. Следующий <col> будет стилизовать второй столбец и так далее.

В примере ниже ячейкам 1.1 и 1.2 (первый столбец) задаётся ширина 20%, а ячейкам 2.1 и 2.2 (второй столбец) ширина — 80%:

<table>
  <col width="20%">
  <col width="80%">
  <tr>
    <td>1.1</td> <td>2.1</td>
  </tr>
  <tr>
    <td>1.2</td> <td>2.2</td>
  </tr>
</table>

В CSS-таблицах всё так же: внутри таблицы нужно создать пустой тег и задать ему свойство display: table-column — это аналог тега <col>. Правила для него будут применяться к первому столбцу, следующий элемент с table-column стилизует второй столбец и так далее.

Для практики наклеим на стену позади первого столбца текстурные обои.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Таблицы на CSS» тренажёра «Табличные раскладки» можно после регистрации и оформления подписки.