日々のこと

読者です 読者をやめる 読者になる 読者になる

日々のこと

HTMLやCSSのことも書いています。

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>

表示例

商品名 個数 価格
パン 10 100円
おにぎり 10 100円
10 100円

まとめ

・tdタグとthタグは通常の文と見出しという違いがある
・trタグで囲うと同じ列となる
・表にするときはtableタグで囲う

関連記事
www.hibinokoto01.com
www.hibinokoto01.com
www.hibinokoto01.com