Красиві рамки для html таблиці. Зміна фону рядка при наведенні курсору

- 4.7 out of 5 based on 6 votes

При створенні веб-сторінок дуже часто необхідно представити деякий вміст сторінки у вигляді таблиць.

Іноді таблиці використовують створення структури сторінки. Цей підхід не зовсім правильний, тому що таблиці не призначалися для позиціонування елементів сторінки.

Для цієї мети краще користуватися засобами CSS. Але в деяких випадках таблиці є незамінними та зручними для надання інформації.

За створення таблиць у HTML відповідає тег

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

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

1 - осередок 2 - осередок
3 - осередок 4 - осередок

Для того, щоб побачити, що з цього вийде, створіть html сторінку використовуючи код розташований нижче. Якщо не знаєте, як створити HTML сторінку, дивіться урок.

Таблиця

1 - осередок 2 - осередок
3 - осередок 4 - осередок

У вас має вийти таке:

Як бачите, наша таблиця ще зовсім не схожа на таблицю. Все це тому, що наші теги

і мають безліч атрибутів, які необхідно вказати, щоб наша таблиця з'явилася рамка, фон, розміри тощо.

Спочатку ми розглянемо атрибути, які притаманні тегам

. Для того, щоб бачити як змінюватиметься наша таблиця, ви можете додавати ці атрибути до тегів
і, оновлюючи сторінку, дивитися як виглядатиме таблиця у браузері. Для зручності я не буду наводити весь код сторінки, а тільки код, що стосується тега тобто те, що ми будемо змінювати.

І так тег

має такі атрибути:

border - визначає ширину рамки таблиці в пікселях, записується так:

.

bordercolor – колір рамки таблиці, атрибут підтримує не всі браузери, тому ви можете і не побачити заданий колір рамки:

Ми задали ширину рамки 2 пікселя, синього кольору, таблиця набуде наступного вигляду:

width – визначає ширину таблиці в пікселях або відсотках:

height – висота таблиці у пікселях або відсотках:

Ширина таблиці буде 250 пікселів, а висота 150 пікселів, таблиця виглядатиме так:

align - вирівнювання таблиці;

align = left - таблиці буде вирівняно по лівому краю;

align=right – таблиця буде вирівняна з правого краю:

Наша таблиця має вирівнятися праворуч.

bgcolor – колір тла таблиці, bgcolor=#FFC000 – колір тла таблиці буде жовтий:

Таблиця набуде наступного вигляду:

background – за допомогою даного атрибута можна задати зображення, яке буде тлом таблиці.

Як приклад збережіть маленьке зображення, яку ви бачите у дужках () у ту папку, де у вас знаходиться сторінка з таблицею, а до тегу

додайте background="fon.gif " весь код:

Таблиця набуде наступного вигляду:

сellpadding – атрибут, що задає лівий, правий, верхній та нижній відступи всередині комірки. Наприклад, якщо до нашого тегу

додати сellpadding=10, то текст, написаний усередині осередків, отримає відступ.

cellspacing – задає відступ між осередками таблиці.

Якщо ви придивитеся до нашої таблиці, то побачите, що між рамками осередків є невеликий простір, це є відступ між осередками, він задається за замовчуванням. Щоб його прибрати, достатньо в тезі

прописати cellspacing=0. Весь код:

В результаті наші осередки притиснулися один до одного, а текст усередині осередків отримав відступ:

hspace - задає проміжок від таблиці ліворуч і праворуч у пікселях, записується так: hspace=20

nowrap – забороняє перенесення слів у осередку, записується просто nowrap

Останні два атрибути застосовуються дуже рідко, тому приклад коду з ними я не показую.

Тепер розглянемо атрибути тега

деякі з них такі ж, як і атрибути тега

width - ширина осередку в пікселях або у відсотках.

height - висота осередку в пікселях або відсотках.

Наприклад, задаємо ширину першого осередку першого рядка в 30% - width = 30%, а висоту першого осередку другого рядка в 100px. Код буде таким:

1 - осередок 2 - осередок
3 - осередок 4 - осередок

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

align – вирівнює вміст осередків, має такі значення:

