1
00:00:00,279 --> 00:00:02,655
Я створила цю сторінку
про моїх домашніх тваринок

2
00:00:02,655 --> 00:00:04,345
зі списком їхніх імен.

3
00:00:04,345 --> 00:00:06,747
Коли ви дивитесь на цей список,
що вас цікавить?

4
00:00:06,747 --> 00:00:11,113
Я мала тваринок на ім'я Чорний-і-Білий,
Демон і Ангел.

5
00:00:11,113 --> 00:00:12,964
Але, що це були за тваринки?

6
00:00:12,964 --> 00:00:14,553
Якого вони були кольору?

7
00:00:14,553 --> 00:00:16,124
Якого вони віку?

8
00:00:16,124 --> 00:00:18,316
Мені, напевно, слід дати вам 
більше інформації

9
00:00:18,316 --> 00:00:21,047
про тваринок у цьому списку,
щоб відповісти на ваші питання.

10
00:00:21,047 --> 00:00:23,457
Я можу зробити це, створивши
вкладений список,

11
00:00:23,457 --> 00:00:26,816
або додавши інформацію в дужках,

12
00:00:26,816 --> 00:00:30,332
щоб ви знали, що Білий-і-Чорний
був кроликом,

13
00:00:30,332 --> 00:00:32,213
Демон — це кіт

14
00:00:32,213 --> 00:00:34,204
і Ангел - це також кіт.

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

16
00:00:37,375 --> 00:00:40,906
і я не можу просто пробігтись
вниз по сторінці і побачити всі види

17
00:00:40,906 --> 00:00:42,786
в одному гарно упорядкованому списку.

18
00:00:42,786 --> 00:00:47,346
Для цього найкращим варіантом
буде створити таблицю

19
00:00:47,346 --> 00:00:49,140
з рядком для кожної тваринки

20
00:00:49,140 --> 00:00:51,858
і стовпчиком для кожної 
характеристики тварини,

21
00:00:51,858 --> 00:00:54,084
якою я хочу з вами поділитись.

22
00:00:54,084 --> 00:00:58,378
Для створення таблиць в HTML
нам знадобиться багато тегів.

23
00:00:58,378 --> 00:00:59,958
Тому приготуйтесь!

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

25
00:01:02,561 --> 00:01:04,434
Ви завжди можете переглянути 
їх пізніше.

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

27
00:01:07,192 --> 00:01:08,608
і зараз я професіонал.

28
00:01:08,608 --> 00:01:10,436
Добре, почнімо!

29
00:01:10,436 --> 00:01:15,084
Перший тег —  (таблиця),

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

31
00:01:20,023 --> 00:01:23,043
Тому ми пишемо  (table head).

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

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

34
00:01:32,002 --> 00:01:35,286
Всередині цього рядка ми хочемо додати
комірки з назвами стовпців.

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

36
00:01:41,677 --> 00:01:44,879
Добре, якою буде назва першого стовпця?

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

38
00:01:49,092 --> 00:01:51,306
та ідентифікатор для нього.

39
00:01:51,306 --> 00:01:54,699
Тепер ми додамо ще один стовпець
під назвою "Види".

40
00:01:54,699 --> 00:01:58,602
І насамкінець, стовпець для кольору.

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

42
00:02:01,532 --> 00:02:03,915
тому зараз час додати дані.

43
00:02:03,915 --> 00:02:05,951
Ми розпочнемо рядки з даними


44
00:02:05,951 --> 00:02:09,473
з тега  під тегом ,

45
00:02:09,473 --> 00:02:11,847
і потім, оскільки нам знову потрібен
рядок,

46
00:02:11,847 --> 00:02:14,282
ми використаємо тег .

47
00:02:14,282 --> 00:02:16,717
Але всередині, замість використання ,

48
00:02:16,717 --> 00:02:20,005
ми використаємо , 
тому що ми працюємо в основній частині.

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

50
00:02:23,136 --> 00:02:26,471
І яке ж значення має бути 
в першій клітинці

51
00:02:26,471 --> 00:02:28,056
в першому рядку даних?

52
00:02:28,056 --> 00:02:30,311
Що ж, я прогляну свій список

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

54
00:02:33,801 --> 00:02:36,019
і це ім'я тваринки,

55
00:02:36,019 --> 00:02:40,258
тому я просто напишу "Чорний-і-Білий".

56
00:02:40,258 --> 00:02:42,496
Переходимо до другого тега .

57
00:02:42,496 --> 00:02:46,726
Ми можемо подивитись вгору і побачити,
що другим  були види,

58
00:02:46,726 --> 00:02:49,724
а Чорний-і-Білий був кроликом,

59
00:02:49,724 --> 00:02:52,497
тому ми напишемо "кролик".

60
00:02:52,497 --> 00:02:55,159
І насамкінець, третій тег .

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

62
00:02:58,089 --> 00:03:00,177
І відповідний ...

63
00:03:00,177 --> 00:03:04,430
я була не дуже креативною дитиною,
коли називала кролика,

64
00:03:04,430 --> 00:03:08,215
тому ви, напевно, вгадали кольори.

65
00:03:08,215 --> 00:03:10,767
Добре, зробімо наступний рядок.

66
00:03:10,767 --> 00:03:13,067
Я вам покажу одну маленьку хитрість.

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

68
00:03:15,544 --> 00:03:17,126
я вибираю його

69
00:03:17,126 --> 00:03:19,394
і копіюю його, використовуючи
"гарячі клавіші",

70
00:03:19,394 --> 00:03:22,588
якими є переважно ctr+C або command+C,

71
00:03:22,588 --> 00:03:24,538
залежно від вашої операційної системи.

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

73
00:03:28,637 --> 00:03:31,082
якими є ctr+V або command+V,

74
00:03:31,082 --> 00:03:33,035
залежно від вашої операційної системи.

75
00:03:33,035 --> 00:03:36,870
І після того як я вставлю його,
я просто зміню значення.

76
00:03:36,870 --> 00:03:41,779
Цей буде Демоном, котом і чорним.

77
00:03:41,779 --> 00:03:44,397
І потім ми зробимо це ще раз,

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

79
00:03:52,705 --> 00:03:55,607
Гаразд, насправді, доволі нудно

80
00:03:55,607 --> 00:03:59,068
писати ці всі теги  і  знову і знову,

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

82
00:04:03,299 --> 00:04:05,853
І от ми її створили: таблицю.

83
00:04:05,853 --> 00:04:08,041
Я можу легко додати ще стовпців,

84
00:04:08,041 --> 00:04:10,548
додавши інші теги  до верхнього поля,

85
00:04:10,548 --> 00:04:12,827
а потім ще теги  до кожного з рядків,

86
00:04:12,827 --> 00:04:16,142
якщо я хочу розповісти більше деталей
про своїх тваринок.

87
00:04:16,142 --> 00:04:19,661
І вам, мабуть, цікаво, як ви
можете змінити вигляд таблиці,

88
00:04:19,661 --> 00:04:22,209
наприклад контури, кольори
чи масштаби.

89
00:04:22,209 --> 00:04:24,673
Ви можете це все зробити
за допомогою властивостей CSS,

90
00:04:24,673 --> 00:04:27,768
які ви вже вивчити
або вивчите пізніше.

91
00:04:27,768 --> 00:04:31,462
А тепер спробуйте на основі цієї сторінки
створити свою зі своїми власними

92
00:04:31,462 --> 00:04:33,294
домашніми тваринками або з тваринками,
яких би ви хотіли мати.

93
00:04:33,294 --> 00:04:35,131
Зробіть з цих даних таблицю!

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