Задає відстань між межами осередків таблиці. Атрибут border-spacing не працює, якщо для таблиці встановлено параметр border-collapse зі значенням collapse .
Синтаксис
border-spacing: значення [значення]
Аргументи
Одне значення встановлює одночасно відстань по вертикалі та горизонталі між межами осередків. Якщо аргументів два, перше визначає горизонтальне відстань, а друге - вертикальне.
| 1 | 2 |
| 3 | 4 |
Результат цього прикладу показаний ні рис. 1.
Рис. 1. Використання параметра border-spacing
Примітка
Якщо до тегу
| і | . Фіксувати висоту за допомогою властивості height не рекомендується. Th, td (padding: 10px 15px;) 3. Як поставити фон таблиціЗа замовчуванням фон таблиціта осередків прозорий. Якщо сторінка або блок, що містять таблицю, мають фон, він просвічуватиметься крізь таблицю. Якщо фон заданий і для таблиці та для осередків, то в місцях накладання фону таблиці та осередків буде видно фон тільки осередків. Як фон для таблиці в цілому та її осередків можуть виступати: 4. Стовпці таблиціМодель CSS таблиць орієнтована в основному на рядки (ряди), що формуються за допомогою тега | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Company | Q1 | Q2 | Q3 | Q4 |
|---|
Рис. 2. Приклад відображення заголовка під таблицею 6. Як прибрати проміжок між рамками осередків
Рамки осередків таблиці за замовчуванням розділені невеликим інтервалом. Якщо задати таблиці border-collapse: collapse , то проміжок забереться. Властивість успадковується.
Синтаксис
Table (border-collapse: collapse;) 
Рис. 3. Приклад таблиць зі зливаються та роздільними рамками осередків
7. Як збільшити проміжок між рамками осередків
За допомогою властивості border-spacing можна змінювати відстань між рамками осередків. Ця властивість застосовується до таблиці загалом. успадковується.
Синтаксис
Table (border-collapse: separate; border-spacing: 10px 20px;) table (border-collapse: separate; border-spacing: 10px;) 
Рис. 4. Приклад таблиць із збільшеними проміжками між рамками осередків
8. Як приховати порожні комірки таблиці
Властивість empty-cells приховує чи показує порожні комірки. Діє лише на комірки, які не містять будь-якого контенту. Якщо осередку заданий фон, а таблиці задано table (border-collapse: collapse;) , то осередок нічого очікувати прихована. успадковується.
| Company | Q1 | Q2 | Q3 |
|---|---|---|---|
| Microsoft | 20.3 | 30.5 | |
| 50.2 | 40.63 | 45.23 |
Рис. 5. Приклад приховування порожнього осередку таблиці 9. Компонування макету таблиці за допомогою властивості table-layout
Компонування макету таблиці визначається одним із двох підходів: фіксований макет або автоматичний макет. Під компонуванням у цьому випадку мається на увазі як розподіляється ширина таблиці між шириною осередків. Властивість не успадковується.
Синтаксис
Table (table-layout: fixed;)
10. Найкращі макети таблиць
1. Горизонтальний мінімалізм
Горизонтальні таблиці - це таблиці, текст яких читається по горизонталі. Кожна сутність є окремим рядком. Ви можете оформити подібні таблиці у мінімалістському стилі, помістивши двопіксельний кордон під назвою th . 
| Employee | Salary | Bonus | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Bob |
| Josephin Tan | $150 | - | Annie |
| Joyce Ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
При великій кількості рядків такий дизайн таблиць ускладнює їх читання. Для вирішення цієї проблеми можна додати однопіксельний кордон під усіма елементами td. 
Td ( border-bottom: 1px solid #ccc; color: #669; padding: 9px 8px; transition: .3s linear; )/*інший код - як у прикладі вище*/
Додавання ефекту:hover для елемента tr полегшить читання таблиць, оформлених у мінімалістському стилі. При наведенні курсору миші на комірку, інші комірки того ж рядка виділяються одночасно, що спрощує процес відстеження інформації, якщо таблиці мають кілька стовпців. 
Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:hover td (background: #e8edff ;)
2. Вертикальний мінімалізм
Незважаючи на те, що такі таблиці використовуються рідко, проте вертикально орієнтовані таблиці корисні для категоризації або порівняння опису об'єктів, представлених колонкою. Можна оформити їх у мінімалістському стилі, додавши прогалину, що розділяє стовпці. 
Th ( font-weight: normal; border-bottom: 2px solid #6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: #039; padding: 8px 2px; ) td ( border- right: 30px solid #fff; border-left: 30px solid #fff; color: #669; padding: 12px 2px;
3. «Коробковий» стиль
Найбільш надійним стилем для оформлення таблиць всіх типів є так званий «коробковий» стиль. Достатньо підібрати хорошу колірну гаму, а потім задати колір фону для всіх осередків. Не забудьте підкреслити різницю між рядками, встановивши межі як роздільник. 
Th ( font-size: 13px; font-weight: normal; background: #b9c9fe; border-top: 4px solid #aabcfe; border-bottom: 1px solid #fff; color: #039; padding: 8px; ) td ( background : #e8edff; border-bottom: 1px solid #fff; color: #669; border-top: 1px solid transparent; padding: 8px;
Найскладніше — знайти ту кольорову гаму, яка гармонійно поєднуватиметься з вашим сайтом. Якщо сайт навантажений за графіком та дизайном, то вам буде досить важко використовувати цей стиль. 
Table ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; max-width: 70%; width: 70%; text-align: center; border-collapse: collapse border-top: 7px solid #9baff1; border-bottom: 7px solid #9baff1; ) th ( font-size: 13px; font-weight: normal; background: #e8edff; border-right: 1px solid #9baff1; border- left: 1px solid #9baff1; color: #039; padding: 8px; ) td ( background: #e8edff; border-right: 1px solid #aabcfe; ;)
4. Горизонтальна зебра
Зебра-таблиця виглядає досить привабливою та зручною. Додатковий колір фону може служити візуальною підказкою для людей при читанні таблиці. 
Th ( font-weight: normal; color: #039; padding: 10px 15px; ) td ( color: #669; border-top: 1px solid #e8edff; padding: 10px 15px; ) tr:nth-child(2n) ( background: #e8edff;)
5. Газетний стиль
Для досягнення так званого газетного ефекту, можна застосувати межі елементів таблиці і пограти з осередками всередині. Легкий, мінімалістичний газетний стиль може виглядати так: обіграйте колірну гаму, додайте межі, відступи, різні фони, та ефект: hover при наведенні на рядок. 
Table (border: 1px solid #69c;) th ( font-weight: normal; color: #039; border-bottom: 1px dashed #69c; padding: 12px 17px; ) td ( color: #669; padding: 7px 17px; ) tr:hover td (background: #ccddff;)
Table (border: 1px solid #69c;) th ( font-weight: normal; color: #039; padding: 10px; ) td ( color: #669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff; ) tr:hover td (background: #99bcff;)
Table (border: 1px solid #6cf;) th ( font-weight: normal; font-size: 13px; color: #039; text-transform: uppercase; border-right: 1px solid #0865c2; border-top: 1px solid #0865c2; border-left: 1px solid #0865c2; border-bottom: 1px solid #fff; padding: 20px; ) td ( color: #669; border-right: 1px dashed #6cf;
6. Фон таблиці
Якщо ви шукаєте швидкий та унікальний спосіб оформлення таблиці, виберіть привабливе зображення або фото, що стосуються теми таблиці та встановіть її тлом таблиці. 
Png") 98% 86% no-repeat; ) th ( font-weight: normal; font-size: 14px; color: #339; padding: 10px 12px; background: white; ) td ( color: #669; border- top: 1px solid white; padding: 10px 12px; background: rgba(51, 51, 153, .2); transition: .3s; )
Всім привіт! Отже, тепер ви вмієте створювати елементарні таблиці, що складаються з такої кількості рядків та стовпців, яка потрібна. Не погано, не погано. А тепер поговоримо про оформлення цих таблиць.
В минулому уроці таблиці відображалися без кордонів. І, погодьтеся, виглядає так собі, навіть і табличкою-то не назвеш. Щоб зробити межі таблиці в HTML, слід додати до тега Отже, зробіть межі для таблиці. Наприклад, для вже наявної у нас:
Результат у браузері: У свою чергу, щоб прибрати межі таблиці HTML, або ще можна сказати, зробити їх невидимими, потрібно атрибуту borderвстановити значення 0
. Після цих нехитрих дій рамка забереться. Атрибут дозволяє створити, але не керувати межами. Він дозволяє лише змінювати їхню товщину. Тому зараз мова піде про CSS, властивості якого уможливлюють за допомогою borderстворювати різні межі, як усередині кожного осередку, і зовнішні, навколо таблиці загалом. Давайте подивимося як застосовувати CSS для створення зовнішніх та внутрішніх меж таблиці.
Результат у браузері: Тепер давайте додамо межі і для кожного осередку. Для цього просто доповнимо стилі:
Результат у браузері: Погодьтеся, що межа, задана за допомогою CSS, має такий зовнішній вигляд, як хотілося б. Безперечно, з погляду естетики є над чим працювати. На сторінці браузера можна побачити, що за замовчуванням він відображає межі таблиць та осередків окремо. Приклад це демонструє. Однак, від таких ось кордонів, які називаються подвійними, можна позбутися, якщо використовувати CSS-властивість border-collapse. На практиці це виглядає так: Table ( border: solid 1px blue; border-collapse: collapse; ) ... Як результат - забирається відстань між осередками: Значення collapse, приписане атрибуту border, дозволяє забрати подвійні рамки. Як можна побачити, результатом є "схлопування" меж осередків, розташованих поруч, а також рамок осередків та зовнішньої рамки таблиці. Що стосується останньої, то вона може піти зовсім. І якщо є необхідність її відображення, необхідно збільшувати її ширину. Таким чином ми позбулися роздільників у таблиці. А в наступному уроці ми поговоримо про те, як можна задавати вертикальні та горизонтальні межі. Всім удачі! CSS дозволяє встановити не тільки стиль межі таблиці, а й стиль меж окремих осередків. Так як у кожного осередку свої межі, то між сусідніми осередками кордон виходить здвоєний. Але є можливість об'єднати межі сусідніх осередків в одну. І тому властивість border-collapse . Воно набуває значення: border-collapse: separate - у кожного осередку своя межа (за замовчуванням) border-collapse: collapse – спільний кордон border-collapse: inherit – значення приймається від батьківського елемента Наприклад створимо таблицю і задаємо рамку осередків всіх таблиць, що будуть на сторінці. Спочатку не будемо нічого міняти, щоб подивитися, як таблиця виглядатиме: Стиль: 1 Після додавання рамок до осередків таблиці стало помітно, що вміст осередків надто близько розташований до країв. Для додавання вільного простору між краями осередків та їх вмістом можна скористатися властивістю padding: Th, td ( padding: 7px; ) Спробувати » Розмір таблиці залежить від вмісту, але часто виникають ситуації, коли таблиця виявляється занадто вузькою і виникає необхідність її розтягнути. Ширину та висоту таблиці можна змінювати за допомогою властивостей width і height , задаючи потрібні розміри або самої таблиці або осередків: Table ( width: 70%; ) th ( height: 50px; ) Спробувати » За замовчуванням текст у заголовних осередках таблиці вирівнюється по центру, а звичайних осередках текст вирівняний по лівому краю, використовуючи властивість text-align можна керувати вирівнюванням тексту по горизонталі. CSS властивість vertical-align дозволяє керувати вирівнюванням текстового вмісту по вертикалі. За промовчанням текст вирівняний вертикально по центру осередків. Вертикальне вирівнювання можна перевизначити за допомогою одного із значень властивості vertical-align: Під час перегляду великих таблиць, що містять багато рядків з великою кількістю інформації, важко відстежити, які дані відносяться до конкретного рядка. Щоб допомогти користувачам зорієнтуватися, можна використовувати два різних кольори фону по черзі. Для створення описаного ефекту можна використовувати селектор class, додаючи його до кожного другого рядка таблиці:
Додавати атрибут class до кожного другого рядка є досить стомлюючим заняттям. У CSS3 був доданий псевдо-клас: nth-child, що дозволяє вирішити цю проблему альтернативним шляхом. Тепер ефекту чергування можна досягти виключно засобами CSS, не вдаючись до зміни розмітки HTML документа. За допомогою псевдо-класу:nth-child можна вибрати всі парні або непарні рядки таблиці, використовуючи одне з ключових слів: even (парні) або odd (непарні): Tr:nth-child(odd) ( background-color: #EAF2D3; ) Спробувати » Ще одним способом підвищення зручності читання табличних даних є зміна фонового кольору рядка при наведенні на неї курсора миші. Це допоможе виділити потрібний вміст таблиці та підвищить візуальне сприйняття даних. Реалізувати такий ефект дуже просто, для цього потрібно додати псевдо-клас:hover до селектора рядка таблиці та задати потрібний колір тла: Tr:hover ( background-color: #E0E0FF; ) Спробувати » Вирівнювання HTML таблиці по центру можливе лише у тому випадку, якщо ширина таблиці менша, ніж ширина її батьківського елемента. Щоб вирівняти таблицю по центру, треба скористатися властивістю margin, задавши йому мінімум два значення: перше значення відповідатиме за зовнішній відступ таблиці зверху та знизу, а друге – за автоматичне вирівнювання по центру: Table ( margin: 10px auto; ) Спробувати » Якщо вам потрібні різні відступи зверху та знизу таблиці, то можна задати властивості margin три значення: перше буде відповідати за відступ зверху, друге за вирівнювання по горизонталі, а третє за відступ знизу: Table ( margin: 10px auto 30px; )
атрибут border, Надавши йому значення відмінне від нуля.
Верхній лівий осередок Верхній правий осередок
Нижній лівий осередок Нижній правий осередок
Як прибрати межі таблиці
Для цього видалимо у нашій таблиці атрибут border і додамо стилі:
Верхній лівий осередок
Верхній правий осередок
Нижній лівий осередок
Нижній правий осередок
Як прибрати відступи між осередками у таблиці HTML
2
3
4
5
6
Ім'я Прізвище Гомер Сімпсон Мардж Сімпсон
Спробувати Ім'я Прізвище Гомер Сімпсон Мардж Сімпсон Розмір таблиці
Вирівнювання тексту
Спробувати Ім'я Прізвище Гомер Сімпсон Мардж Сімпсон Чергування фонового кольору рядків таблиці
СпробуватиІм'я Прізвище Положення Гомер Сімпсон батько Мардж Сімпсон матір Барт Сімпсон син Ліза Сімпсон дочка Зміна фону рядка при наведенні курсору
Вирівнювання таблиці по центру