align="lef" – вміст осередку буде вирівняно по лівому краю;

align="right" – вміст буде вирівняно праворуч;

align="center" – вміст буде вирівняно по центру комірки.

Додамо ці атрибути і значення в наш код і вирівняємо вміст 1-ї комірки по лівому краю (по лівому краю вміст вирівнюється за замовчуванням, проте в деяких випадках цей атрибут необхідний), вміст 2-го комірки вирівняємо по правому краю, а 4 - по центру.

1 - осередок 2 - осередок
3 - осередок 4 - осередок

bgcolor – за допомогою даного атрибуту можна встановити колір осередку.

background – встановлює зображення у вигляді тла осередку.

З цими атрибутами ми вже зустрічалися, розглядаючи атрибути тега

. Працюють вони однаково, тільки в цьому випадку ними задається тло осередку. Наприклад, задамо колір фону 2-го осередку жовтим, а як фон 4-го осередку встановимо наступне зображення ().

Для цього в наш код додамо необхідні атрибути, для наших осередків bgcolor="#FFFF00" для 2-го осередку і background="fon.jpg" для 4-го осередку. В результаті наша таблиця виглядатиме так:

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

bordercolor – задає колір рамки комірки.

З цим атрибутом ми також зустрічалися, розглядаючи атрибути тега

. Нагадую, що він працює не у всіх браузерах. Зверніть увагу на те, що у тега

