②Как задать ширину, высоту, фон и столбцы таблицы
Продолжим изучение темы CSS - таблицы. Если пропустили прошлую статью, то вот ссылка на неё:
Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов задаётся с помощью свойства width. Если для таблицы задано table {width: 100%;}, то ширина таблицы будет равна ширине блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в px или %, например:
CSS
table {width: 600px;}
th {width: 20%;}
td:first-child {width: 30%;}Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив верхний и нижний padding для элементов <td> и <th>. Фиксировать высоту с помощью свойства height не рекомендуется.
CSS
th, td {padding: 10px 15px;}Как задать фон таблицы
По умолчанию фон таблицы и ячеек прозрачный. Если страница или блок, содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек могут выступать: заливка сплошным цветом, градиентная заливка, фоновое изображение. Но о них попозже!
Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с помощью тега <tr>. На практике бывают случаи, когда необходимо специальное форматирование столбцов, которое возможно следующими способами:
с помощью тега <col> можно задать фон для любого количества столбцов;
с помощью селектора table td:first-child, table td:last-child можно задать стили для первого или последнего столбца таблицы (за исключением первой ячейки заголовка таблицы);
с помощью селектора table td:nth-child(правило отбора столбцов) можно задать стили для любых столбцов таблицы.
Подробнее про тег <col> вы можете прочитать в статье: HTML-таблицы. Часть 2.
Подробнее про CSS-селекторы вы сможете прочитать в статьях:
Продолжение в следующей статье!