Таблиці даних містять різну інформацію в стовпцях і рядках для зручності читання. Дані зазвичай частково числові з текстовими мітками. Прикладом є таблиця даних, яка показує, скільки калорій хтось з'їдає щодня. Створення таблиці даних в Інтернеті може здійснюватися за допомогою HTML або більш складної мови браузера CSS. Підсумкова таблиця виглядає так само, як таблиця даних, створена в електронній таблиці або на папері. Єдина відмінність - фонове кодування, яке не видно, якщо не дивитись на вихідний код. Кодування може бути створено редакторами HTML, текстом або іншими способами. В Інтернеті є багато веб-сайтів, які пропонують можливість введення даних, встановлення кількох атрибутів та створення всього кодування таблиці для вас. Інтернет-таблиці даних зазвичай використовуються як частина веб-сторінки. Таблиці даних часто використовуються для створення списків предметів з категоріями, наприклад товарів, що продаються. Деякі веб-сторінки використовують їх для відображення статистичних даних для отримання інформації. Хоча таблиці даних можна використовувати в автономному режимі для друку або у звітах, як правило, це краще використовувати програмне забезпечення для електронних таблиць, таке як Microsoft Office Excel, яке пропонує набагато більше можливостей для роботи з даними. Цей посібник показує, як створити таблицю даних HTML за допомогою Блокнота.
Відкрийте редактор HTML або просто звичайний текстовий документ Блокнота, щоб ввести HTML-код. Блокнот добре працює, якщо ви звикли до HTML-кодування. Редактори HTML роблять повторювані завдання швидшими, але деякі, наприклад Frontpage, додають додаткове непотрібне кодування, яке може сповільнити роботу веб-сторінок. Найкраще зробити спочатку код за допомогою редактора HTML, а потім повернутися назад і відредагувати код вручну, щоб очистити його.
Визначте атрибути таблиці для меж, ширини, кольору тла та кольорів шрифту. Вам потрібно взяти до уваги макет веб-сторінки, ширину, кольори та інші атрибути, щоб зробити таблицю зручною для читання. Також потрібно вирішити, скільки рядків і стовпців потрібно для даних. Почніть визначати атрибути таблиці. (Наш приклад показує кількість калорій, з’їдених під час обіду та вечері кожного буднього дня. Нам потрібні три колонки (День, Обід та Вечеря) та сім рядків (два для ярликів та один для кожного робочого дня).
Додайте межу навколо таблиці та комірок даних. Межі розділяють дані на комірки для зручності перегляду. Він вимірюється в пікселях і може мати значення 0, щоб не використовувати їх. Рамка в один або два пікселі, як правило, чудова. Тег для межі -
bgcolor = border = "CHOSEN_BORDER_WIDTH"
Колір межі можна змінити за допомогою тегу
bordercolor = "CHOSEN_COLOR"
який використовує основні кольорові терміни, такі як червоний або чорний або шістзначні шістнадцяткові коди кольорів. Шістнадцяткові пропонують більше кольорів. У нашому прикладі використовується border = "2" і bordercolor = "black".
Визначте ширину всієї таблиці. Він вимірюється в пікселях або відсотках від розміру екрана. Пікселі остаточні, і відсотки дозволяють таблиці пристосовуватися до різних розмірів екрану. Спробуйте судити про ширину, виходячи з ширини даних у рядках. Якщо пізніше ви виявите, що стіл занадто тонкий або широкий, його можна змінити. У нашому прикладі використовується width = "175".
Встановіть колір тла комірок даних. Він відрізняється від кольору тла сторінки, що може забезпечити хороший контраст. Тег є
bgcolor = "CHOSEN_COLOR"
так само, як і колір кордону. У нашому прикладі використовується bgcolor = "white".
Встановіть колір шрифту тексту в клітинках. Переконайтесь, що колір добре контрастує з фоном, тому його легко читати. Світло на темному або темне на світлі завжди працює найкраще. Тег є
font = "CHOSEN_COLOR"
Наш приклад - font = "black", який добре контрастує з білим тлом.
Випишіть повні теги таблиці між стрілками вліво та вправо з пробілом між атрибутами тегів і починаючи з тегу таблиці попереду. Порядок міток не має значення, поки "стіл" стоїть спереду.
Визначте ширину стовпців. Ширина кожного стовпця залежить від ширини всієї таблиці. Візьміть ширину таблиці та розділіть її на кількість комірок, щоб отримати рівномірні стовпці. За потреби відрегулюйте ширину стовпців, але загальна сума не може перевищувати ширину таблиці. Коли ширина однієї комірки змінюється, інші комірки потрібно відрегулювати на загальну ширину таблиці. (Наш приклад має ширину 175 і три стовпці на рядок, тож рівномірний поділ становить приблизно 59. Фактичний розкол становить 70, 60, 40).
Почніть додавати свої дані. Спочатку розпочніть новий рядок і додайте рядок таблиці з кодом
Введіть свої дані для комірки; використання цього коду для представлення порожніх комірок:
Закрийте клітинку тегом. Тег bordercolor використовується, щоб вказати колір межі комірки, якщо потрібно. Якщо його не використовувати, використовується таблиця за замовчуванням bordercolor. Перший код комірки нашого прикладу:
Повторюйте створення комірок даних таблиці, кожен на новому рядку, поки всі комірки рядка не будуть завершені. Потім закінчіть рядок тегом. Почніть наступний рядок тим же процесом, починаючи з
Закрийте код таблиці за допомогою тег. Наш кінцевий код таблиці, якщо він закінчується після двох рядків даних, знаходиться нижче.
Речі, які вам знадобляться
- Редактор HTML або блокнот
- Дані