< Return to Video

Таблиці в HTML.

  • 0:00 - 0:03
    Я створила цю сторінку
    про моїх домашніх тваринок
  • 0:03 - 0:04
    зі списком їхніх імен.
  • 0:04 - 0:07
    Коли ви дивитесь на цей список,
    що вас цікавить?
  • 0:07 - 0:11
    Я мала тваринок на ім'я Чорний-і-Білий,
    Демон і Ангел.
  • 0:11 - 0:13
    Але, що це були за тваринки?
  • 0:13 - 0:15
    Якого вони були кольору?
  • 0:15 - 0:16
    Якого вони віку?
  • 0:16 - 0:18
    Мені, напевно, слід дати вам
    більше інформації
  • 0:18 - 0:21
    про тваринок у цьому списку,
    щоб відповісти на ваші питання.
  • 0:21 - 0:23
    Я можу зробити це, створивши
    вкладений список,
  • 0:23 - 0:27
    або додавши інформацію в дужках,
  • 0:27 - 0:30
    щоб ви знали, що Білий-і-Чорний
    був кроликом,
  • 0:30 - 0:32
    Демон — це кіт
  • 0:32 - 0:34
    і Ангел - це також кіт.
  • 0:35 - 0:37
    Але мені так не подобається,
    тому що все це виглядає дуже не організовано,
  • 0:37 - 0:41
    і я не можу просто пробігтись
    вниз по сторінці і побачити всі види
  • 0:41 - 0:43
    в одному гарно упорядкованому списку.
  • 0:43 - 0:47
    Для цього найкращим варіантом
    буде створити таблицю
  • 0:47 - 0:49
    з рядком для кожної тваринки
  • 0:49 - 0:52
    і стовпчиком для кожної
    характеристики тварини,
  • 0:52 - 0:54
    якою я хочу з вами поділитись.
  • 0:54 - 0:58
    Для створення таблиць в HTML
    нам знадобиться багато тегів.
  • 0:58 - 1:00
    Тому приготуйтесь!
  • 1:00 - 1:03
    І не хвилюйтесь про те, що вам
    потрібно запам'ятати стільки тегів.
  • 1:03 - 1:04
    Ви завжди можете переглянути
    їх пізніше.
  • 1:04 - 1:07
    Мені потрібно було 10 років, щоб
    запам'ятати усі теги таблиць,
  • 1:07 - 1:09
    і зараз я професіонал.
  • 1:09 - 1:10
    Добре, почнімо!
  • 1:10 - 1:15
    Перший тег — (таблиця),
  • 1:15 - 1:20
    Далі, нам потрібно верхнє поле таблиці,
    де будуть вказані назви стовпців.
  • 1:20 - 1:23
    Тому ми пишемо (table head).
  • 1:23 - 1:28
    Всередині цього поля ми, як правило, хочемо
    створити лише один рядок з комірками.
  • 1:28 - 1:32
    Щоразу як ми додаємо рядок в таблицю,
    ми використовуємо тег (table row - рядок таблиці).
  • 1:32 - 1:35
    Всередині цього рядка ми хочемо додати
    комірки з назвами стовпців.
  • 1:35 - 1:42
    Для однієї комірки з назвою
    ми пишемо тег .
  • 1:42 - 1:45
    Добре, якою буде назва першого стовпця?
  • 1:45 - 1:49
    Це буде "ім'я тваринки", оскільки це
    найважливіша інформація в рядку
  • 1:49 - 1:51
    та ідентифікатор для нього.
  • 1:51 - 1:55
    Тепер ми додамо ще один стовпець
    під назвою "Види".
  • 1:55 - 1:59
    І насамкінець, стовпець для кольору.
  • 1:59 - 2:02
    Думаю, для початку достатньо стовпців,
  • 2:02 - 2:04
    тому зараз час додати дані.
  • 2:04 - 2:06
    Ми розпочнемо рядки з даними
  • 2:06 - 2:09
    з тега під тегом ,
  • 2:09 - 2:12
    і потім, оскільки нам знову потрібен
    рядок,
  • 2:12 - 2:14
    ми використаємо тег .
  • 2:14 - 2:17
    Але всередині, замість використання ,
  • 2:17 - 2:20
    ми використаємо ,
    тому що ми працюємо в основній частині.
  • 2:20 - 2:23
    Ми напишемо , що означає
    "дані таблиці" (tabular data).
  • 2:23 - 2:26
    І яке ж значення має бути
    в першій клітинці
  • 2:26 - 2:28
    в першому рядку даних?
  • 2:28 - 2:30
    Що ж, я прогляну свій список
  • 2:30 - 2:34
    і побачу, що першим елементом
    в моєму списку був Чорний-і-Білий,
  • 2:34 - 2:36
    і це ім'я тваринки,
  • 2:36 - 2:40
    тому я просто напишу "Чорний-і-Білий".
  • 2:40 - 2:42
    Переходимо до другого тега .
  • 2:42 - 2:47
    Ми можемо подивитись вгору і побачити,
    що другим були види,
  • 2:47 - 2:50
    а Чорний-і-Білий був кроликом,
  • 2:50 - 2:52
    тому ми напишемо "кролик".
  • 2:52 - 2:55
    І насамкінець, третій тег .
  • 2:55 - 2:58
    Ми подивимось вгору і побачимо,
    що третім був колір.
  • 2:58 - 3:00
    І відповідний ...
  • 3:00 - 3:04
    я була не дуже креативною дитиною,
    коли називала кролика,
  • 3:04 - 3:08
    тому ви, напевно, вгадали кольори.
  • 3:08 - 3:11
    Добре, зробімо наступний рядок.
  • 3:11 - 3:13
    Я вам покажу одну маленьку хитрість.
  • 3:13 - 3:16
    Що мені подобається... після того
    як я зробила один рядок,
  • 3:16 - 3:17
    я вибираю його
  • 3:17 - 3:19
    і копіюю його, використовуючи
    "гарячі клавіші",
  • 3:19 - 3:23
    якими є переважно ctr+C або command+C,
  • 3:23 - 3:25
    залежно від вашої операційної системи.
  • 3:25 - 3:29
    Потім я вставляю цей рядок,
    також використовуючи "гарячі клавіші",
  • 3:29 - 3:31
    якими є ctr+V або command+V,
  • 3:31 - 3:33
    залежно від вашої операційної системи.
  • 3:33 - 3:37
    І після того як я вставлю його,
    я просто зміню значення.
  • 3:37 - 3:42
    Цей буде Демоном, котом і чорним.
  • 3:42 - 3:44
    І потім ми зробимо це ще раз,
  • 3:44 - 3:53
    і цей буде Ангелом, котом і жовтогарячим.
  • 3:53 - 3:56
    Гаразд, насправді, доволі нудно
  • 3:56 - 3:59
    писати ці всі теги і знову і знову,
  • 3:59 - 4:03
    тому ця хитрість "копіювати-вставити"
    може зробити все трохи менш нудним.
  • 4:03 - 4:06
    І от ми її створили: таблицю.
  • 4:06 - 4:08
    Я можу легко додати ще стовпців,
  • 4:08 - 4:11
    додавши інші теги до верхнього поля,
  • 4:11 - 4:13
    а потім ще теги до кожного з рядків,
  • 4:13 - 4:16
    якщо я хочу розповісти більше деталей
    про своїх тваринок.
  • 4:16 - 4:20
    І вам, мабуть, цікаво, як ви
    можете змінити вигляд таблиці,
  • 4:20 - 4:22
    наприклад контури, кольори
    чи масштаби.
  • 4:22 - 4:25
    Ви можете це все зробити
    за допомогою властивостей CSS,
  • 4:25 - 4:28
    які ви вже вивчити
    або вивчите пізніше.
  • 4:28 - 4:31
    А тепер спробуйте на основі цієї сторінки
    створити свою зі своїми власними
  • 4:31 - 4:33
    домашніми тваринками або з тваринками,
    яких би ви хотіли мати.
  • 4:33 - 4:35
    Зробіть з цих даних таблицю!
  • 4:35 - 4:39
    Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
Title:
Таблиці в HTML.
Video Language:
English
Duration:
04:36
Julia edited Ukrainian subtitles for HTML tables
Zoriana Havrylyuk edited Ukrainian subtitles for HTML tables

Ukrainian subtitles

Revisions