会社概要の表

LPの節 ／ パターン集トップ

会社・店舗概要の表。thを縦に積み、罫は横だけ

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<section class="company page" id="company" aria-labelledby="company-title">
  <h2 id="company-title">店舗概要</h2>
  <table class="company__table">
    <tbody>
      <tr><th scope="row">店名</th><td>つばめ珈琲焙煎所</td></tr>
      <tr><th scope="row">所在地</th><td>常盤野市中町2-14 つばめビル1階</td></tr>
      <tr><th scope="row">営業時間</th><td>8:00〜18:00（ラストオーダー 17:30）</td></tr>
      <tr><th scope="row">定休日</th><td>水曜・第2木曜</td></tr>
      <tr><th scope="row">連絡先</th><td>info@tsubame-coffee.example.com</td></tr>
    </tbody>
  </table>
</section>

.company__table {
  border-collapse: collapse;
  inline-size: 100%;
  max-inline-size: 40rem;
  margin-block-start: var(--space-5);
  border-block-start: 1px solid var(--color-border);
}
.company__table th,
.company__table td {
  padding: var(--space-3) var(--space-4);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  vertical-align: top;
}
.company__table th {
  inline-size: 7em;
  white-space: nowrap;                /* ラベルは短い語に揃える前提 */
  padding-inline-start: 0;
  font-weight: 700;
}

確認する#

• th に scope="row" があり、読み上げでラベルと値が対応する
• 罫は横だけで、縦罫や縞背景を重ねていない
• 375pxで所在地が折り返しても、ラベル列の幅が揺れない

関連#

• 数値列の表
• 余白
• 出発点のCSS