<section class="section docs-section" id="tables">
                  <h2 class="section-title">Tables</h2>
                  <p class="docs-section-description">Таблицы используют базовый класс .table, semantic table markup и дополнительные элементы: .table-caption, .table-head, .table-body, .table-foot.</p>
                  <div class="block">
                    <h3 class="block-title">Basic table</h3>
                    <table class="table">
                      <caption class="table-caption">Projects list</caption>
                      <thead class="table-head">
                        <tr class="table-row">
                          <th scope="col">Project</th>
                          <th scope="col">Status</th>
                          <th scope="col">Owner</th>
                          <th scope="col">Updated</th>
                          <th scope="col">Actions</th>
                        </tr>
                      </thead>
                      <tbody class="table-body">
                        <tr class="table-row">
                          <td>Website Redesign</td>
                          <td><span class="badge badge-success">Online</span></td>
                          <td><code class="code">@design</code></td>
                          <td>2 min ago</td>
                          <td>
                            <button class="btn btn-secondary btn-small" type="button">Open</button>
                            <button class="btn btn-accent btn-small" type="button">Toggle</button>
                          </td>
                        </tr>
                        <tr class="table-row">
                          <td>Billing API</td>
                          <td><span class="badge badge-warning">Degraded</span></td>
                          <td><code class="code">@backend</code></td>
                          <td>1 hour ago</td>
                          <td>
                            <button class="btn btn-secondary btn-small" type="button">Open</button>
                            <button class="btn btn-danger btn-small" type="button">Restart</button>
                          </td>
                        </tr>
                        <tr class="table-row table-row-muted">
                          <td>Archive Import</td>
                          <td><span class="badge badge-error">Offline</span></td>
                          <td><code class="code">@ops</code></td>
                          <td>Yesterday</td>
                          <td>
                            <button class="btn btn-secondary btn-small" type="button" disabled>Open</button>
                            <button class="btn btn-accent btn-small" type="button" disabled>Toggle</button>
                          </td>
                        </tr>
                      </tbody>
                      <tfoot class="table-foot">
                        <tr class="table-row">
                          <td colspan="5"><span class="table-meta">Total: 3 projects</span></td>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                  <div class="block mt-6">
                    <h3 class="block-title">Compact table</h3>
                    <GnTable :columns="[{ key: 'job', label: 'Job' }, { key: 'state', label: 'State' }, { key: 'runtime', label: 'Runtime' }, { key: 'runId', label: 'Run ID' }, { key: 'actions', label: 'Actions' }]" :rows="[{ job: 'Sync catalog', state: 'Done', runtime: '18s', runId: 'run_1048' }, { job: 'Import archive', state: 'Running', runtime: '2m 14s', runId: 'run_1047' }, { job: 'Export report', state: 'Failed', runtime: '4s', runId: 'run_1046' }]" caption="Recent jobs" class="table-compact">
                      <template #cell-state="{ value }"><GnBadge :variant="value === 'Done' ? 'success' : value === 'Running' ? 'warning' : 'error'">{{ value }}</GnBadge></template>
                      <template #cell-runId="{ value }"><code class="code">{{ value }}</code></template>
                      <template #cell-actions="{ row }">
                        <GnButton variant="secondary" size="sm">{{ row.state === 'Running' ? 'Stop' : 'Logs' }}</GnButton>
                        <GnButton :variant="row.state === 'Failed' ? 'accent' : 'danger'" size="sm">{{ row.state === 'Failed' ? 'Retry' : 'Stop' }}</GnButton>
                      </template>
                    </GnTable>
                  </div>
                  <div class="code-example">
                    <div class="code-example-header">
                      <span class="code-example-title">Tables HTML</span>
                      <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                    </div>
                    <pre><code class="language-html">&lt;table class="table"&gt;
  &lt;caption class="table-caption"&gt;Projects list&lt;/caption&gt;
  &lt;thead class="table-head"&gt;
    &lt;tr class="table-row"&gt;
      &lt;th scope="col"&gt;Project&lt;/th&gt;
      &lt;th scope="col"&gt;Status&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody class="table-body"&gt;
    &lt;tr class="table-row"&gt;
      &lt;td&gt;Website Redesign&lt;/td&gt;
      &lt;td&gt;&lt;span class="badge badge-success"&gt;Online&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
                  </div>
                  <div class="code-example">
                    <div class="code-example-header">
                      <span class="code-example-title">Compact Table HTML</span>
                      <button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
                    </div>
                    <pre><code class="language-html">&lt;table class="table table-compact"&gt;
  &lt;caption class="table-caption"&gt;Recent jobs&lt;/caption&gt;
  &lt;thead class="table-head"&gt;
    &lt;tr class="table-row"&gt;
      &lt;th scope="col"&gt;Job&lt;/th&gt;
      &lt;th scope="col"&gt;State&lt;/th&gt;
      &lt;th scope="col"&gt;Run ID&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody class="table-body"&gt;
    &lt;tr class="table-row"&gt;
      &lt;td&gt;Sync catalog&lt;/td&gt;
      &lt;td&gt;&lt;span class="badge badge-success"&gt;Done&lt;/span&gt;&lt;/td&gt;
      &lt;td class="table-cell-mono"&gt;run_1048&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
                  </div>
</section>