У цьому вся прикладі використовуються вкладені таблиці, тобто одна таблиця на другий. В рядку 1 ми відкриваємо першу таблицю і наповнюємо її темним кольором, у разі чорним (# 00 00 00). Один із параметрів зовнішньої таблиці - cellspacingабо cellpadding -повинен дорівнювати 0, а інший 1. У рядку 4 ми відкриваємо нову таблицю з білим тлом (# FF FF FF). Важливим параметром вкладеної таблиці є її ширина - width="100%". Таблиці слід закривати у зворотному порядку - спочатку вкладену, потім зовнішню.

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

Рамка 2

У цьому прикладі ми обходимося однією таблицею. Для створення рамки тут використовується спеціально для цього призначений параметр borderякому надається значення 1. Одночасно параметр cellspacingприрівнюється до 0, інакше рамка виглядатиме так:

немає атрибута border що позначає рамку комірки. Задамо колір рамки 2-ї комірки червоним для цього до другого комірки додамо атрибут bordercolor="#FF0000"

Існує ще один атрибут, призначений для вирівнювання вмісту осередків:

valign – він здійснює вирівнювання вмісту осередків по вертикалі.

Має такі значення:

valign="top" – вирівнювання вмісту осередку по верхньому краю;

valign="bottom" – вирівнювання вмісту осередку по нижньому краю;

valign="middle" - вирівнювання посередині осередку;

valign="baseline" – вирівнювання вмісту осередку по базовій лінії.

Додамо ці атрибути до кожного з наших 4-х осередків.

1 - осередок 2 - осередок
3 - осередок 4 - осередок

Наша таблиця набуде наступного вигляду:

Останнє, що нам необхідно розглянути в цьому уроці, це об'єднання осередків таблиці. Щоб об'єднати кілька осередків у рядку, існує атрибут colspan="" де в лапках вказується кількість осередків, яке необхідно об'єднати.

Чи не здається вам, що чорно-біла таблиця виглядає нудно? От і ми так думаємо! Тому в цьому уроці ми поговоримо про те, як змінити колір таблиці HTML. Існує три можливості додавання кольору, для кожної з яких є властивість.

  1. Вказує колір фону осередків. Здійснюється за допомогою властивості background-color.
  2. Вказує колір тексту в осередках. Здійснюється за допомогою властивості color.
  3. Вказує колір рамок осередків. Здійснюється за допомогою властивості border-color.

Раніше, щоб змінити колір, застосовувалася більш стисла форма опису рамки. Виглядала вона так:

Border: 1px solid lightgray

І за колір тут відповідала остання частина lightrgay.

Існують різні способи, що дозволяють встановити значення кольорів в CSS. Ми покажемо вам, як відбувається опис кольору з використанням атрибутів.

Як змінити колір осередку

Давайте подивимося, як виглядає код у CSS, в якому задано колір для комірки.

Td (background-color: колір-фону; )

Зрозуміло, змінювати кольори можна і в table, і у td, і у th. Давайте спробуємо надати нашій таблиці множення більш солідний вигляд.

Додамо стилі для осередків-заголовків із тегом th, а також для осередків по діагоналі, в яких розташовані квадрати чисел:

Таблиця множення

Таблиця множення
* 2 3
2 4 6
3 6 9

Результат у браузері:

Як змінити колір рамки у таблиці

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

  1. тип лінії, у нашому випадку solid (суцільна)
  2. товщина лінії, у нашому випадку 1px
  3. колір лінії, у нашому випадку синій

Нагадаємо ще раз, як виглядає завдання кольору рамки для комірки:

Td ( border: 1px solid blue; )

Як змінити колір рядка у таблиці

Отже, ми з вами навчилися змінювати кольори осередків, а також осередків заголовків, використовуючи можливості CSS. Якщо ми вказуємо стилі для таких тегів, як thабо td, то повинні розуміти, що застосовні стилі будуть і до інших тегів.

Проте, бувають ситуації, коли треба змінити колір конкретного осередку або кілька осередків, або весь рядок цілком. Що робити у цьому випадку? Тут слід використовувати класи, а також застосовувати їх стилі. На практиці це виглядає так:

RowGreen ( background-color:green; )

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

Таблиця з чергуванням кольору в рядках
1 2 3 4 5
1 2 3 4 5
1 2 3 4 5

І результат у браузері:

Як змінити колір тексту в таблиці

Для того, щоб змінити колір тексту в таблиці, використовується властивість color. Застосовувати його можна до різних елементів: до table, tr, th, td. Залежно від цього, колір у вибраному елементі буде змінено. Наприклад, для всієї таблиці поставимо зелений коліршрифту:

Table ( color: green; ... )

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

За допомогою таблиць можна досягти дуже цікавих візуальних ефектів при створенні тонких рамок, що майже однаково інтерпретуються всіма броузерами. Розглянемо при цьому кілька прикладів.

Рамка 1

параметр cellspacing= 1

параметр cellspacing= 2

параметр cellspacing= 3

Цей варіант простіше першого, але, на жаль, не зовсім однаково інтерпретується Internet Explorer"Ом і Netscape".

Рамка 3
















<table border="0" cellspacing="0" cellpadding="0">










Так це виглядає









Якщо два попередні варіанти виводять на екран у різних броузерах рамки, хоч і мінімально, але різної товщини, то третій приклад інтерпретується поширеними броузерами Internet Explorer 4.x/5.x/6, Netscape 4.x/6.x та Opera 6. x однаково, що стосується товщини рамки. Вважаю доречним згадати, що найбільше проблем доставляє веб-дизайнер Netscape 4.x.
Але розглянемо докладніше третій варіант. У його основі лежить таблиця з 9 клітин, подана нижче:

1

2

3

4

6

7

8

9

Усі клітини, крім 5ой, зафарбовуються чорним кольором, п'ята – білим. Фон самої таблиці у разі не важливий. Потім до клітин 1-3 та 7-9 додаються параметр height = "1".Відповідно клітини 1, 3, 4, 6, 7, 9 робляться шириною один піксел ( width="1"). Середні клітини 2, 5, 8 робляться максимально широкими ( width="100%"). Фокус полягає в тому, що в клітини, які мають бути вузькими або тонкими, або тими та іншими, додається так званий "модифікований квадрат Малевича" - прозорий gif-файл розміром 1х1, інакше бажаного ефекту не досягне.

Для створення тонкої рамки навколо таблиці з одним осередком цей варіант є, поза сумнівом, занадто складним і об'ємним, незважаючи на його сумісність із багатьма браузерами. Він застосовується переважно для розмітки сторінки тонкими лініями. Для створення рамок можна використовувати таблиці стилів, але про це в одному з наступних workshop"ів.

Наступний workshop

>> готується до публікації

Попередній workshop

Специфікація CSS дає необмежені можливості оформлення таблиць. За замовчуванням таблиця і осередки таблиці немає видимих ​​меж і тла, у своїй осередки всередині таблиці не прилягають впритул друг до друга.

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

Форматування таблиць

1. Межі таблиці.

Таблиця та осередки всередині неї за замовчуванням відображаються у браузері без видимих ​​меж. Межі таблицізадаються властивістю:

Table ( border-collapse: collapse; /*прибираємо порожні проміжки між осередками*/ border: 1px solid grey; /*встановлюємо для таблиці зовнішню межу сірого кольору завтовшки 1px*/ )

Кордони осередків заголовкакожного стовпця задаються для елемента th:

Th (border: 1px solid grey;)

Межі осередківтіла таблиці задаються для елемента td:

Td (border: 1px solid grey;)

Товщина рамок сусідніх осередків не подвоюється, тому встановити межі для всієї таблиці можна наступним способом:

Th, td (border: 1px solid grey;)

Зовнішню межу таблиці можна виділити, задавши їй збільшену ширину:

Table (border: 3px solid grey;)

Кордони можна задавати частково:

/* встановлюємо для таблиці зовнішню межу сірого кольору завтовшки 3px */ table (border-top: 3px solid grey; ) /* задаємо для осередку тіла таблиці межу сірого кольору завтовшки 1px */ td (border-bottom: 1px solid grey;)

Докладніше про властивість border ви можете прочитати.

2. Як задати ширину та висоту таблиці

За замовчуванням ширина та висота таблицівизначається вмістом її осередків. Якщо ширина не задана, то вона дорівнюватиме ширині найширшого ряду (рядки).

Ширина таблиці та стовпцівзадається за допомогою властивості width. Якщо таблиці задано table (width: 100%;) , то ширина таблиці дорівнюватиме ширині блока-контейнера, в якому вона знаходиться.

Ширину таблиці та стовпців зазвичай задають у px або %, наприклад:

Table (width: 600px;) th (width: 20%;) td:first-child (width: 30%;)

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

Th, td (padding: 10px 15px;)

3. Як поставити фон таблиці

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

4. Стовпці таблиці

Модель CSS таблицьорієнтована в основному на рядки (ряди), що формуються за допомогою тега

. На практиці бувають випадки, коли необхідне спеціальне форматування стовпців, яке можливе такими способами:

за допомогою тега

Можна встановити фон для будь-якої кількості стовпців;

за допомогою селектора table td: first-child, table td: last-child можна задати стилі для першого або останнього стовпця таблиці (за винятком першого осередку заголовка таблиці);

за допомогою селектора table td: nth-child (правило відбору стовпців) можна встановити стилі для будь-яких стовпців таблиці.

Докладніше про CSS-селектори ви зможете прочитати.

5. Як додати таблиці заголовок

Додати заголовок до таблиці можна за допомогою тега , а за допомогою властивості caption-side можна помістити перед таблицею або під нею. Для горизонтального вирівнювання тексту заголовка використовується властивість text-align. успадковується.

...
Таблиця №1
Company Q1 Q2 Q3 Q4
caption ( caption-side: bottom; text-align: right; padding: 10px 0; font-size: 14px; ) Рис. 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
Google 50.2 40.63 45.23
table ( border: 1px solid #69c; border-collapse: separate; empty-cells: hide; ) th, td (border: 2px solid #69c;) Рис. 5. Приклад приховування порожнього осередку таблиці

9. Компонування макету таблиці за допомогою властивості table-layout

Компонування макету таблиці визначається одним із двох підходів: фіксований макет або автоматичний макет. Під компонуванням у цьому випадку мається на увазі як розподіляється ширина таблиці між шириною осередків. Властивість не успадковується.

Синтаксис

Table (table-layout: fixed;)

10. Найкращі макети таблиць

1. Горизонтальний мінімалізм

Горизонтальні таблиці - це таблиці, текст яких читається по горизонталі. Кожна сутність є окремим рядком. Ви можете оформити такі таблиці в мінімалістському стилі, помістивши двопіксельний кордон під заголовком th.

EmployeeSalaryBonusSupervisor
Stephen C. Cox$300$50Bob
Josephin Tan$150-Annie
Joyce Ming$200$35Andy
James A. Pentel$175$25Annie
table ( font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 14px; background: white; max-width: 70%; width: 70%; border-collapse: collapse; text -align: left; ) th ( font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; ) td ( color: #669; padding: 9px 8px; transition: .3s linear; ) tr:hover td (color: #6699ff;)

При великій кількості рядків такий дизайн таблиць ускладнює їх читання. Для вирішення цієї проблеми можна додати однопіксельний кордон під усіма елементами 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; )

Щоб чітко відокремити вміст одного осередку від іншого, до осередків додаються межі. За їхнє створення відповідає параметр border тега

що визначає товщину рамки.

У прикладі 1 показано створення кордону навколо осередків.

Приклад 1. Додавання рамки до таблиці





Товщина кордону







Чебурашка Крокодил Гена Шапокляк


Рамки створені таким чином трохи відрізняються за своїм виглядом у різних браузерах.

Рис. 1. Рамка отримана за допомогою параметра border

Щоб отримати рамку одного виду, рекомендується застосувати стильовий тег border , застосовуючи його до осередків таблиці (тегу або ). Однак і тут нас підстерігають підводне каміння. Оскільки рамка створюється кожної комірки, то місцях дотику осередків виходить межа подвоєної товщини. Аби вирішити зазначеної особливості існує кілька шляхів. Найпростіший – застосувати властивістю border-collapse зі значенням collapse. У його завдання входить відстежувати дотику ліній і замість подвійного кордону зображати одинарну. Цей атрибут достатньо додаємо до тегу

, А далі він все зробить самостійно (Приклад 2).

Приклад 2. Застосування border-collapse для створення рамок таблиці





Створення рамки






0XX
00X
XX0


Різниця між межами таблиці при додаванні параметра border-collapse і без нього представлена ​​на рис. 2.

a

б

Рис. 2. Вигляд таблиці під час використання атрибута border-collapase

На рис. 2а показано рамку таблиці, яка використовується за замовчуванням. Зверніть увагу, що всередині таблиці всі лінії мають подвоєну товщину. Додавання параметра border-collapse прибирає цю особливість і товщина всіх ліній стає однаковою (рис. 2б).

Для розробки однотипних ліній усередині таблиці можна піти іншим шляхом. Слід додаємо для селектора рамку, але скасувати лінію праворуч та знизу, задаючи відповідним атрибутам значення none . Тоді при стикування осередків їх межі не накладатимуться один з одним з тієї причини, що лінія буде лише одна. Однак при цьому методі формування кордонів немає ліній знизу та праворуч біля самої таблиці. Додаючи параметри border-right та border-bottom до селектора

, Отримаємо у результаті необхідну рамку (приклад 3). Для однотипності слід подбати, щоб стиль, товщина та колір кордону завжди співпадали.

Приклад 3. Створення рамки у таблиці за допомогою атрибуту.





Створення рамки






0XX
00X
XX0


У цього способу можливі варіації, наприклад, для селектора додаємо кордон лише праворуч і знизу, а у

, Навпаки, додаємо атрибут border , але лінію справа і знизу прибрати. У будь-якому разі поданий результат буде один.

Простий та оригінальний вид таблиці можна отримати, якщо колір кордонів зробити таким, що співпадає з кольором фону. Але щоб лінії були видні, обов'язково слід зробити заливку тла у тега

або . Тоді осередки таблиці виходять, наче розрізані різцем між собою (приклад 4).

Приклад 4. Використання невидимих ​​меж у таблиці





Створення кордонів







0XX
00X
XX0


У цьому прикладі колір фону web-сторінки вводиться через властивість background, додане до селектора BODY. Хоча білий колір встановлено за замовчуванням, його іноді бажано задавати, щоб користувач не вказав свій колір тла через налаштування браузера. Такий самий колір має бути й у ліній таблиці, у разі вони явно не видаються і лише ділять осередки між собою.

Результат прикладу 4 показаний нижче.

Рис. 3. Вид меж, що збігаються з кольором фону

Прикладка © 2022 Мобільні та комп'ютерні гаджети