HTML + CSS Стили для таблицы

Уроки HTML+CSS: Стили для таблиц

Всем привет. Сегодня мы разберемся стили для таблиц. Некоторые из этих свойств мы уже рассматривали в других записях.
Для того чтобы задать ширину и высоту таблице пропишем свойства 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-Time99/1006.0!!!100%!!!10/10
YouTube83/1004.285%9/10
Вконтакте70/1003.075%8/10

border-collapse – задает промежуток между ячейками

separateРамки ячеек располагаются раздельно.
collapseРамки ячеек сливаются в одну, а промежутки между рамками убираются.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

border-spacing – задает расстояние между ячейками

initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Здесь значение задается как и в тегах типа margin и padding. Первое значение задает отступ по вертикали, то есть сверху и снизу, второе значение задает отступ по горизонтали – сверху и снизу.

table {
border-collapse: separate;
border-spacing: 10px 20px;
}
Таблица крутости
Самые крутые сайтыРейтингВнешний видКрутостьОбщий балл
Prog-Time99/1006.0!!!100%!!!10/10
YouTube83/1004.285%9/10
Вконтакте70/1003.075%8/10

empty-cells – скрывает пустые ячейки таблицы

showРамка и фон пустой ячейки будут отрисовываться так же, как для ячейки таблицы, имеющей содержимое.
hideЕсли все ячейки строки пусты, то вся строка отображается так, если бы было задано значение display: none.
initialУстанавливает значение свойства в значение по умолчанию.
inheritНаследует значение свойства от родительского элемента.

Для того чтобы скрыть пустые ячейки таблицы пропишем следующий код.

table { 
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
Самые крутые сайтыРейтингВнешний видКрутостьОбщий балл
Prog-Time99/1006.0!!!100%!!!10/10
YouTube83/1004.29/10
Вконтакте70/10075%8/10

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

Оставить комментарий

avatar
  Подписаться  
Уведомление о