0:00:00.279,0:00:02.655
Я створила цю сторінку[br]про моїх домашніх тваринок

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

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

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

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

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

0:00:14.553,0:00:16.124
Якого вони віку?

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

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

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

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

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

0:00:30.332,0:00:32.213
Демон — це кіт

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

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

0:00:37.375,0:00:40.906
і я не можу просто пробігтись[br]вниз по сторінці і побачити всі види

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

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

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

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

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

0:00:54.084,0:00:58.378
Для створення таблиць в HTML[br]нам знадобиться багато тегів.

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

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

0:01:02.561,0:01:04.434
Ви завжди можете переглянути [br]їх пізніше.

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

0:01:07.192,0:01:08.608
і зараз я професіонал.

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

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

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

0:01:20.023,0:01:23.043
Тому ми пишемо  (table head).

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

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

0:01:32.002,0:01:35.286
Всередині цього рядка ми хочемо додати[br]комірки з назвами стовпців.

0:01:35.286,0:01:41.677
Для однієї комірки з назвою [br]ми пишемо тег .

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

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

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

0:01:51.306,0:01:54.699
Тепер ми додамо ще один стовпець[br]під назвою "Види".

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

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

0:02:01.532,0:02:03.915
тому зараз час додати дані.

0:02:03.915,0:02:05.951
Ми розпочнемо рядки з даними[br]

0:02:05.951,0:02:09.473
з тега  під тегом ,

0:02:09.473,0:02:11.847
і потім, оскільки нам знову потрібен[br]рядок,

0:02:11.847,0:02:14.282
ми використаємо тег .

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

0:02:16.717,0:02:20.005
ми використаємо , [br]тому що ми працюємо в основній частині.

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

0:02:23.136,0:02:26.471
І яке ж значення має бути [br]в першій клітинці

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

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

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

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

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

0:02:40.258,0:02:42.496
Переходимо до другого тега .

0:02:42.496,0:02:46.726
Ми можемо подивитись вгору і побачити,[br]що другим  були види,

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

0:02:49.724,0:02:52.497
тому ми напишемо "кролик".

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

0:02:55.159,0:02:58.089
Ми подивимось вгору і побачимо,[br]що третім  був колір.

0:02:58.089,0:03:00.177
І відповідний ...

0:03:00.177,0:03:04.430
я була не дуже креативною дитиною,[br]коли називала кролика,

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

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

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

0:03:13.067,0:03:15.544
Що мені подобається... після того[br]як я зробила один рядок,

0:03:15.544,0:03:17.126
я вибираю його

0:03:17.126,0:03:19.394
і копіюю його, використовуючи[br]"гарячі клавіші",

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

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

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

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

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

0:03:33.035,0:03:36.870
І після того як я вставлю його,[br]я просто зміню значення.

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

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

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

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

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

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

0:04:03.299,0:04:05.853
І от ми її створили: таблицю.

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

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

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

0:04:12.827,0:04:16.142
якщо я хочу розповісти більше деталей[br]про своїх тваринок.

0:04:16.142,0:04:19.661
І вам, мабуть, цікаво, як ви[br]можете змінити вигляд таблиці,

0:04:19.661,0:04:22.209
наприклад контури, кольори[br]чи масштаби.

0:04:22.209,0:04:24.673
Ви можете це все зробити[br]за допомогою властивостей CSS,

0:04:24.673,0:04:27.768
які ви вже вивчити[br]або вивчите пізніше.

0:04:27.768,0:04:31.462
А тепер спробуйте на основі цієї сторінки[br]створити свою зі своїми власними

0:04:31.462,0:04:33.294
домашніми тваринками або з тваринками,[br]яких би ви хотіли мати.

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

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