tdタグthタグtrタグの違い

tdタグthタグtrタグの違いについて
tdタグとは
thタグとは
tdタグとthタグの違い
trタグについて
それぞれのタグを使って表にした例
まとめ

tdタグthタグtrタグの違いについて

それぞれのタグの意味についてや違いについて書いてみました。

tdタグとは

・セルを意味するタグの1つ
・このタグの間にテキストを書く
・書かれた内容は通常の文となり左揃いとなる。

（例）数字を書く場合

<td>300</td>

thタグとは

・セルを意味するタグの1つ
・このタグの間にテキストを書く
・書かれた内容は見出しとなり太字で中央揃いとなる。

（例）「個数」という見出しにする場合

<th>個数</th>

tdタグとthタグの違い

タグの間に書かれた内容が、「通常の文で左揃い」か「見出しで太字となり中央揃い」かという部分が違う。
（tdが通常の文、thが見出し）

（例）tdタグとthタグを組み合わせた書き方

<th>個数</th>
<td>300</td>

trタグについて

・trタグは列を表す
・このタグの間に書かれたものが同じ列となる。

（例）商品名や個数を同じ列にする場合

<tr>
<th>商品名</th>
<th>個数</th>
<th>価格</th>
</tr>

それぞれのタグを使って表にした例

商品名や個数、価格などの表の例

<table>
<tr>
 <th>商品名</th>
 <th>個数</th>
 <th>価格</th>
 </tr>
 <tr>
 <td>パン</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 <tr>
 <td>おにぎり</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 <tr>
 <td>水</td>
 <td>10</td>
 <td>100円</td>
 </tr>
 </table>

表示例