Відображення меж таблиці html-сторінки

Межі таблиці html легко змінити за допомогою засобів css. Налаштування їх відображення здійснюється за рахунок властивостей: collapse і spacing. Для редагування вигляду таблиці використовують групу властивостей border. Вона дозволяє налаштувати ширину, колір, присутність/відсутність кордонів, їх стиль і інші особливості відображення.

Основи

Таблиця без вказівки стилів буде виглядати як структурований текст без кордонів. Таблиці в html будується завдяки тегам: tr для рядків; th для заголовків; td для стовпців.

Head
Head
Head
Cell
Cell
Cell
Cell
Cell
Cell


Розмір і шрифт тексту, фон, відступи від краю вікна браузера задані в css в контейнері body.

  body {
 font-family: Helvetica, Sans-serif; 
 font-size: 5vw; 
 color: black; 
 background-color: rgba(228228245); 
 padding: 20vh; 
}  

За допомогою стилів оформляють вигляд матриці. Властивість border дозволяє прописати значення товщини, виду і кольору межі html-таблиці.

  {
 border-width: 2vw; 
 border-style: dotted; 
 border-color: skyblue; 
}  

Скорочено задається за шаблоном border: width style color.

  {
 border: 1px solid #4c6ea1; 
}  

Для певної сторони задається за шаблоном border-top(/right/bottom/left)-style(/color/width/radius).

  {
 border-top-color: darkblue; 
}  

Padding встановлює відступи всередині комірки від тексту до рамки, text-align задає вирівнювання.

За допомогою стилів оформляють вигляд таблиці. Властивість border дозволяє прописати значення товщини, стилю і кольору рамки. Padding встановлює відступи від тексту, text-align задає вирівнювання.

  th, td {
 border: 1vw solid #4c6ea1; 
 padding: 1vw; 
 text-align: left; 
}  

Без рамок

Використовувати border або окремо прописувати border-color, -width і -style не обов'язково, так як зробити html-таблиці без кордонів можна з повноцінним оформленням. Наприклад, наступний код задає фон, відступи і округлені кути (остання матриця без внутрішніх і зовнішніх ліній).

  table {
 text-align: left; 
 background-color: rgba(228228245); 
 border-top-left-radius: 15em 1em; 
 border-bottom-right-radius: 15em 1em; 
} 
 td, th {
 padding: 1.5 vw;  
}  

Завдяки можливості задати фон для кожної клітинки, таблиця без кордонів може виглядати так, ніби у неї вони є.

  table {
 text-align: left; 
 background-color: rgba(228228245); 
 width: 70vw; 
 border-spacing: 2vh 2vh; 
} 
 td, th {
 padding: 1.5 vh; 
} 
 td {
 background-color: rgba(247247255); 
}  

Можна прибрати межі html-таблиці, залишивши внутрішні. Для цього, наприклад, прописують властивість border для комірок (tr), встановлюють на суміжних сторонах загальні рамки (collapse) і забороняють малювати лінії навколо матриці (hidden). Остання дія приховає лінії осередків, які при включеному collapse виявляються там же, де і зовнішні краї таблиці.

  table {
 text-align: center; 
 border-collapse: collapse; 
 background-color: rgba(228228245); 
 border-radius: 50%; 
 width: 29vh; 
 height: 10vh; 
 border-style: hidden; 
} 
 td {
 padding: 1.5 vh; 
 border: 0.5 vh solid black; 
}  

Collapse і separate

Одне з основних властивостей table в html — border-collapse — визначає, як будуть відображатися межі клітинок. Властивість може мати одне значення з трьох: collapse, separate, inherit.

  table { 
 border-collapse: collapse; 
}  

За умовчанням встановлено значення separate, тому кожна клітинка буде мати свою межу. Завдяки collapse можна злити лінії осередків, щоб їх вміст розділяла одна рамка. На картинці представлено три описаних вище стану кордонів: без стилів; зі значенням border-collapse за замовчуванням; зі значенням border-collapse, залишає між осередками загальну лінію.

Подвійні рамки

Властивість collapse дозволяє зробити межі клітинок в html-таблиці як незалежними один від одного, так і загальними. З ним часто використовують властивість border-spacing, що регулює відстань між рамками осередків. Можна вказати як горизонтальний, так і вертикальний інтервал.

  table {
 border-spacing: 0.5 vw 1vw; 
}  

Першим значенням вказується відстань між гніздами по горизонталі, друге — по вертикалі. Якщо рамка задана і для самої таблиці, то відстань від неї до осередків формується також властивістю spasing, але на нього може впливати ще padding матриці. У випадках коли у матриці є фон, звільнене простір між осередками буде заповнено їм.

  table {
 border-spacing: 0.5 vw 1vw; 
 border: 1vw solid #4c6ea1; 
 padding: 1vw; 
 background-color: black; 
} 
 td, th {
 border: 1vw solid #4c6ea1; 
 padding: 0.3 vw; 
 text-align: left; 
 background-color: white; 
}  

Пусті клітинки

