Таблиці і рамки
Щоб чітко відокремити вміст одного осередку від іншої, до осередків додаються кордону. За їх створення відповідає параметр border тега <TABLE>, який визначає товщину рамки.
У прикладі 1 показано створення межі навколо осередків.
Приклад 1. Додавання рамки до таблиці
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Товщина кордону </ title>
</ Head>
<Body>
<Table width = "200" cellpadding = "5" border = "2">
<Tr>
<Td> Чебурашка </ td>
<Td> Крокодил Гена </ td>
<Td> Шапокляк </ td>
</ Tr>
</ Table>
</ Body>
</ Html>
Рамки створені таким чином незначно відрізняються за своїм виглядом в різних браузерах.
| Internet Explorer | Firefox | Opera |
 |
 |
 |
Мал. 1. Рамка, отримана за допомогою параметра border
Щоб отримати рамку одного виду, рекомендується скористатися стильовим атрибутом border, застосовуючи його до елементів таблиці (тегу <TD> або <TH>). Однак і тут нас підстерігають підводні камені. Оскільки рамка створюється для кожного осередку, то в місцях зіткнення осередків виходить межа подвоєною товщини. Для вирішення зазначеної особливості існує кілька шляхів. Найпростіший - скористатися властивістю border-collapse із значенням collapse. У його завдання входить відстежувати зіткнення ліній і замість подвійної кордону зображати одинарну. Цей атрибут досить додати до тегу <TABLE>, а далі він все зробить самостійно (приклад 2).
Приклад 2. Застосування border-collapse при створенні рамок таблиці
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Створення рамки </ title>
<Style type = "text / css">
TABLE {
border-collapse: collapse; / * Лінія між осередками відображається як одна * /
}
TD {
border: 2px solid green; / * Параметри рамки навколо осередків таблиці * /
text-align: center; / * Вирівнюємо текст по центру * /
}
</ Style>
</ Head>
<Body>
<Table width = "200" cellspacing = "0" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>
</ Body>
</ Html>
Різниця між кордонами таблиці при додаванні параметра border-collapse, а також без нього представлена на рис. 2.
a
б
Мал. 2. Форма таблиці при використанні атрибуту border-collapase
На рис. 2а показана рамка таблиці, яка використовується за замовчуванням. Зверніть увагу, що всередині таблиці всі лінії мають подвоєну товщину. Додавання параметра border-collapse прибирає цю особливість, і товщина всіх ліній стає однаковою (рис. 2б).
Для створення однотипних ліній всередині таблиці можна піти й іншим шляхом. Слід додати для селектора <TD> рамку, але скасувати лінію праворуч і знизу, задаючи відповідним атрибутам значення none. Тоді при стикуванні осередків їх кордони не будуть накладатися один з одним з тієї причини, що лінія буде тільки одна. Однак при цьому методі формування кордонів немає ліній знизу і праворуч у самій таблиці. Додаючи параметри border-right і border-bottom до селектора <TABLE>, отримаємо в результаті потрібну рамку (приклад 3). Для однотипності слід подбати, щоб стиль, товщина і колір кордону в усіх випадках збігалися.
Приклад 3. Створення рамки у таблиці за допомогою атрибуту border
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Створення рамки </ title>
<Style type = "text / css">
TABLE {
border-right: 2px solid green; / * Кордон у таблиці праворуч * /
border-bottom: 2px solid green; / * Кордон у таблиці знизу * /
}
TD {
border: 2px solid green; / * Параметри рамки навколо осередків таблиці * /
border-right: none; / * Прибираємо лінію праворуч * /
border-bottom: none; / * Прибираємо лінію знизу * /
text-align: center; / * Вирівнюємо текст по центру осередки * /
}
</ Style>
</ Head>
<Body>
<Table width = "200" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>
</ Body>
</ Html>
У цього способу можливі варіації, наприклад, для селектора <TD> додати кордон тільки справа і знизу, а у <TABLE>, навпаки, додати атрибут border, але лінію праворуч і знизу прибрати. У будь-якому випадку представлений результат буде один.
Простий і оригінальний вигляд таблиці можна отримати, якщо колір меж зробити збігається з кольором фону. Але щоб лінії були видні, обов'язково слід зробити заливку фону у тега <TD> або <TABLE>. Тоді елементи таблиці виходять, немов розсічені різцем між собою (приклад 4).
Приклад 4. Використання невидимих кордонів в таблиці
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251">
<Title> Створення кордонів </ title>
<Style type = "text / css">
BODY {
background: white; / * Колір фону веб-сторінки * /
}
TABLE {
border-collapse: collapse; / * Лінія між осередками відображається як одна * /
}
TD {
border: 2px solid white; / * Параметри рамки навколо осередків таблиці * /
background: #ccc; / * Колір фону осередків * /
text-align: center; / * Вирівнюємо текст по центру * /
}
</ Style>
</ Head>
<Body>
<Table width = "200" cellspacing = "0" cellpadding = "2">
<Tr> <td> 0 </ td> <td> X </ td> <td> X </ td> </ tr>
<Tr> <td> 0 </ td> <td> 0 </ td> <td> X </ td> </ tr>
<Tr> <td> X </ td> <td> X </ td> <td> 0 </ td> </ tr>
</ Table>
</ Body>
</ Html>
В даному прикладі колір фону веб-сторінки вводиться через властивість background, доданий до селектора BODY. Хоча білий колір встановлений за замовчуванням, його іноді бажано ставити, щоб користувач не вказав свій колір фону через настройки браузера. Такий же колір повинен бути і у ліній таблиці, в цьому випадку вони явно не видаються і лише ділять осередки між собою.
Результат прикладу 4 показаний нижче.
Мал. 3. Вид кордонів, які збігаються з кольором фону
Copyright що кредитують © www.htmlbook.ru
Коментарі
Коментуючи, пам'ятайте про те, що зміст і тон Вашого повідомлення можуть зачіпати почуття реальних людей, проявляйте повагу та толерантність до своїх співрозмовників навіть у тому випадку, якщо Ви не поділяєте їхню думку, Ваша поведінка за умов свободи висловлювань та анонімності, наданих інтернетом, змінює не тільки віртуальний, але й реальний світ. Всі коменти приховані з індексу, спам контролюється.