CSS даёт нам практически неограниченные возможности для красивого оформления таблиц. В этом уроке мы рассмотрим как стилизовать рамку таблицы, задать размеры и добавить фон.
Границы и рамки таблицы.
Чтобы задать таблице рамку, используется свойство border. В значениях этого свойства мы указываем ширину рамки в пикселях, стиль рамки и её цвет.
Стили рамки показаны на рисунке.
border: 1px solid #000;
}
Чтобы задать рамку ячейкам, используется то же свойство border, но для элемента td.
border: 1px solid #000;
}
Элементы table и td можно перечислить через запятую, тогда рамка появится, как для всей таблицы, так и для каждой ячейки.
border: 1px solid #000;
}
Если мы хотим убрать промежутки между ячейками, используем свойство border-collapse со значением collapse.
border-collapse: collapse;
border: 1px solid #000;
}
Чтобы внешнюю рамку сделать жирнее, для элемента table просто увеличиваем ширину рамки.
border-collapse: collapse;
border: 2px solid #000;
}
td{
border: 1px solid #000;
}
Размеры таблицы.
Ширина таблицы и ячеек задаётся свойством width. Значение выставляется либо в пикселях либо в процентах.
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
}
td{
border: 1px solid #000;
}
Если мы хотим первый столбец сделать шире других, то для элемента td используем псевдокласс first-child, и для него прописываем ширину столбца. (Для последнего столбца last-child).
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
}
td{
border: 1px solid #000;
}
td:first-child {
width: 200px;
}
Чтобы сделать второй столбец шире других, используем для элемента td псевдокласс nth-child(2).
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 указывается расстояние от границы элемента до содержимого элемента.
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
}
td{
border: 1px solid #000;
padding: 15px;
}
В нашем примере – это расстояние от границы элемента td до текста внутри элемента td, и составляет оно 15px со всех сторон.
Цвет фона таблицы.
Общий фон таблицы определяется свойством background, значением которого будет код цвета RGB.
border-collapse: collapse;
border: 2px solid #000;
width: 300px;
background: #00c0ff;
}
td{
border: 1px solid #000;
padding: 15px;
}
Если мы хотим сделать столбцы разных цветов, то используем для элемента td псевдокласс nth-child(1)(каждому номеру будет соответствовать свой столбец), и для каждого псевдокласса прописываем background.
background: #00c0ff;
}
td:nth-child(2) {
background: #4652c5;
}
Чтобы ряды сделать разными цветами прописываем точно такой же код, но только для элемента tr.
background: #00c0ff;
}
tr:nth-child(2) {
background: #4652c5;
}
Если нам нужно, чтобы все чётные столбцы были одного цвета, а нечётные другого, то используем тот же псевдокласс nth-child но со значениями odd (все нечётные элементы) и even (все чётные элементы).