<%- include('../../_common/ja/_head', {
  key: 'docs',
  pagetitle: 'Table | Document'
}) %>

<%- include('../../_component/docs/ja/_header') %>

<%- include('../../_component/docs/ja/_menu') %>

<div class="uc-grid _small-col-full _nowrap">

<%- include('../../_component/docs/ja/_sidebar', {
  current: 'table'
}) %>

  <div class="uc-grid-cell _col-fit">

  <main class="uc-content">
    <section class="uc-section">

      <h2 class="uc-section-title">Table</h2>
      <p>You can create a table by specifying the <code>uc-table</code> class.</p>

      <div class="doc-component-box" id="c-1">
        <h3>1. Basic</h3>
        <p>Create a basic table.</p>

        <div class="doc-component-preview">
          <table class="uc-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Summary</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>001</td>
                <td>Test field</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
              </tr>
              <tr>
                <td>002</td>
                <td>Test field</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
              </tr>
              <tr>
                <td>003</td>
                <td>Test field</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;table class="uc-table"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Summary&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;001&lt;/td&gt;
      &lt;td&gt;Test field&lt;/td&gt;
      &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;002&lt;/td&gt;
      &lt;td&gt;Test field&lt;/td&gt;
      &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;003&lt;/td&gt;
      &lt;td&gt;Test field&lt;/td&gt;
      &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
        </div>
      </div>

      <div class="doc-component-box" id="c-2">
        <h3>2. Fit to width</h3>
        <p>By specifying the <code>_col-full</code> class, you can display the table as wide as possible.</p>

        <div class="doc-component-preview">
          <table class="uc-table _col-full">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Summary</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>001</td>
                <td>Test field</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
              </tr>
              <tr>
                <td>002</td>
                <td>Test field</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
              </tr>
              <tr>
                <td>003</td>
                <td>Test field</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="uc-code-unit">
<pre><code class="html">&lt;table class="uc-table _col-full"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;ID&lt;/th&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Summary&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;001&lt;/td&gt;
      &lt;td&gt;Test field&lt;/td&gt;
      &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;002&lt;/td&gt;
      &lt;td&gt;Test field&lt;/td&gt;
      &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;003&lt;/td&gt;
      &lt;td&gt;Test field&lt;/td&gt;
      &lt;td&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, accusantium.&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
        </div>
      </div>

    </section>

    <div class="uc-pager-unit">
      <div class="uc-btn"><a href="./list.html">← List</a></div>
      <div class="uc-btn _primary"><a href="./photo.html">Photo →</a></div>
    </div>
  </main>

  </div>

</div>

<%- include('../../_component/_footer') %>

<%- include('../../_common/_foot') %>
