HTMLで表（テーブル）を作る基本と崩れない書き方

ホームページで料金表やスケジュールなどを表示したいとき、
表（テーブル）はとても便利です。

ただ、、、

・表を作ったらレイアウトがぐちゃぐちゃになった
・スマホで横にはみ出した
・どう書けばいいかわからない

こんな経験をしている人はとても多いです。

そこでこの記事では、初心者向けに表の作り方と、崩れないコツをわかりやすく解説します。

HTMLの基本を押さえれば、表は簡単に作れますよ！

このページを読んでわかること

HTMLで表が崩れるよくある原因

まずは、HTMLで表が崩れるよくある原因からお伝えします。

タグの順番が間違っている

表は、決まった形で書かないと崩れます。

幅を指定していない

何も設定しないと、内容によって表がはみ出しやすくなります。

スマホ対応していない

パソコンではきれいでも、スマホでは横幅が足りず崩れることが多いです。

HTMLで表を作る基本の書き方

次に、HTMLで表を作る基本の書き方をお伝えします。

まずは一番シンプルなテーブルを作ってみましょう。

<table border="1">
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>名前</td>
    <td>たくま</td>
  </tr>
</table>

各タグの意味

<table> 表全体
<tr> 行
<th> 見出しセル
<td> データセル

この形が表の基本です。

見やすい表にするための基本ポイント

見やすい表にするための基本ポイントをご紹介します。

見出しはthを使う

thを使うと、文字が太くなり見やすくなります。

行と列をそろえる

すべての行で、tdの数をそろえると崩れません。

表がはみ出るときの直し方（スマホ対応）

表がはみ出るときの直し方をお伝えします。

表の横幅を画面いっぱいにする

<table style="width:100%;">

これでスマホでもはみ出しにくくなります。

横スクロールで対応する方法（応急処置）

どうしても列が多い場合は、スクロールさせます。

<div style="overflow-x:auto;">
  <table>

これでスマホでも見られるようになります。

よくある失敗と直し方

よくある失敗と直し方をお伝えします。

列の数が合っていない

<tr>
  <td>名前</td>
</tr>

👉 列をそろえるようにしましょう。

幅指定をしていない

👉 width:100% を入れるだけで改善します。

スマホで崩れる

👉 スクロール対応か幅指定を使いましょう。

初心者向けおすすめテーブルの書き方

初心者向けのテーブルの書き方は、まずはこの形が安心です。

<table border="1" style="width:100%;">
  <tr>
    <th>項目</th>
    <th>内容</th>
  </tr>
  <tr>
    <td>名前</td>
    <td>たくま</td>
  </tr>
</table>

これでパソコンでもスマホでも見やすく表示されますよ。

まとめ

「HTMLで表（テーブル）を作る基本と崩れない書き方」の内容はいかがでしたでしょうか？

HTMLで表を作るのは、それほど難しくはありません。

✔ table・tr・th・tdを使う
✔ 幅を100%にする
✔ スマホ対策を入れる

これだけで、表はほぼ崩れなくなりますよ。

最初はややこしいですけど、ホームページに表を入れることができれば、
とても見やすいホームページになります。

ぜひ tableもマスターしていきましょうね！
（私も、HTMLの中で、tableタグを一番最初に覚えましたよ！）