HTML-таблиці є основою структурованих даних у Інтернеті. Вони не використовуються лише для електронних таблиць. Ви можете змінювати їх форму, колір та точно контролювати, як вони відображаються у вікні браузера. Старий, перевірений метод спирається на специфічні атрибути уявлення. Він працює. Він простий і зрозумілий. Вам не потрібні складні CSS-фреймворки, щоб отримати пристойний макет.
Зміна кольору фону таблиці
Почніть із загального вигляду. Бажаєте, щоб вся сітка виділялася? Вам не потрібна окрема таблиця стилів. Просто додайте атрибут bgcolor до тега
.
Приклад: table bgcolor="yellow">
Це ставить основу. Кожен осередок успадковує цей стиль, якщо ви не перевизначите його.
Ви можете також деталізувати. Розфарбуйте окремий рядок або конкретну комірку. Додайте bgcolor="color" у тег
або
| .
Приклад: < bgcolor="yellow">
Це невелика деталь. Але вона змінює те, як очі сприймає дані.
Розмір таблиці
За замовчуванням браузери «ліниві». Вони розширюють рядки та стовпці, щоб умістити вміст. Якщо дані короткі, таблиця розтягується, щоб заповнити вікно. Якщо дані є довгими, таблиця стає довгою.
Іноді вам потрібний контроль. Ви хочете фіксувати розміри.
Додайте width та height у початковий тег
. Ви можете використовувати пікселі або відсотки.
Приклад:
Пікселі дають жорсткі обмеження. Відсотки дозволяють таблиці адаптуватись до розміру вікна перегляду. Який варіант вибрати залежить від ваших цілей дизайну.
Ви також можете встановити розміри для окремих осередків. Додайте width="value" у тег
або
| . Це перевизначає глобальне налаштування для конкретного місця.
Експериментуйте. Спробуйте значення у пікселях. Потім спробуйте значення у відсотках. Подивіться, як це працює чи ламається на різних екранах.
Внутрішній відступ (Cellpadding)
Простір – це частина дизайну. Зокрема, простір між краєм осередку та текстом усередині неї.
Це cellpadding. Він набуває значення в пікселях.
Використовуйте його у початковому тегу
.
Приклад 1:
Приклад 2:
П’ять пікселів це щільно. П’ятнадцять – це просторо. Контент відчувається по-різному. З великим відступом він виглядає чистішим.
Зовнішній відступ (Cellspacing)
Потім є зазор між осередками.
Це cellspacing. Він також набуває значення в пікселях.
Додайте його до тегу
.
Приклад 1:
Приклад 2:
Маленький cellspacing робить сітку щільною. Великий cellspacing створює вигляд, схожий на список завдань.
Заголовки таблиці
Цим необхідна структура. Заголовки забезпечують цю структуру.
Щоб виділити стовпець або рядок як заголовок, замініть
на
| у першому рядку.
Текст автоматично стає жирним та центрується.
Приклад:
| Стовпець 1 |
Стовпець 2 |
| A |
B |
| C |
| | | | |
