Summary  
This chapter covers formatting and printing tabular data by constructing table structures in HTML and Markdown.

General domain of usage  
Data reporting

Іноді виникає потреба згенерувати вивід у певному форматі: таблиця, список, структурований текст із заголовками тощо.
ChatGPT вміє надавати такий вивід, і зараз ми розглянемо відповідні підказки.

Почнемо з табличного виводу:

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      padding: 10px;
      border-radius: 20px;
      border: 4px solid #4f5e77;
      background-color: white;
      font-family: inherit;
    }

    .divider {
      background-color: #4f5e77;
      height: 4px;
      border-radius: 10px;
      border: none;
      margin: 20px 10px;
    }

    .input {
      margin-bottom: 20px;
    }

    .title {
      font-family: "Hind Siliguri", sans-serif;
      font-size: 24px;
      line-height: 28px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .content {
      font-family: "Hind Siliguri", sans-serif;
      line-height: 22px;
      font-size: 100%;
      padding: 8px 0 16px;
    }

    table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }

    th {
      background-color: #4f5e77;
      color: white;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="input">
      <h2 class="title">Початковий запит:</h2>

      
      <p class="content">
        Створіть таблицю з наступними колонками: ім'я, вік, професія. Заповніть цю таблицю деякими випадковими значеннями.
      </p>
    </div>
    <hr class="divider" />
    <div class="output">
      <h2 class="title">Згенерований результат:</h2>

      
      <table>
        <tr>
          <th>Ім'я</th>
          <th>Вік</th>
          <th>Професія</th>
        </tr>
        <tr>
          <td>Аліса</td>
          <td>32</td>
          <td>Інженер</td>
        </tr>
        <tr>
          <td>Боб</td>
          <td>28</td>
          <td>Вчитель</td>
        </tr>
        <tr>
          <td>Чарлі</td>
          <td>35</td>
          <td>Лікар</td>
        </tr>
        <tr>
          <td>Девід</td>
          <td>40</td>
          <td>Вчений</td>
        </tr>
        <tr>
          <td>Емілі</td>
          <td>29</td>
          <td>Дизайнер</td>
        </tr>
      </table>
    </div>
  </div>
</body>

</html>

## HTML-таблиця
Ми можемо попросити ChatGPT згенерувати таблицю у форматі HTML:

## Markdown формат
Ми також можемо генерувати таблиці у форматі Markdown за допомогою ChatGPT:

<!DOCTYPE html>
<html>

<head>
  <style>
    .container {
      padding: 10px;
      border-radius: 20px;
      border: 4px solid #4f5e77;
      background-color: white;
      font-family: inherit;
    }

    .divider {
      background-color: #4f5e77;
      height: 4px;
      border-radius: 10px;
      border: none;
      margin: 20px 10px;
    }

    .input {
      margin-bottom: 20px;
    }

    .title {
      font-family: "Hind Siliguri", sans-serif;
      font-size: 24px;
      line-height: 28px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .content {
      font-family: "Hind Siliguri", sans-serif;
      line-height: 22px;
      font-size: 100%;
      padding: 8px 0 16px;
    }
  </style>
</head>

<body>

  <div class="container">
    <div class="input">
      <h2 class="title">Початковий запит:</h2>

      
      <p class="content">
        Створіть для мене таблицю з наступними стовпцями: Ім'я, вік, професія та заповніть цю таблицю деякими випадковими значеннями. Цю таблицю слід створити у форматі Markdown.</p>
    </div>
    <hr class="divider" />
    <div class="output">
      <h2 class="title">Згенерований результат:</h2>

      
      <p class="content">
        <pre>
|   Ім'я   |  Вік  |  Професія  |
|:--------:|:-----:|:------------:|
|  Аліса   |  28   |   Інженер    |
|   Боб    |  35   |   Вчитель    |
| Чарлі    |  42   |   Лікар      |
|  Девід   |  31   |   Митець     |
|  Емілі   |  29   |   Адвокат    |
</pre>
      </p>
    </div>
  </div>
</body>

</html>

Відкрийте для себе світ штучного інтелекту з нашим курсом "Вступ до ChatGPT". Пориньте в основи чат-ботів, керованих штучним інтелектом, зрозумійте, як працює ChatGPT, і дослідіть його захоплюючі можливості. Приєднуйтесь до нас у подорожі в майбутнє взаємодії людини та ШІ!

Зараз ми надамо вичерпний огляд ChatGPT, що охоплює його основні принципи,  інтерфейс, можливості інтеграції з API та важливі обмеження. Ви отримаєте глибоке розуміння того, що таке ChatGPT і як його можна використовувати.

Давайте заглибимося в стратегії розробки ефективної взаємодії з моделлю, досліджуючи методи створення чітких, контекстно-залежних запитів, які максимізують потенціал моделі для надання точних і релевантних відповідей.

Зараз ми зосередимося на методах і стратегіях представлення відповідей, отриманих за допомогою ChatGPT, в організованому і візуально привабливому вигляді.

Табличний Вивід

HTML-таблиця

Markdown формат

Awesome!

Табличний Вивід

HTML-таблиця

Markdown формат