お問い合わせはこちら

092-123-4567

営業時間 10:00 ~ 23:00 (年中無休)

コードサンプル
- 表組み -

基本的な表組み

見出し1 ここに内容が入ります
見出し2 ここに内容が入ります
見出し3 ここに内容が入ります
Example code
<table class="baseTable">
  <tr>
    <th>見出し1</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>ここに内容が入ります</td>
  </tr>
</table>
 
見出し1 見出し2 見出し3
ここに内容が入ります ここに内容が入ります ここに内容が入ります
Example code
<table class="baseTable">
  <tr>
    <th>見出し1</th>
    <th>見出し2</th>
    <th>見出し3</th>
  </tr>
  <tr>
    <td>ここに内容が入ります</td>
    <td>ここに内容が入ります</td>
    <td>ここに内容が入ります</td>
  </tr>
</table>

基本的な表組み(スマホ対応)

見出し1 ここに内容が入ります
見出し2 ここに内容が入ります
見出し3 ここに内容が入ります
Example code
<table class="baseTable baseTable__sp">
  <tr>
    <th>見出し1</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し2</th>
    <td>ここに内容が入ります</td>
  </tr>
  <tr>
    <th>見出し3</th>
    <td>ここに内容が入ります</td>
  </tr>
</table>

2要素横並び(table版)

Example code
<table class="menuTable rowBox__2elem">
  <tbody class="boxInner">
    <tr>
      <th>ウーロン茶</th>
      <td>300円</td>
    </tr>
    <tr>
      <th>コーラ</th>
      <td>300円</td>
      </tr>
  </tbody>
  <tbody class="boxInner">
    <tr>
      <th>オレンジジュース</th>
      <td>300円</td>
    </tr>
    <tr>
      <th>ノンアルコールビール</th>
      <td>450円</td>
    </tr>
  </tbody>
</table>

※table要素に「rowBox__2elem」のクラスを付与し、子要素の tbodyに「boxInner」のクラスを付与します。
※逆並びの場合 class="rowBox__2elem--reverse"
※スマホ表示のときは縦並びになります。

3要素横並び(table版)

Example code
<table class="menuTable rowBox__3elem">
  <tbody class="boxInner">
    <tr>
      <th>生ビール</th>
      <td>540円</td>
    </tr>
    <tr>
      <th>焼酎(芋・麦・米)</th>
      <td>432円</td>
    </tr>
  </tbody>
  <tbody class="boxInner">
    <tr>
      <th>日本酒(冷、熱燗)1合</th>
      <td>540円</td>
    </tr>
    <tr>
      <th>チューハイ各種</th>
      <td>480円</td>
    </tr>
  </tbody>
  <tbody class="boxInner">
    <tr>
      <th>カクテル各種</th>
      <td>520円</td>
    </tr>
  </tbody>
</table>