Новости

Як зробити кордону таблиці в HTML

  1. Як прибрати кордони таблиці
  2. Як прибрати відступи між осередками в таблиці HTML

Всім привіт! Отже, тепер ви вмієте створювати елементарні таблиці, що складаються з такої кількості рядків і стовпців, яке необхідно. Не погано, не погано. А тепер давайте поговоримо про оформлення цих таблиць.

У минулому уроці таблиці відображалися без кордонів. І, погодьтеся, виглядає так собі, навіть і табличкою-то не назвеш. Щоб зробити кордону таблиці в 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, дозволяє прибрати подвійні рамки. Як можна побачити, результатом є "схлопування" кордонів осередків, розташованих поруч, а також рамок осередків і зовнішньої рамки таблиці. Що стосується останньої, то вона може піти і зовсім. І якщо є необхідність в її відображенні, необхідно збільшувати її ширину. Таким чином ми позбулися роздільників в таблиці. А в наступному уроці ми поговоримо про те, як можна ставити вертикальні і горизонтальні межі. Всім удачі!

Уважаемые партнеры, если Вас заинтересовала наша продукция, мы готовы с Вами сотрудничать. Вам необходимо заполнить эту форму и отправить нам. Наши менеджеры в оперативном режиме обработают Вашу заявку, свяжутся с Вами и ответят на все интересующее Вас вопросы.

Или позвоните нам по телефонам: (048) 823-25-64

Организация (обязательно) *

Адрес доставки

Объем

Как с вами связаться:

Имя

Телефон (обязательно) *

Мобильный телефон

Ваш E-Mail

Дополнительная информация: