表(テーブル)って何だろう?
情報を整理して一目でわかるようにしたいとき、表(テーブル)を使うとすごく便利です。たとえば、クラスの時間割や、商品の価格リストなど、行と列で情報を整理したいときに使います。
表を作る魔法の言葉
表の始まり: <table>
まずは、<table>
タグで、表を作ることを宣言します。これが表作りのスタートです。
行を作る: <tr>
次に、<tr>
(テーブル行)を使って、表の行を作ります。tr
は “table row” の略です。
見出しを作る: <th>
表の見出し(たとえば、各列のタイトル)を作りたいときは、<th>
(テーブル見出し)を使います。これで、その列が何を表しているのかが一目でわかります。
データを入れる: <td>
そして、<td>
(テーブルデータ)を使って、実際の情報を各セルに入れます。td
は “table data” の略です。
簡単な表の例
たとえば、フルーツの名前と価格の表を作りたいとき、こんな感じになります。
HTML
<table>
<tr>
<th>フルーツ</th>
<th>価格</th>
</tr>
<tr>
<td>リンゴ</td>
<td>100円</td>
</tr>
<tr>
<td>バナナ</td>
<td>80円</td>
</tr>
</table>
フルーツ | 価格 |
---|---|
リンゴ | 100円 |
バナナ | 80円 |
まとめ
<table>
で表を始めて、<tr>
で行を作り、<th>
で見出し、<td>
でデータを入れる。これだけで、あなたも情報をきれいに整理した表を作ることができますよ!
コメント