Якщо для таблиці не задано об'єднання кордонів осередків, властивість empty-cells дозволяє відобразити їх лінії і фон, які вважаються порожніми (позначені як visibility або не мають символів). Якщо потрібно показати рамки та фон кожної клітинки, властивості задають значення show.

  table {
 empty-cells: show; 
} 
  

Значення hide ховає кордону і фон порожніх блоків. Якщо всі осередки ряду порожні, рядок має нульову висоту і тільки одну вертикальну лінію.

  table {
 border-spacing: 0.5 vw 1vw; 
 border: 0.1 vw solid #4c6ea1; 
 padding: 0.5 vw; 
 background-color: rgba(3331171 012); 
 empty-cells: hide; 
} 
 td, th {
 border: 0.3 vw solid #4c6ea1; 
 padding: 0.5 vw; 
 text-align: left; 
  background-color: white; 
}  

Атрибут

Для виділення меж груп елементів (комірок, стовпців, рядків, груп рядків або стовпців) існує атрибут rules. Його значення прописується безпосередньо в html тегу table.

Він дозволяє вибірково промальовувати рамки елементів. Досить вказати атрибут в html, це створить внутрішні лінії між комірками. Кордон html-таблиці доведеться вказувати вручну в css.

Head
Head
Head
Cell
Cell
Cell
Cell
Cell
Cell


  table {
 border-top: 1vw solid #486743; 
 font-size: 5vw; 
} 
 
 th, td {
 padding: 2vw; 
}  

Так, на першій картинці представлена чиста робота атрибуту без додаткового оформлення рамок через table. На другій картинці домальована верхня лінія, яка встановлена через інструкцію.

  table {
 border-top: 1vw doted #486743; 
} 
   

У атрибута може бути кілька значень. All створює кордону між клітинками рамки товщиною, рівній 1px. Cols створює лінії між стовпцями, rows - між рядками, none пере краю. На малюнку наведено приклади таблиці зі значеннями all і rows.

Змінити колір меж осередків і ширину рамки при використанні атрибута rules можна з допомогою border та bordercolor.

Конфлікти стилів

Комірками, рядками, стовпцями та групами елементів можуть бути задані власні значення кордонів. При цьому вони можуть відрізнятися за трьома параметрами: стилю, товщині і кольору.

В режимі collapse виникають конфлікти офрмления. З-за того, що на одну кордон може поширюватися правило двох різних осередків, виникає проблема вибору стилю, який буде пріоритетним. Як пише Е. Мальчук, виграє самий "помітний" (крім hidden).

1. Якщо у одного з елементів у властивості border-style для спірної межі вказано значення hidden, цей стиль перемагає. Hidden має вищий пріоритет.
2. Найменший вага має значення none. Воно теж диктує лінії не відображатися, але щоб вказівку виповнилося, всі елементи цієї лінії повинні мати це (none) правило.
3. Між тонкими і товстими кордонами більший пріоритет мають товсті.
4. При однакових межах, але різних стилях завжди перемагає суцільний подвійний (double), за ним йде solid, пунктирний (dashed), dotted.
5. Якщо відмінності полягають тільки в квітах, вигляд самого маленького компонента завжди вище (оформлення комірки має більший пріоритет, ніж рядка, а рядки вище, ніж таблиці).

Ілюстрація конфлікту

Проілюструвати конфлікт стилів легко на вже розглянутої таблиці. Досить додати кілька класів клітинок і прописати для них оформлення. Html приймає вигляд:

Head
Head
Head
Cell
Cell
Cell
Cell
Cell
Cell


Відповідний йому css.

  body {
 font-family: Helvetica, Sans-serif; 
 font-size: 5vw; 
 color: black; 
 margin: 0; 
 width: 80vw; 
 background-color: white; 
 padding: 3vw; 
} 
 
 table {
 background-color: rgba(3331171 012); 
 padding: 0.5 vw; 
 border-collapse: collapse;  
 border-spacing: 0.5 vw 1vw; 
 border-style: hidden; 
} 
 
 th {
 padding: 1vw; 
 text-align: left; 
 border: 0.1 vw solid #4c6ea1; 
} 
 
 td {
 padding: 1vw; 
 border: 0.2 vw dotted #4c6ea1; 
} 
 
 .second_cell {
 border: 001 vw solid #4c6ea1; 
} 
 
 .third_cell {
 border: 001 vw double red; 
}  

Стилі рамок

Оформлення кордону можна встановити для кожної з сторін клітинки окремо. Для цього достатньо в border-style вказати не одне значення, а перерахувати чотири, відповідно сторонам осередку.

  th, td {
 padding: 1vw; 
 text-align: left; 
  border-width: 0.5 vw; 
 border-color: darkred; 
 border-style: dotted; 
} 
 
 
 .seven {
 border-top-color: skyblue; 
 border-top-style: solid; 
 border-right-width: 2vw; 
 border-bottom-style: dashed; 
 border-left-style: hidden; 
} 
  

Вказати дані в одну рядок можна, задавши від одного до чотирьох різних значень. Кожне традиційно стає інструкцією для однієї з сторін.

