page-tables.html

---
layout: default
title: Tables
permalink: /tables/
is_searchable: true
---

<section class="sui-row-with-sidenav">

	<!-- Navigation -->
	<div class="sui-sidenav" role="navigation">

		<ul class="sui-vertical-tabs">

			<li class="sui-vertical-tab current">
				<a href="#" role="button" data-tab="preview">Preview</a>
			</li>

			<li class="sui-vertical-tab">
				<a href="#" role="button" data-tab="documentation">Documentation</a>
			</li>

		</ul>

	</div>

	<!-- SECTION: Preview -->
	<div class="sui-box" data-tab="preview">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Preview</h2>
		</div>

		<div class="sui-box-body">

			<p>Add <code>sui-table</code> class to style correctly your table element.</p>

			<table class="sui-table">

				<thead>
					<tr>
						<th>Title A</th>
						<th>Title B</th>
						<th>Title C</th>
					</tr>
				</thead>

				<tbody>

					<tr>
						<td class="sui-table-item-title">Row Title</td>
						<td>Row content...</td>
						<td><input type="text" class="sui-form-control" /></td>
					</tr>

					<tr>
						<td class="sui-table-item-title">Row Title</td>
						<td>Row content...</td>
						<td><input type="text" class="sui-form-control" /></td>
					</tr>

					<tr>
						<td class="sui-table-item-title">Row Title</td>
						<td>Row content...</td>
						<td><input type="text" class="sui-form-control" /></td>
					</tr>

				</tbody>

				<tfoot>
					<tr>
						<td colspan="3" style="text-align: right;">
							<button class="sui-button sui-button-blue">Save Changes</button>
						</td>
					</tr>
				</tfoot>

			</table>

		</div>

	</div>

	<!-- SECTION: Documentation -->
	<div class="sui-box" data-tab="documentation" style="display: none;">

		<div class="sui-box-header">
			<h2 class="sui-box-title">Documentation</h2>
		</div>

		<div class="sui-box-body">

			<!-- ROW: Specifications -->
			<div
				id="showcase-specs"
				utilities="false"
				utilities-page="{{ site.baseurl }}/utilities/"
				monochrome="true"
				rtl-lang="false"
			></div>

			<!-- ROW: Markup -->
			<div class="sui-box-settings-row">

				<div class="sui-box-settings-col-1">
					<h3 class="sui-settings-label">Markup</h3>
				</div>

				<div class="sui-box-settings-col-2">

					<div class="demo-code-block">

<pre class="sui-code-snippet html">
&lt;table class=&quot;sui-table&quot;&gt;

	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Title A&lt;/th&gt;
			&lt;th&gt;Title B&lt;/th&gt;
			&lt;th&gt;Title C&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;

	&lt;tbody&gt;

		&lt;tr&gt;
			&lt;td class=&quot;sui-table-item-title&quot;&gt;Row Title&lt;/td&gt;
			&lt;td&gt;Row content...&lt;/td&gt;
			&lt;td&gt;&lt;input type=&quot;text&quot; class=&quot;sui-form-control&quot; /&gt;&lt;/td&gt;
		&lt;/tr&gt;

	&lt;/tbody&gt;

	&lt;tfoot&gt;
		&lt;tr colspan=&quot;3&quot;&gt;
			&lt;td&gt;
				&lt;button class=&quot;sui-button sui-button-blue&quot;&gt;
					Save Changes
				&lt;/button&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tfoot&gt;

&lt;/table&gt;
</pre>

					</div>

				</div>

			</div>

		</div>

	</div>

</section>