Таблиці та стилі
Таблиці - це популярний елемент для представлення різних даних на презентаціях, лекціях, в рекламних листівках та не лише. Завдяки їхній наочності, універсальності та простоті, таблиці широко використовуються на веб-сайтах для кращого подання необхідної інформації для читачів. Однак у більшості випадків на веб-сторінках використовуються досить прості засоби для представлення табличних даних. Використовуючи стилі, можна значно розширити можливості оформлення таблиць, успішно вписати їх у дизайн сайту та наочно представити табличні дані.
Далі піде мова про оформлення таблиць за допомогою стилів. Проте на початку обговоримо деякі моменти, які допоможуть краще зрозуміти, що ми робимо.
Колір фону комірок
Колір фону всіх комірок таблиці встановлюється через властивість background, яка застосовується до селектора TABLE. При цьому слід пам'ятати про правила використання стилів, зокрема, про успадкування властивостей елементів. Якщо одночасно з TABLE задати колір для селектора TD або TH, то він і буде встановлений як фон (приклад 1).
Приклад 1. Колір фону
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблиці</title>
<style type="text/css">
TABLE {
background: maroon; /* Колір фону таблиці */
color: white; /* Колір тексту */
}
TD {
background: navy; /* Колір фону комірок */
}
</style>
</head>
<body>
<table cellpadding="4" cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Комірка 3</td><td>Комірка 4</td></tr>
</table>
</body>
</html>У цьому прикладі отримаємо синій колір фону у комірок (тег <td>) та червоний у заголовка (тег <th>). Це пов'язано з тим, що стиль для селектора TH не визначений, тому "просвічується" фон батьків, у цьому випадку, селектора TABLE. А колір для селектора TD вказаний явно, отже, комірки "заливаються" синім кольором.
Те саме відбувається із кольором тексту. Для всіх елементів таблиці у прикладі він встановлений білим.
Результат даного прикладу показаний на мал. 1.
Поля всередині комірок
Полем називається відстань між краєм вмісту комірки та її межею. Зазвичай для цієї цілі застосовується атрибут cellpadding тега <table>. Він визначає значення поля в пікселях з усіх сторін комірки. Допускається використання стилевої властивості padding, додаючи його до селектора TD, як показано в прикладі 2.
Приклад 2. Поля в таблицях
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблиці</title>
<style type="text/css">
TABLE {
background: white; /* Колір фону таблиці */
color: white; /* Колір тексту */
}
TD, TH {
background: maroon; /* Колір фону комірок */
padding: 5px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<table cellspacing="1">
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Комірка 3</td><td>Комірка 4</td></tr>
</table>
</body>
</html>У цьому прикладі за допомогою групування селектором поля встановлені одночасно для селектора TD і TH.
Результат даного прикладу показаний на мал. 2.
Межі та рамки
Лінії між комірками можна встановити кількома методами, при цьому розглянемо два з них, що безпосередньо пов'язані зі стилями.
Використання атрибута cellspacing
Відомо, що атрибут cellspacing тега <table> встановлює відстань між комірками таблиці. Якщо використовується різний колір фону таблиці та комірок, то між комірками з'явиться сітка ліній, колір яких співпадає з кольором таблиці, а товщина дорівнює значенню атрибута cellspacing в пікселях. У вищезазначеному прикладі 2 цей ефект показаний, тому повторювати його не будемо.
Зауважимо, що це не зовсім зручний спосіб створення меж, оскільки він має обмежену область застосування. Так можна отримати лише однокольорову сітку, а не вертикальні чи горизонтальні лінії у потрібних місцях.
Застосування властивості border
Стиліве властивість border одночасно встановлює колір межі, її стиль та товщину навколо елемента. Коли потрібно створити окремі лінії на різних сторонах, краще використовувати його похідні — border-left, border-right, border-top та border-bottom, вони відповідно визначають межу зліва, справа, зверху та знизу.
Застосовуючи властивість border до селектора TABLE, ми додаємо рамку навколо таблиці в цілому, а до селектора TD або TH — рамку навколо комірок (приклад 3).
Приклад 3. Додавання подвійної рамки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблиці</title>
<style type="text/css">
TABLE {
background: #dc0; /* Колір фону таблиці */
border: 5px double #000; /* Рамка навколо таблиці */
}
TD, TH {
padding: 5px; /* Поля навколо тексту */
border: 1px solid #fff; /* Рамка навколо комірок */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Комірка 3</td><td>Комірка 4</td></tr>
</table>
</body>
</html>У цьому прикладі використовується подвійна рамка чорного кольору навколо самої таблиці та сплощена рамка білого кольору навколо кожної комірки.
Результат прикладу показаний на мал. 3.
Вирівнювання вмісту комірок
За замовчуванням текст в комірці таблиці вирівнюється по лівому краю. Винятком з цього правила є тег <th>, він визначає заголовок, в якому вирівнювання відбувається по центру. Щоб змінити спосіб вирівнювання застосовується стилева властивість text-align (приклад 5).
Приклад 5. Вирівнювання вмісту комірок по горизонталі
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Таблиці</title>
<style type="text/css">
TABLE {
border-collapse: collapse; /* Усуваємо подвійні лінії між комірками */
width: 300px; /* Ширина таблиці */
}
TH {
background: #fc0; /* Колір фону комірки */
text-align: left; /* Вирівнювання по лівому краю */
}
TD {
background: #fff; /* Колір фону комірок */
text-align: center; /* Вирівнювання по центру */
}
TH, TD {
border: 1px solid black; /* Параметри рамки */
padding: 4px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><td>Комірка 1</td><td>Комірка 2</td></tr>
<tr><th>Заголовок 2</th><td>Комірка 3</td><td>Комірка 4</td></tr>
</table>
</body>
</html>У ц