Веб-мастерская Ларисы ВоронинойОформление таблиц с помощью CSS. Таблицы CSS.
WEB-мастерская Ларисы Ворониной logo

Оформление таблиц с помощью CSS. Ноя 2 2016


CSS даёт нам практически  неограниченные возможности  для красивого оформления таблиц. В этом уроке мы рассмотрим  как стилизовать рамку таблицы,  задать размеры и добавить фон.

Границы и рамки таблицы.

Чтобы задать таблице рамку, используется свойство border. В значениях этого свойства мы указываем ширину рамки в пикселях, стиль рамки и её цвет.

Стили рамки показаны на рисунке.
tablicy-css

table {
border: 1px solid #000;
}

Чтобы задать рамку ячейкам, используется то же свойство border, но для элемента td.

td {
border: 1px solid #000;
}

Элементы table и td можно перечислить через запятую, тогда рамка появится, как для всей таблицы, так и для каждой ячейки.

table, td {
border: 1px solid #000;
}

tablicy-css

Если мы хотим убрать промежутки между ячейками, используем свойство border-collapse со значением collapse.

table, td{
border-collapse: collapse;
border: 1px solid #000;
}

tablicy-css

Чтобы внешнюю рамку сделать жирнее, для элемента table просто увеличиваем ширину рамки.

table{
border-collapse: collapse;
border: 2px solid #000;
}
td{
border: 1px solid #000;
}

tablicy-css

Размеры таблицы.

Ширина таблицы и ячеек задаётся свойством  width. Значение выставляется либо в пикселях либо в процентах.

table{
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
}
td{
border: 1px solid #000;
}

Если мы хотим первый столбец сделать шире других, то для элемента td используем псевдокласс first-child, и для него прописываем ширину столбца. (Для последнего столбца last-child).

table{
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
}
td{
border: 1px solid #000;
}
td:first-child {
width: 200px;
}

tablicy-css

Чтобы сделать второй столбец шире других, используем для элемента td  псевдокласс nth-child(2).

table{
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
}
td{
border: 1px solid #000;
}
td:nth-child(2) {
width: 200px;
}

Как вы уже догадались, чтобы сделать 3-й столбец отличный от других используем nth-child(3). И т.д.

Высота рядов регулируется с помощью свойства padding для элемента td.  С помощью свойства padding указывается расстояние  от границы элемента до содержимого элемента.

table{
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
}
td{
border: 1px solid #000;
padding: 15px;
}

В нашем примере – это расстояние от границы элемента td до текста внутри элемента td, и составляет оно 15px со всех сторон.
tablicy-css

Цвет фона таблицы.

Общий фон таблицы определяется свойством background, значением которого будет код цвета RGB.

table{
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
background: #00c0ff;
}
td{
border: 1px solid #000;
padding: 15px;
}

tablicy-css

Если мы хотим сделать столбцы разных цветов, то используем для элемента td псевдокласс nth-child(1)(каждому номеру будет соответствовать свой столбец), и для каждого псевдокласса прописываем background.

td:nth-child(1) {
background: #00c0ff;
}
td:nth-child(2) {
background: #4652c5;
}

tablicy-css

Чтобы ряды сделать разными цветами прописываем точно такой же код, но только для элемента tr.

tr:nth-child(1) {
background: #00c0ff;
}
tr:nth-child(2) {
background: #4652c5;
}

tablicy-css

Если нам нужно, чтобы все чётные столбцы были одного цвета, а нечётные другого, то используем  тот же псевдокласс  nth-child но со значениями odd (все нечётные элементы) и even (все чётные элементы).

tr:nth-child(even) {
background: #00c0ff;
}
tr:nth-child( odd) {
background: #4652c5;
}

tablicy-css