Я створила цю сторінку про моїх домашніх тваринок
зі списком їхніх імен.
Коли ви дивитесь на цей список, що вас цікавить?
Я мала тваринок на ім'я Чорний-і-Білий, Демон і Ангел.
Але, що це були за тваринки?
Якого вони були кольору?
Якого вони віку?
Мені, напевно, слід дати вам більше інформації
про тваринок у цьому списку, щоб відповісти на ваші питання.
Я можу зробити це, створивши вкладений список,
або додавши інформацію в дужках,
щоб ви знали, що Білий-і-Чорний був кроликом,
Демон — це кіт
і Ангел - це також кіт.
Але мені так не подобається, тому що все це виглядає дуже не організовано,
і я не можу просто пробігтись вниз по сторінці і побачити всі види
в одному гарно упорядкованому списку.
Для цього найкращим варіантом буде створити таблицю
з рядком для кожної тваринки
і стовпчиком для кожної характеристики тварини,
якою я хочу з вами поділитись.
Для створення таблиць в HTML нам знадобиться багато тегів.
Тому приготуйтесь!
І не хвилюйтесь про те, що вам потрібно запам'ятати стільки тегів.
Ви завжди можете переглянути їх пізніше.
Мені потрібно було 10 років, щоб запам'ятати усі теги таблиць,
і зараз я професіонал.
Добре, почнімо!
Перший тег — (таблиця),
Далі, нам потрібно верхнє поле таблиці, де будуть вказані назви стовпців.
Тому ми пишемо (table head).
Всередині цього поля ми, як правило, хочемо створити лише один рядок з комірками.
Щоразу як ми додаємо рядок в таблицю, ми використовуємо тег (table row - рядок таблиці).
Всередині цього рядка ми хочемо додати комірки з назвами стовпців.
Для однієї комірки з назвою ми пишемо тег .
Добре, якою буде назва першого стовпця?
Це буде "ім'я тваринки", оскільки це найважливіша інформація в рядку
та ідентифікатор для нього.
Тепер ми додамо ще один стовпець під назвою "Види".
І насамкінець, стовпець для кольору.
Думаю, для початку достатньо стовпців,
тому зараз час додати дані.
Ми розпочнемо рядки з даними
з тега під тегом ,
і потім, оскільки нам знову потрібен рядок,
ми використаємо тег .
Але всередині, замість використання ,
ми використаємо , тому що ми працюємо в основній частині.
Ми напишемо , що означає "дані таблиці" (tabular data).
І яке ж значення має бути в першій клітинці
в першому рядку даних?
Що ж, я прогляну свій список
і побачу, що першим елементом в моєму списку був Чорний-і-Білий,
і це ім'я тваринки,
тому я просто напишу "Чорний-і-Білий".
Переходимо до другого тега .
Ми можемо подивитись вгору і побачити, що другим були види,
а Чорний-і-Білий був кроликом,
тому ми напишемо "кролик".
І насамкінець, третій тег .
Ми подивимось вгору і побачимо, що третім був колір.
І відповідний ...
я була не дуже креативною дитиною, коли називала кролика,
тому ви, напевно, вгадали кольори.
Добре, зробімо наступний рядок.
Я вам покажу одну маленьку хитрість.
Що мені подобається... після того як я зробила один рядок,
я вибираю його
і копіюю його, використовуючи "гарячі клавіші",
якими є переважно ctr+C або command+C,
залежно від вашої операційної системи.
Потім я вставляю цей рядок, також використовуючи "гарячі клавіші",
якими є ctr+V або command+V,
залежно від вашої операційної системи.
І після того як я вставлю його, я просто зміню значення.
Цей буде Демоном, котом і чорним.
І потім ми зробимо це ще раз,
і цей буде Ангелом, котом і жовтогарячим.
Гаразд, насправді, доволі нудно
писати ці всі теги і знову і знову,
тому ця хитрість "копіювати-вставити" може зробити все трохи менш нудним.
І от ми її створили: таблицю.
Я можу легко додати ще стовпців,
додавши інші теги до верхнього поля,
а потім ще теги до кожного з рядків,
якщо я хочу розповісти більше деталей про своїх тваринок.
І вам, мабуть, цікаво, як ви можете змінити вигляд таблиці,
наприклад контури, кольори чи масштаби.
Ви можете це все зробити за допомогою властивостей CSS,
які ви вже вивчити або вивчите пізніше.
А тепер спробуйте на основі цієї сторінки створити свою зі своїми власними
домашніми тваринками або з тваринками, яких би ви хотіли мати.
Зробіть з цих даних таблицю!
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"