table要素、tr要素、th要素、td要素(表)

table要素は表全体(table)を表し、それぞれの行をtr要素(table row)、そのひとつひとつの項目(セル)の見出しをth要素(table header cell)、それぞれのセルの内容をtd要素(tabel data cell)で表す。



一行ごとにtr要素の開始タグと終了タグを設けて、th要素で見出しとtd要素で内容のセルを追加する。ブロックレベル要素。


例:3人の妖怪人間に関する名前と性別の表を作成する。


◆ html

	<table width="100" border="1">
	  <tr>
	    <th>名前</th><th>性別</th>
	  </tr>
	  <tr>
	    <td>べム</td><td>男</td>
	  </tr>
	  <tr>
	    <td>ベラ</td><td>女</td>
	  </tr>
	  <tr>
	    <td>ベロ</td><td>男</td>
	  </tr>
	</table>

◆実際の表示例



セルを統合する場合は、colspan属性とrowspan属性を使う。

1)colspan属性
横方向に値の数だけセルを統合する。
<td colspan="数字">
2)rowspan属性
縦方向に値の数だけセルを統合する。
<td rowspan="数字">

例:colspan属性とrowspan属性を使って表を作成する。


◆ html

	<table width="100" border="1">
	 <tr>
	 <th>No.1</th>
	 <th>No.2</th>
 	</tr>
 	<tr>
	 <td colspan="2">A</td>
	 </tr>
	 <tr>
	 <td rowspan="2">B</td>
	 <td>C</td>
	 </tr>
	 <tr>
	 <td>D</td>
 	</tr>
	 </table> 

◆実際の表示例



縦横方向に見出し情報を設ける場合は、scope属性を使う。
col値で列(横方向)、row値で行(縦方向)に見出しを設ける。

1)col値 … column(列)の略
<th scope="col">
2)row値 … rowspan(行)の略
<th scope="row">

例:scope属性を縦横方向に見出し情報を提供する。


◆ html

<table width="150" border="1" summary="価格表">
<tr>
<th scope="col">氏名</th>
<th scope="col">性別</th>
<th scope="col">年齢</th>
</tr>
<tr>
<th scope="row">べム</th>
<td>男性</td>
<td>300</td>
</tr>
<tr>
<th scope="row">ベラ</th>
<td>女性</td>
<td>260</td>
</tr>
<tr>
<th scope="row">べロ</th>
<td>男性</td>
<td>80</td>
</tr>
</table>

◆実際の表示例

go to top