Уроки 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 – добавляет заголовок к таблице

<caption>Таблица крутости</caption>

caption { 
   caption-side: bottom;//расположение заголовка(снизу)
   text-align: right;//расположение текста
   padding: 10px 0;//внутренний отступ
   font-size: 14px;//размер шрифта 
} 

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

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

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

table {
border-collapse: separate;
border-spacing: 10px 20px;
}

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

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

table { 
    border: 1px solid #69c; 
    border-collapse: separate; 
    empty-cells: hide; 
}