WEBVTT

00:00:00.279 --> 00:00:02.655
Я створила цю сторінку
про моїх домашніх тваринок

00:00:02.655 --> 00:00:04.345
зі списком їхніх імен.

00:00:04.345 --> 00:00:06.747
Коли ви дивитесь на цей список,
що вас цікавить?

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

00:00:11.113 --> 00:00:12.964
Але, що це були за тваринки?

00:00:12.964 --> 00:00:14.553
Якого вони були кольору?

00:00:14.553 --> 00:00:16.124
Якого вони віку?

00:00:16.124 --> 00:00:18.316
Мені, напевно, слід дати вам 
більше інформації

00:00:18.316 --> 00:00:21.047
про тваринок у цьому списку,
щоб відповісти на ваші питання.

00:00:21.047 --> 00:00:23.457
Я можу зробити це, створивши
вкладений список,

00:00:23.457 --> 00:00:26.816
або додавши інформацію в дужках,

00:00:26.816 --> 00:00:30.332
щоб ви знали, що Білий-і-Чорний
був кроликом,

00:00:30.332 --> 00:00:32.213
Демон — це кіт

00:00:32.213 --> 00:00:34.204
і Ангел - це також кіт.

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

00:00:37.375 --> 00:00:40.906
і я не можу просто пробігтись
вниз по сторінці і побачити всі види

00:00:40.906 --> 00:00:42.786
в одному гарно упорядкованому списку.

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

00:00:47.346 --> 00:00:49.140
з рядком для кожної тваринки

00:00:49.140 --> 00:00:51.858
і стовпчиком для кожної 
характеристики тварини,

00:00:51.858 --> 00:00:54.084
якою я хочу з вами поділитись.

00:00:54.084 --> 00:00:58.378
Для створення таблиць в HTML
нам знадобиться багато тегів.

00:00:58.378 --> 00:00:59.958
Тому приготуйтесь!

00:00:59.958 --> 00:01:02.561
І не хвилюйтесь про те, що вам
потрібно запам'ятати стільки тегів.

00:01:02.561 --> 00:01:04.434
Ви завжди можете переглянути 
їх пізніше.

00:01:04.434 --> 00:01:07.192
Мені потрібно було 10 років, щоб 
запам'ятати усі теги таблиць,

00:01:07.192 --> 00:01:08.608
і зараз я професіонал.

00:01:08.608 --> 00:01:10.436
Добре, почнімо!

00:01:10.436 --> 00:01:15.084
Перший тег —  (таблиця),

00:01:15.084 --> 00:01:20.017
Далі, нам потрібно верхнє поле таблиці,
де будуть вказані назви стовпців.

00:01:20.023 --> 00:01:23.043
Тому ми пишемо  (table head).

00:01:23.043 --> 00:01:27.858
Всередині цього поля ми, як правило, хочемо 
створити лише один рядок з комірками.

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

00:01:32.002 --> 00:01:35.286
Всередині цього рядка ми хочемо додати
комірки з назвами стовпців.

00:01:35.286 --> 00:01:41.677
Для однієї комірки з назвою 
ми пишемо тег .

00:01:41.677 --> 00:01:44.879
Добре, якою буде назва першого стовпця?

00:01:44.879 --> 00:01:49.092
Це буде "ім'я тваринки", оскільки це 
найважливіша інформація в рядку

00:01:49.092 --> 00:01:51.306
та ідентифікатор для нього.

00:01:51.306 --> 00:01:54.699
Тепер ми додамо ще один стовпець
під назвою "Види".

00:01:54.699 --> 00:01:58.602
І насамкінець, стовпець для кольору.

00:01:58.602 --> 00:02:01.532
Думаю, для початку достатньо стовпців,

00:02:01.532 --> 00:02:03.915
тому зараз час додати дані.

00:02:03.915 --> 00:02:05.951
Ми розпочнемо рядки з даними


00:02:05.951 --> 00:02:09.473
з тега  під тегом ,

00:02:09.473 --> 00:02:11.847
і потім, оскільки нам знову потрібен
рядок,

00:02:11.847 --> 00:02:14.282
ми використаємо тег .

00:02:14.282 --> 00:02:16.717
Але всередині, замість використання ,

00:02:16.717 --> 00:02:20.005
ми використаємо , 
тому що ми працюємо в основній частині.

