Всем привет. Сегодня мы разберемся стили для таблиц. Некоторые из этих свойств мы уже рассматривали в других записях.
Для того чтобы задать ширину и высоту таблице пропишем свойства width
и height
.
table {
width: 100%;
height: 300px;
}
Для того чтобы задать границы таблице пропишите свойство border
.
В зависимости от выбранного элемента граница задаётся: таблице, строкам в таблице и элементам из строки. Про элементы таблицы вы можете прочитать здесь — http://prog-time.ru/uroki-html-css-sozdanie-tablitsy/
table{
border: 1px solid #000:
}
tr{
border: 1px solid red;
}
th, td {
border: 1px solid green;
}
Так же как и обычным элементам таблице можно прописать свойство наружного и внутреннего отступа — margin
и padding
.
table{
padding: 10px
}
caption-side
— добавляет заголовок к таблице
top | Заголовок таблицы располагается над таблицей. Значение по умолчанию. |
bottom | Располагает заголовок под таблицей. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
<caption>Таблица крутости</caption>
caption {
caption-side: bottom;//расположение заголовка(снизу)
text-align: right;//расположение текста
padding: 10px 0;//внутренний отступ
font-size: 14px;//размер шрифта
}
Таблица крутости
Самые крутые сайты |
Рейтинг |
Внешний вид |
Крутость |
Общий балл |
Prog-Time |
99/100 |
6.0 |
!!!100%!!! |
10/10 |
YouTube |
83/100 |
4.2 |
85% |
9/10 |
Вконтакте |
70/100 |
3.0 |
75% |
8/10 |
border-collapse
— задает промежуток между ячейками
separate | Рамки ячеек располагаются раздельно. |
collapse | Рамки ячеек сливаются в одну, а промежутки между рамками убираются. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
border-spacing
— задает расстояние между ячейками
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Здесь значение задается как и в тегах типа margin и padding. Первое значение задает отступ по вертикали, то есть сверху и снизу, второе значение задает отступ по горизонтали — сверху и снизу.
table {
border-collapse: separate;
border-spacing: 10px 20px;
}
Таблица крутости
Самые крутые сайты |
Рейтинг |
Внешний вид |
Крутость |
Общий балл |
Prog-Time |
99/100 |
6.0 |
!!!100%!!! |
10/10 |
YouTube |
83/100 |
4.2 |
85% |
9/10 |
Вконтакте |
70/100 |
3.0 |
75% |
8/10 |
empty-cells
— скрывает пустые ячейки таблицы
show | Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое. |
hide | Если все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none. |
initial | Устанавливает значение свойства в значение по умолчанию. |
inherit | Наследует значение свойства от родительского элемента. |
Для того чтобы скрыть пустые ячейки таблицы пропишем следующий код.
table {
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
Самые крутые сайты |
Рейтинг |
Внешний вид |
Крутость |
Общий балл |
Prog-Time |
99/100 |
6.0 |
!!!100%!!! |
10/10 |
YouTube |
83/100 |
4.2 |
|
9/10 |
Вконтакте |
70/100 |
|
75% |
8/10 |