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