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

Очевидно, что прежде чем применить различные свойства CSS к html-таблице необходимо ее создать. О том как это сделать можно прочитать здесь. В моем случае законченный вариант таблицы будет выглядеть вот так: Это довольно простая таблица, состоящая из четырех столбцов и пяти строк. Ее html-код выглядит вот так: Обратите особое внимание на атрибут rowspan, т.к. именно с его помощью мы можем объединить четыре ячейки в первом столбце в одну. Теперь переходим непосредственно к CSS. Начать можно с ширины таблицы...