Я створила цю сторінку
про моїх домашніх тваринок

зі списком їхніх імен.

Коли ви дивитесь на цей список,
що вас цікавить?

Я мала тваринок на ім'я Чорний-і-Білий,
Демон і Ангел.

Але, що це були за тваринки?

Якого вони були кольору?

Якого вони віку?

Мені, напевно, слід дати вам 
більше інформації

про тваринок у цьому списку,
щоб відповісти на ваші питання.

Я можу зробити це, створивши
вкладений список,

або додавши інформацію в дужках,

щоб ви знали, що Білий-і-Чорний
був кроликом,

Демон — це кіт

і Ангел - це також кіт.

Але мені так не подобається,
тому що все це виглядає дуже не організовано,

і я не можу просто пробігтись
вниз по сторінці і побачити всі види

в одному гарно упорядкованому списку.

Для цього найкращим варіантом
буде створити таблицю

з рядком для кожної тваринки

і стовпчиком для кожної 
характеристики тварини,

якою я хочу з вами поділитись.

Для створення таблиць в HTML
нам знадобиться багато тегів.

Тому приготуйтесь!

І не хвилюйтесь про те, що вам
потрібно запам'ятати стільки тегів.

Ви завжди можете переглянути 
їх пізніше.

Мені потрібно було 10 років, щоб 
запам'ятати усі теги таблиць,

і зараз я професіонал.

Добре, почнімо!

Перший тег —  (таблиця),

Далі, нам потрібно верхнє поле таблиці,
де будуть вказані назви стовпців.

Тому ми пишемо  (table head).

Всередині цього поля ми, як правило, хочемо 
створити лише один рядок з комірками.

Щоразу як ми додаємо рядок в таблицю,
ми використовуємо тег  (table row - рядок таблиці).

Всередині цього рядка ми хочемо додати
комірки з назвами стовпців.

Для однієї комірки з назвою 
ми пишемо тег .

Добре, якою буде назва першого стовпця?

Це буде "ім'я тваринки", оскільки це 
найважливіша інформація в рядку

та ідентифікатор для нього.

Тепер ми додамо ще один стовпець
під назвою "Види".

І насамкінець, стовпець для кольору.

Думаю, для початку достатньо стовпців,

тому зараз час додати дані.

Ми розпочнемо рядки з даними

з тега  під тегом ,

і потім, оскільки нам знову потрібен
рядок,

ми використаємо тег .

Але всередині, замість використання ,

ми використаємо , 
тому що ми працюємо в основній частині.

Ми напишемо , що означає 
"дані таблиці" (tabular data).

І яке ж значення має бути 
в першій клітинці

в першому рядку даних?

Що ж, я прогляну свій список

і побачу, що першим елементом
в моєму списку був Чорний-і-Білий,

і це ім'я тваринки,

тому я просто напишу "Чорний-і-Білий".

Переходимо до другого тега .

Ми можемо подивитись вгору і побачити,
що другим  були види,

а Чорний-і-Білий був кроликом,

тому ми напишемо "кролик".

І насамкінець, третій тег .

Ми подивимось вгору і побачимо,
що третім  був колір.

І відповідний ...

я була не дуже креативною дитиною,
коли називала кролика,

тому ви, напевно, вгадали кольори.

Добре, зробімо наступний рядок.

Я вам покажу одну маленьку хитрість.

Що мені подобається... після того
як я зробила один рядок,

я вибираю його

і копіюю його, використовуючи
"гарячі клавіші",

якими є переважно ctr+C або command+C,

залежно від вашої операційної системи.

Потім я вставляю цей рядок,
також використовуючи "гарячі клавіші",

якими є ctr+V або command+V,

залежно від вашої операційної системи.

І після того як я вставлю його,
я просто зміню значення.

Цей буде Демоном, котом і чорним.

І потім ми зробимо це ще раз,

і цей буде Ангелом, котом і жовтогарячим.

Гаразд, насправді, доволі нудно

писати ці всі теги  і  знову і знову,

тому ця хитрість "копіювати-вставити"
може зробити все трохи менш нудним.

І от ми її створили: таблицю.

Я можу легко додати ще стовпців,

додавши інші теги  до верхнього поля,

а потім ще теги  до кожного з рядків,

якщо я хочу розповісти більше деталей
про своїх тваринок.

І вам, мабуть, цікаво, як ви
можете змінити вигляд таблиці,

наприклад контури, кольори
чи масштаби.

Ви можете це все зробити
за допомогою властивостей CSS,

які ви вже вивчити
або вивчите пізніше.

А тепер спробуйте на основі цієї сторінки
створити свою зі своїми власними

домашніми тваринками або з тваринками,
яких би ви хотіли мати.

Зробіть з цих даних таблицю!

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"