HTML 表

エクセルの表のようなものをつくるにはtableタグを使います。そのため、表のことはテーブルと呼ばれます。

tableタグの基本
テーブルの装飾

tableタグの基本

名前	国語	数学
田中	71	50
佐藤	64	94
鈴木	78	80

表は、tr、th、tdの要素を組み合わせることで作ることができます。

tableタグ

表（テーブル）をつくるタグです。

trタグ

trは「Table Row（行）」の略です。表の行を１つ作成します。

thタグ

thは「Table Header（見出し）」の略です。表の見出しとなるセルを１つ作成します。

tdタグ

tdは「Table Data（データ）」に略です。表のデータとなるセルを１つ作成します。

先ほどのイメージの表をコードは以下の通りです。

<table>
	<tbody>
  <tr>
		<th>名前</th>
		<th>国語</th>		
		<th>数学</th>
	</tr>
	<tr>
		<td>田中</td>
		<td>71</td>		
		<td>50</td>
	</tr>
	<tr>
		<td>佐藤</td>
		<td>64</td>		
		<td>94</td>
	</tr>
	<tr>
		<td>鈴木</td>
		<td>78</td>		
		<td>80</td>
	</tr>
 </tbody>
</table>

テーブルの装飾

border属性

表に枠と罫線をつける場合は、border属性を指定します。

    <table border="1">

ここに指定できる数字は０以上の整数となっています。border属性の値を0にすれば、borderがなくなります。

bordercolor属性

枠に色をつける場合は、bordercolor属性を指定します。

    <table bordercolor="red">
    <table bordercolor="#C16565">

bgcolor属性

テーブルの背景に色をつける場合は、bgcolor属性を指定します。bgは「background（背景）」の略です。

tableタグにbgcolor属性で色を指定すると、表全体に色をつけました。

    <table border="1" bgcolor="yellow">

特定の行のみに色をつけたい場合は、trタグにbgcolor属性で色を指定します。thタグとtdタグも同じです。特定のセルのみに色をつけることができます。

    <tr bgcolor="yellow">
    <th bgcolor="pink">
    <td bgcolor="blue">

width属性とheight属性

width属性で表全体やセルの幅を変えることができます。hight属性は高さを指定します。

 <table width="50%"><!--表の横幅がブラウザの全体100%に対して50%の幅で表示される。-->

 <table width="500px">

 <table width="300px" height="150px">

セルのみの幅を変える場合は、表全体の長さ指定して、それに対して幅を調整します。高さの調整も同じです。

<table border="1" width="500px">
	<tbody>
  <tr>
		<th width="40%">名前</th>
		<th width="30%">国語</th>		
		<th width="30%">数学</th>
	</tr>
	<tr>
		<td>田中</td>
		<td>71</td>		
		<td>50</td>
	</tr>
	<tr>
		<td>佐藤</td>
		<td>64</td>		
		<td>94</td>
	</tr>
	<tr>
		<td>鈴木</td>
		<td>78</td>		
		<td>80</td>
	</tr>
 </tbody>
</table>

colspan属性とrowspan属性

セルを横に結合する場合は、colspan属性を指定します。指定する数値は結合したいセルの数です。

セルを縦に結合する場合は、rowspan属性を指定します。colspan属性と同じように、結合したいセルの数を指定します。

サンプルコードを見ればすぐわかります。

<!--rowspan属性を使って、１列目の１行目と２行目のセルを結合。-->
<table border="1">
	<tr>
		<td rowspan="2">セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>

実行結果

セル	セル	セル
セル	セル	セル

<!--colspan属性を使って、１行目の１列目と２列目のセルを結合、３列目と４列目と５列目のセルを結合。-->
<table border="1">
	<tr>
		<td colspan="2">セル</td>
		<td colspan="3">セル</td>
	</tr>
	<tr>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
		<td>セル</td>
	</tr>
</table>

実行結果

セル		セル
セル	セル	セル	セル	セル

align属性

文字のレイアウトにはalign属性に中央・左寄せ・右寄せを指定します。

     <table border="1" width="100%">
        <tr align="left"><!--文字を左に寄せるleft-->
          <th>セル</th>
          <th>セル</th>
        </tr>
        <tr align="center"><!--文字を左中央に寄せるcenter-->
          <td>セル</td>
          <td>セル</td>
        </tr>
        <tr align="right"><!--文字を右に寄せるright-->
          <td>セル</td>
          <td>セル</td>
        </tr>
      </table>

セル	セル
セル	セル
セル	セル