Новости
Всім привіт! Отже, тепер ви вмієте створювати елементарні таблиці, що складаються з такої кількості рядків і стовпців, яке необхідно. Не погано, не погано. А тепер давайте поговоримо про оформлення цих таблиць.
У минулому уроці таблиці відображалися без кордонів. І, погодьтеся, виглядає так собі, навіть і табличкою-то не назвеш. Щоб зробити кордону таблиці в HTML, слід додати до тегу <table> атрибут border, надавши йому значення відмінне від нуля.
Отже, давайте зробимо кордону для таблиці. Наприклад, для вже наявної у нас:
<Table border = "1"> <tr> <td> Верхня ліва комірка </ td> <td> Верхня права осередок </ td> </ tr> <tr> <td> Нижня ліва комірка </ td> <td > Нижня права осередок </ td> </ tr> </ table>
Результат в браузері:
Як прибрати кордони таблиці
У свою чергу, щоб прибрати кордони таблиці HTML, або ще можна сказати, зробити їх невидимими, потрібно атрибуту border задати значення 0. Після цих нехитрих дій рамка забереться.
Атрибут дозволяє створити, але не управляти межами. Він дозволяє лише змінювати їх товщину.
Тому, зараз мова піде про CSS, властивості якого роблять можливим за допомогою border створювати різні кордону, як всередині кожної клітинки, так і зовнішні, навколо таблиці в цілому.
Давайте подивимося як застосовувати CSS для створення зовнішніх і внутрішніх кордонів таблиці.
Для цього видалимо у нашій таблиці атрибут border і додамо стилі:
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Приклад таблиці </ title> <style> table {border: solid 1px blue; } </ Style> </ head> <body> <table> <tr> <td> Верхня ліва комірка </ td> <td> Верхня права осередок </ td> </ tr> <tr> <td> Нижня ліва осередок </ td> <td> Нижня права осередок </ td> </ tr> </ table> </ body> </ html>
Так ми додали тільки зовнішній кордон для таблиці синього кольору.
Результат в браузері:
Тепер давайте додамо кордону і для кожного осередку. Для цього просто доповнимо стилі:
<Style> table {border: solid 1px blue; } Td {border: solid 1px blue; } </ Style>
Результат в браузері:
Як прибрати відступи між осередками в таблиці HTML
Погодьтеся, що межа, задана за допомогою CSS, має не такий зовнішній вигляд, як хотілося б. Безперечно, з точки зору естетики, є над чим працювати. На сторінці браузера можна побачити, що за замовчуванням він відображає кордону таблиць і комірок окремо. Приклад це явно демонструє.
Однак, від таких ось кордонів, які іменуються подвійними, цілком можна позбутися, якщо використовувати CSS-властивість border-collapse. На практиці це виглядає ось так:
... table {border: solid 1px blue; border-collapse: collapse; } ...
Як результат - забирається відстань між осередками:
Значення collapse, приписане атрибуту border, дозволяє прибрати подвійні рамки. Як можна побачити, результатом є "схлопування" кордонів осередків, розташованих поруч, а також рамок осередків і зовнішньої рамки таблиці. Що стосується останньої, то вона може піти і зовсім. І якщо є необхідність в її відображенні, необхідно збільшувати її ширину. Таким чином ми позбулися роздільників в таблиці. А в наступному уроці ми поговоримо про те, як можна ставити вертикальні і горизонтальні межі. Всім удачі!