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

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

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

В 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 стилизует второй столбец и так далее.

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

Хорошо владеете JavaScript, но до сих пор не освоили Node.js? Записывайтесь на профессиональный курс «Node.js. Профессиональная разработка REST API». Цена 12 000 ₽.

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

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

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

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

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

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