<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>

		<div class="table-wrapper">
			<table class="table table-compact">
				<caption class="table-caption">Recent jobs</caption>

				<thead class="table-head">
					<tr class="table-row">
						<th scope="col">Job</th>
						<th scope="col">State</th>
						<th scope="col">Runtime</th>
						<th scope="col">Run ID</th>
						<th scope="col">Actions</th>
					</tr>
				</thead>

				<tbody class="table-body">
					<tr class="table-row">
						<td>Sync catalog</td>
						<td><span class="badge badge-success">Done</span></td>
						<td>18s</td>
						<td class="table-cell-mono">run_1048</td>
						<td class="table-cell-actions">
							<button class="btn btn-secondary btn-small" type="button">Logs</button>
						</td>
					</tr>
					<tr class="table-row">
						<td>Import archive</td>
						<td><span class="badge badge-warning">Running</span></td>
						<td>2m 14s</td>
						<td class="table-cell-mono">run_1047</td>
						<td class="table-cell-actions">
							<button class="btn btn-danger btn-small" type="button">Stop</button>
						</td>
					</tr>
					<tr class="table-row">
						<td>Export report</td>
						<td><span class="badge badge-error">Failed</span></td>
						<td>4s</td>
						<td class="table-cell-mono">run_1046</td>
						<td class="table-cell-actions">
							<button class="btn btn-accent btn-small" type="button">Retry</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tables HTML</span>
			<button class="code-example-copy" type="button">Copy</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="code-example-copy" type="button">Copy</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>