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

基本的な表組み

見出し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>

2要素横並び（table版）

ウーロン茶 300円
コーラ 300円
オレンジジュース 300円
ノンアルコールビール 450円 
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版）

生ビール 540円
焼酎（芋・麦・米） 432円
日本酒（冷、熱燗）1合 540円
チューハイ各種 480円
カクテル各種 520円 
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>