00:02:20.005 --> 00:02:23.136
Ми напишемо , що означає 
"дані таблиці" (tabular data).

00:02:23.136 --> 00:02:26.471
І яке ж значення має бути 
в першій клітинці

00:02:26.471 --> 00:02:28.056
в першому рядку даних?

00:02:28.056 --> 00:02:30.311
Що ж, я прогляну свій список

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

00:02:33.801 --> 00:02:36.019
і це ім'я тваринки,

00:02:36.019 --> 00:02:40.258
тому я просто напишу "Чорний-і-Білий".

00:02:40.258 --> 00:02:42.496
Переходимо до другого тега .

00:02:42.496 --> 00:02:46.726
Ми можемо подивитись вгору і побачити,
що другим  були види,

00:02:46.726 --> 00:02:49.724
а Чорний-і-Білий був кроликом,

00:02:49.724 --> 00:02:52.497
тому ми напишемо "кролик".

00:02:52.497 --> 00:02:55.159
І насамкінець, третій тег .

00:02:55.159 --> 00:02:58.089
Ми подивимось вгору і побачимо,
що третім  був колір.

00:02:58.089 --> 00:03:00.177
І відповідний ...

00:03:00.177 --> 00:03:04.430
я була не дуже креативною дитиною,
коли називала кролика,

00:03:04.430 --> 00:03:08.215
тому ви, напевно, вгадали кольори.

00:03:08.215 --> 00:03:10.767
Добре, зробімо наступний рядок.

00:03:10.767 --> 00:03:13.067
Я вам покажу одну маленьку хитрість.

00:03:13.067 --> 00:03:15.544
Що мені подобається... після того
як я зробила один рядок,

00:03:15.544 --> 00:03:17.126
я вибираю його

00:03:17.126 --> 00:03:19.394
і копіюю його, використовуючи
"гарячі клавіші",

00:03:19.394 --> 00:03:22.588
якими є переважно ctr+C або command+C,

00:03:22.588 --> 00:03:24.538
залежно від вашої операційної системи.

00:03:24.538 --> 00:03:28.637
Потім я вставляю цей рядок,
також використовуючи "гарячі клавіші",

00:03:28.637 --> 00:03:31.082
якими є ctr+V або command+V,

00:03:31.082 --> 00:03:33.035
залежно від вашої операційної системи.

00:03:33.035 --> 00:03:36.870
І після того як я вставлю його,
я просто зміню значення.

00:03:36.870 --> 00:03:41.779
Цей буде Демоном, котом і чорним.

00:03:41.779 --> 00:03:44.397
І потім ми зробимо це ще раз,

00:03:44.397 --> 00:03:52.705
і цей буде Ангелом, котом і жовтогарячим.

00:03:52.705 --> 00:03:55.607
Гаразд, насправді, доволі нудно

00:03:55.607 --> 00:03:59.068
писати ці всі теги  і  знову і знову,

00:03:59.068 --> 00:04:03.292
тому ця хитрість "копіювати-вставити"
може зробити все трохи менш нудним.

00:04:03.299 --> 00:04:05.853
І от ми її створили: таблицю.

00:04:05.853 --> 00:04:08.041
Я можу легко додати ще стовпців,

00:04:08.041 --> 00:04:10.548
додавши інші теги  до верхнього поля,

00:04:10.548 --> 00:04:12.827
а потім ще теги  до кожного з рядків,

00:04:12.827 --> 00:04:16.142
якщо я хочу розповісти більше деталей
про своїх тваринок.

00:04:16.142 --> 00:04:19.661
І вам, мабуть, цікаво, як ви
можете змінити вигляд таблиці,

00:04:19.661 --> 00:04:22.209
наприклад контури, кольори
чи масштаби.

00:04:22.209 --> 00:04:24.673
Ви можете це все зробити
за допомогою властивостей CSS,

00:04:24.673 --> 00:04:27.768
які ви вже вивчити
або вивчите пізніше.

00:04:27.768 --> 00:04:31.462
А тепер спробуйте на основі цієї сторінки
створити свою зі своїми власними

00:04:31.462 --> 00:04:33.294
домашніми тваринками або з тваринками,
яких би ви хотіли мати.

00:04:33.294 --> 00:04:35.131
Зробіть з цих даних таблицю!

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