| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 8.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Створити таблицю і вказати її параметри (поля і відстань між осередками) через стилі.
Рішення
Таблиця складається з рядків і стовпців, комірок, які можуть містити текст і малюнки. Для додавання таблиці на веб-сторінку використовується тег <table>. Цей елемент служить контейнером для елементів, що визначають вміст таблиці. Будь-яка таблиця складається з рядків і осередків, які задаються відповідно за допомогою тегів <tr> і <td>. Таблиця повинна містити хоча б одну комірку (приклад 1). Допускається замість тега <td> використовувати тег <th>. Текст у клітинці, оформленої за допомогою тега <th>, відображається браузером шрифтом жирного накреслення і вирівнюється по центру осередки. В іншому, різниці між осередками, створеними через тегів <td> і <th> немає.
Приклад 1. Створення таблиці
HTML5IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Тег table</title> </head> <body> <table border="1"> <tr> <th>Комірка 1</th> <th>Комірка 2</th> </tr> <tr> <td>Осередок 3</td> <td>Осередок 4</td> </tr> </table> </body> </html>
Порядок розташування осередків та їх вигляд показаний на рис. 1.
Рис. 1. Результат створення таблиці з чотирма осередками
Атрибут border тега <table> допустимо додавати тільки з порожнім значенням (<table border>) або рівним 1. Всі інші значення не проходять валідацію.
Для управління полями всередині комірок використовується стильове властивість padding, яке додається до селектору td. Відстань між осередками змінюється властивість border-spacing (приклад 2) доданих до селектору table, браузер IE розуміє його тільки з версії 8.0.
Приклад 2. Поля всередині комірок
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег table</title>
<style>
table {
width: 100%; /* Ширина таблиці */
background: white; /* Колір фону таблиці */
color: white; /* Колір тексту */
border-spacing: 1px; /* Відстань між осередками */
}
td, th {
background: maroon; /* Колір фону клітинок */
padding: 5px; /* Поля навколо тексту */
}
</style>
</head>
<body>
<table>
<tr><th>Заголовок 1</th><th>Заголовок 2</th></tr>
<tr><td>Осередок 3</td><td>Осередок 4</td></tr>
</table>
</body>
</html>
Таблиця і відстанню між осередками показана на рис. 2. Аналогічного результату можна досягти і за допомогою рамки білого кольору навколо осередків.
Рис. 2. Поля в комірках таблиці