<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">Devices list</caption>

			<thead class="table-head">
				<tr class="table-row">
					<th scope="col">Device</th>
					<th scope="col">Status</th>
					<th scope="col">IP</th>
					<th scope="col">Ping</th>
					<th scope="col">Actions</th>
				</tr>
			</thead>

			<tbody class="table-body">
				<tr class="table-row">
					<td>Kitchen Light</td>
					<td>
						<span class="badge badge-success">Online</span>
					</td>
					<td>
						<code class="code">192.168.1.21</code>
					</td>
					<td>12 ms</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>Hall Sensor</td>
					<td>
						<span class="badge badge-warning">Degraded</span>
					</td>
					<td>
						<code class="code">192.168.1.34</code>
					</td>
					<td>88 ms</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>Garage Relay</td>
					<td>
						<span class="badge badge-error">Offline</span>
					</td>
					<td>
						<code class="code">—</code>
					</td>
					<td>—</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 devices</span>
					</td>
				</tr>
			</tfoot>
		</table>
	</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;Devices list&lt;/caption&gt;
  &lt;thead class="table-head"&gt;
    &lt;tr class="table-row"&gt;
      &lt;th scope="col"&gt;Device&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;Kitchen Light&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>
</section>