ブログで簡単なテーブルを作る <table>タグの基本

ブログ中に簡単な表を作りたい時はどうすれば良いのか? 表(テーブル)を作るときは、<table>タグを利用します。<table>タグの基本について説明します。

目次

<table>タグ

<table>タグは表(テーブル)を作成するためのタグです。

基本構造

・全体を<table>~</table>で囲みます。
・表の横一行を<tr>~</tr>で定義します。
・その中に<th>~</th>や<td>~</td>でセルを定義します。

見出しを定義するヘッダセル:<th>~</td>
 ヘッダセル内のテキストは、一般的にcssなどで強調するための定義がされていたりします。
データを定義するデータセル:<td>~<td>

<table>タグはレイアウト目的で使用されているケースもあります。 <table>タグは表作成するためのタグですので、レイアウト目的には、おすすめできません。

表作成の例

基本的な表

[html]
<table>
<tr><td>名前</td><td>年齢</td><td>身長</td></tr>
<tr><td>古谷</td><td>55</td><td>182</td></tr>
<tr><td>杉山</td><td>57</td><td>172</td></tr>
<tr><td>平田</td><td>42</td><td>165</td></tr>
</table>
[/html]

名前 年齢 身長
古谷 55 182
杉山 57 172
平田 42 165

ヘッダセル(<th>~</th>)を使った表

[html]
<table>
<tr><th>名前</th><th>年齢</th><th>身長</th></tr>
<tr><td>古谷</td><td>55</td><td>182</td></tr>
<tr><td>杉山</td><td>57</td><td>172</td></tr>
<tr><td>平田</td><td>42</td><td>165</td></tr>
</table>
[/html]

名前 年齢 身長
古谷 55 182
杉山 57 172
平田 42 165


[html]
<table>
<tr><th>名前</th><th>年齢</th><th>身長</th></tr>
<tr><th>古谷</th><td>55</td><td>182</td></tr>
<tr><th>杉山</th><td>57</td><td>172</td></tr>
<tr><th>平田</th><td>42</td><td>165</td></tr>
</table>
[/html]

名前 年齢 身長
古谷 55 182
杉山 57 172
平田 42 165