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