• Якщо поставити два значення, перше буде відповідати за нижню і верхню межі, друге — за ліву і праву.
• З трьох перше відповідає за верхню, друге — за ліву і праву, третє — за нижню межу.
• Чотири значення однозначно визначають кожну з ліній, починаючи з верхньої за годинниковою стрілкою до лівою.

Вказати оформлення кордонів осередку можна і через просте визначення даних для кожної сторони, як це було показано вище.

Всього є десять стилів для рамок. Всі вони змінюють лінію або видаляють її:

• none — межі немає;
• hidden — більш суворе none, блокує появу риси (в ситуації конфлікту);
• dotted — з точок;
• dashed — пунктирна;
• solid — суцільна;
• double — подвійна суцільна;
• groove — рамка ніби втиснула в поверхню;
• ridge — опукла лінія;
• inset — за фактом для однієї сторони елемента веде себе як ridge, якщо застосовується до всього елементу, то top і left затінені, а bottom right высветлены;
• outset — веде себе подібно groove при застосуванні до однієї сторони елемента, затінює bottom right, top і left виявляються більш світлими.

До кожної з комірок (до top і left сторонам) застосовано один із стилів. Для того щоб вони не конкурували між собою, найбільш "слабким", проставлені найбільші значення.

  table {
 background-color: rgba(3331171 012); 
 padding: 0.5 vw; 
 border-collapse: collapse; 
 border: 0.3 vw solid black;  
} 
 
 th, td {
 padding: 1vw; 
 text-align: left; 
} 
 
 .one {
 border-top: hidden; 
 border-left: hidden; 
} 
 
 .two {
 border-top: 0.4 vw double #4c6ea1; 
 border-left: 0.4 vw double #4c6ea1; 
} 
 
 .three {
 border-top: 0.5 vw solid #4c6ea1; 
 border-left: 0.5 vw solid #4c6ea1; 
} 
 
 .four {
 border-top: 0.7 vw dashed #4c6ea1; 
 border-left: 0.7 vw dashed #4c6ea1; 
} 
 
 .five {
 border-top: 0.8 vw dotted #4c6ea1; 
 border-left: 0.8 vw dotted #4c6ea1; 
} 
 
 .six {
 border-top: 0.9 vw ridge #4c6ea1; 
 border-left: 0.9 vw ridge #4c6ea1; 
} 
 
 .seven {
 border-top: 1vw outset #4c6ea1; 
 border-left: 1vw outset #4c6ea1; 
} 
 
 .eight {
 border-top: 1.1 vw groove #4c6ea1; 
 border-left: 1.1 vw groove #4c6ea1; 
} 
 
 .nine {
 border-top: 1.2 vw inset #4c6ea1; 
 border-left: 1.2 vw inset #4c6ea1; 
} 
  

Структурування матеріалу

Характер даних, представлених в матриці, часто вимагає модифікації меж самої таблиці, рамок її комірок, рядків або стовпців. Для цього можна використовувати:

• обнулення ліній (border-width вказують значення в 0px);
• hidden.

Перевага hidden в силі його пріоритету. Якщо на кордон діє правило відразу двох елементів і в одному з них border-style вказано значення hidden, лінія відображатися не буде. Тобто можна спокійно зробити всю таблицю, а потім вибірково видалити непотрібні рамки.

Використання hidden по відношенню до клітинок робить неможливим відновлення кордону іншими методами (крім важковаговика !imporant). Тому при необхідності видалити деякі з сторін клітинки, краще використовувати none.

Припустимо, є таблиця. Мета – видалити вертикальні кордони всередині першого рядка. Вона позначена окремим тегом (заголовком), тому додатковий клас вводити не потрібно. Якщо застосувати hidden до всього тегу, прописавши його border-left, то разом з внутрішніми кордонами віддалиться і одна частина бічної межі таблиці, що не потрібно за умовою. Якщо ж скористатися none і лінією матриці, то для внутрішніх чорт буде два неконфліктний правила, а біля зовнішнього краю none буде конфліктувати з правилом, яке їй задається в table, і сторона залишиться на місці.

Видалення окремих ліній клітинок проводиться за допомогою класів, які прописують відповідним елементам, як це було показано для індивідуального завдання стилю, ширини і кольору.

Тоді як прибрати бічну кордон в html-таблиці легше через звернення до зовнішніх рамок матриці, які вказують на table. Достатньо прописати вказівка на конкретну лінію в css.

  table {
 border-left-style: hidden; 
}  

Видалення рамок у рядках легко реалізувати за допомогою властивості border зі значенням hidden в tr. Зникають не тільки горизонтальні лінії таблиці, але і бічні. Матриця вироджується у вертикальні колонки.

tr {
border-style: hidden;
}

В крайньому випадку звертаються до !important. Якщо додати його після інструкції, то вона отримає додатковий пріоритет. Межі таблиці html гнучко і легко настроюються. Група властивостей border дозволяє приховати елементи, змінити колір, ширину або стиль. Недоліком таблиць є не завжди однозначно передбачуваний результат поєднання правил, застосованих до окремого елементу. Зважаючи на це рекомендують або скорочувати кількість можливих стилів кордонів, або застосовувати їх точково.