Уроки 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-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