- Як зробити рамку для таблиці
- Прибрати проміжки від осередків до країв таблиці
- border-collapse: схлопування кордонів осередків
Як зробити рамку для таблиці
Вид, товщину, колір рамки таблиці визначає властивість border . Його можна вказати в атрибуті style.
Осередок Осередок Осередок Осередок <table style = "border: 1px solid red;" > <Tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>Встановити рамку кожному осередку також можна за допомогою атрибута style. Але краще стиль винести в тег style або файл .css: коду менше, можливості ширше, зручності більше (щоб змінити колір рамки у всіх осередків, досить поміняти значення один раз).
Осередок Осередок Осередок Осередок <table style = "border: 1px solid red;" > <Tr> <td style = "border: 1px solid red;" > Осередок <td style = "border: 1px solid red;" > Осередок <tr> <td style = "border: 1px solid red;" > Осередок <td style = "border: 1px solid red;" > Осередок </ table> <style> .raz, .raz td {border: 1px solid red; } </ Style> <table class = "raz"> <tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>Прибрати проміжки від осередків до країв таблиці
Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок Осередок <style> .raz {border-spacing: 0; padding: 0 2em 3em 0; } .Raz, .raz td {position: relative; border: 1px solid red; } .Raz td: nth-child (2) {left: 1em; } .Raz td: nth-child (3) {left: 2em; } .Raz tr: nth-child (2) td {top: 1em; } .Raz tr: nth-child (3) td {top: 2em; } .Raz tr: nth-child (4) td {top: 3em; } </ Style> <table class = "raz"> <tr> <td> Осередок <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок <td> Осередок </ table>Приховати порожні клітинки в таблиці c border-collapse: collapse; можна за допомогою псевдокласів: empty або: blank.
border-collapse: схлопування кордонів осередків
separate у кожного осередку і таблиці в цілому своя межа, ігнорується властивість border у thead, tfoot, tbody і tr collapse між осередками і контейнером єдиний кордон, відсутні подвійні рамки таблиці, ігноруються властивості border-spacing, empty-cells, padding у table initial separate inherit успадковує значення батька unset успадковує значення батька Осередок Осередок Осередок Осередок <style> .raz {border-collapse: collapse; } .Raz, .raz td {border: 1px solid red; } .Raz tbody, .raz tr, .raz td {margin: 1em; } .Raz tbody, .raz tr {padding: 1em; } </ Style> <table class = "raz"> <tbody> <tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>Жирні зовнішні межі таблиці
Осередок Осередок Осередок Осередок <style> .raz {border-collapse: collapse; border: 4px solid red; } .Raz td {border: 1px solid red; } </ Style> <table class = "raz"> <tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>Таблиця без кордонів аки сітка без зовнішньої рамки
Осередок Осередок Осередок Осередок <style> .raz {border-collapse: collapse; border-style: hidden; } .Raz td {border: 1px solid red; } </ Style> <table class = "raz"> <tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>Властивість border у tr
Тема Тема Осередок Осередок Осередок Осередок <style> .raz {border-collapse: collapse; } .Raz tr: first-child {border-bottom: 1px solid red; } .Raz th + th, .raz td + td {padding-left: 1em; } </ Style> <table class = "raz"> <tr> <th> Тема <th> Тема <tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>Властивість padding у table при border-collapse: collapse;
Осередок Осередок Осередок Осередок <style> .raz {border-collapse: collapse; outline: 1px solid red; outline-offset: 2px; margin: 3px; } .Raz, .raz td {border: 1px solid red; } </ Style> <table class = "raz"> <tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>Відступи всередині осередку таблиці
Відстань від вмісту до краю комірки визначає властивість padding.
Осередок Осередок Осередок Осередок <style> .raz {border-collapse: collapse; } .Raz td {border: 1px solid red; padding: .3em 1em; } </ Style> <table class = "raz"> <tr> <td> Осередок <td> Осередок <tr> <td> Осередок <td> Осередок </ table>