table tag を使ってみよう
table tag を使ってみよう
.
←左記のソ−スです
windows
下記を[Ctrl]+[A]で
全選択して、コピー
mac
下記を+[A]で
全選択して、コピー
<table style="border:#d0d0d0 solid 1px;">
	<tr>
		<td style="border:#d0d0d0 solid 1px;">
			性別
		</td>
		<td style="border:#d0d0d0 solid 1px;">
			男です
		</td>
	</tr>
</table>
性別 男です
緑部分 <tr></tr>までが横一列分
性別 男です
緑部分 <td></td>までが一マス分(cell)
style="border:#d0d0d0 solid 1px;"
枠の設定 グレイ枠 直線 1px
性別 男です
上のソースをコピーしてメモ帳等の
テキストエディターに貼り付け

すべてのファイル table.html で保存
( table の部分は任意の名前)
table.html をブラウザ（IE等）で
開くと左のようになります

左の部分を増やすと


性別 男です 性別 男です 
<td style="border:#d0d0d0 solid 1px;">
	性別
</td>
<td style="border:#d0d0d0 solid 1px;">
	男です
</td>

<table style="border:#d0d0d0 solid 1px;">
	<tr>
		<td style="border:#d0d0d0 solid 1px;">
			性別
		</td>
		<td style="border:#d0d0d0 solid 1px;">
			男です
		</td>
		<td style="border:#d0d0d0 solid 1px;">
			性別
		</td>
		<td style="border:#d0d0d0 solid 1px;">
			男です
		</td>
	</tr>
</table>
左部分を増やすと


性別 男です
性別 男です 
<tr>
	<td style="border:#d0d0d0 solid 1px;">
		性別
	</td>
	<td style="border:#d0d0d0 solid 1px;">
		男です
	</td>
</tr>

<table style="border:#d0d0d0 solid 1px;">
	<tr>
		<td style="border:#d0d0d0 solid 1px;">
			性別
		</td>
		<td style="border:#d0d0d0 solid 1px;">
			男です
		</td>
	</tr>
	<tr>
		<td style="border:#d0d0d0 solid 1px;">
			性別
		</td>
		<td style="border:#d0d0d0 solid 1px;">
			男です
		</td>
	</tr>
</table>
縦一列目
横１		 縦一列目
横２		 縦一列目
横３
縦ニ列目横１ 縦ニ列目横２ 縦ニ列目横３
縦三列目横１ 縦三列目横２ 縦三列目横３
横に 3cell 縦に 3列にしてみます
border:#d0d0d0 solid 1px;
枠の設定 グレイ枠 直線 1px
padding:10pt;
枠と枠の中の文字の間隔が 10pt

<table style="border:#d0d0d0 solid 1px;">
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="border:#d0d0d0 solid 1px;padding:10pt;">
			縦一列目<br>横１</td>
		<td style="border:#d0d0d0 solid 1px;padding:10pt;">
			縦一列目<br>横２</td>
		<td style="border:#d0d0d0 solid 1px;padding:10pt;">
			縦一列目<br>横３</td>
	</tr>
<!-- //////////  横一列  //////// -->
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="border:#d0d0d0 solid 1px;">
			縦ニ列目横１</td>
		<td style="border:#d0d0d0 solid 1px;">
			縦ニ列目横２</td>
		<td style="border:#d0d0d0 solid 1px;">
			縦ニ列目横３</td>
	</tr>
<!-- //////////  横一列  //////// -->
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="border:#d0d0d0 solid 1px;">
			縦三列目横１</td>
		<td style="border:#d0d0d0 solid 1px;">
			縦三列目横２</td>
		<td style="border:#d0d0d0 solid 1px;">
			縦三列目横３</td>
	</tr>
<!-- //////////  横一列  //////// -->
</table>
↑上記のソ−スです
windows
下記を[Ctrl]+[A]で全選択して、コピー
mac
下記を+[A]で 全選択して、コピー
テーブルや cell のサイズを変える
style="width:幅px;height:高さpx;"
↓下記のソ−スです
windows
下記を[Ctrl]+[A]で
全選択して、コピー
mac
下記を+[A]で
全選択して、コピー
縦一列目
横１		 縦一列目
横２		 縦一列目横３
縦ニ列目
横１		 縦ニ列目
横２		 縦ニ列目横３
縦三列目
横１		 縦三列目
横２		 縦三列目横３ 

<table style="width:300px;height:300px;border:#d0d0d0 solid 1px;">
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="width:100px;height:150px;border:#d0d0d0 solid 1px;">
			縦一列目横１
		</td>
		<td style="width:150px;height:150px;border:#d0d0d0 solid 1px;">
			縦一列目横２
		</td>
		<td style="width:50px;height:150px;border:#d0d0d0 solid 1px;">
			縦一列目横３
		</td>
	</tr>
<!-- //////////  横一列  //////// -->
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="width:100px;height:50px;border:#d0d0d0 solid 1px;">
			縦ニ列目横１
		</td>
		<td style="width:150px;height:50px;border:#d0d0d0 solid 1px;">
			縦ニ列目横２
		</td>
		<td style="width:50px;height:50px;border:#d0d0d0 solid 1px;">
			縦ニ列目横３
		</td>
	</tr>
<!-- //////////  横一列  //////// -->
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="width:100px;height:100px;border:#d0d0d0 solid 1px;">
			縦三列目横１
		</td>
		<td style="width:150px;height:100px;border:#d0d0d0 solid 1px;">
			縦三列目横２
		</td>
		<td style="width:50px;height:100px;border:#d0d0d0 solid 1px;">
			縦三列目横３
		</td>
	</tr>
<!-- //////////  横一列  //////// -->
</table>
cell の中の文字位置
↓下記のソ−スです
windows
下記を[Ctrl]+[A]で
全選択して、コピー
mac
下記を+[A]で
全選択して、コピー
text-align:*****;
横方向 left; center; right;
vertical-align:*****;
縦方向 top; middle; bottom;
左上 真中上 右上
左真中 真中真中 右真中
左下 真中下 右下 

<table style="width:300px;height:300px;border:#d0d0d0 solid 1px;">

<!-- //////////  横一列  //////// -->
<tr>
<td style="text-align:left;vertical-align:top;border:#d0d0d0 solid 1px;">
左上
</td>
<td style="text-align:center;vertical-align:top;border:#d0d0d0 solid 1px;">
真中上
</td>
<td style="text-align:right;vertical-align:top;border:#d0d0d0 solid 1px;">
右上
</td>
</tr>
<!-- //////////  横一列  //////// -->

<!-- //////////  横一列  //////// -->
<tr>
<td style="text-align:left;vertical-align:middle;border:#d0d0d0 solid 1px;">
左真中
</td>
<td style="text-align:center;vertical-align:middle;border:#d0d0d0 solid 1px;">
真中真中
</td>
<td style="text-align:right;vertical-align:middle;border:#d0d0d0 solid 1px;">
右真中
</td>
</tr>
<!-- //////////  横一列  //////// -->

<!-- //////////  横一列  //////// -->
<tr>
<td style="text-align:left;vertical-align:bottom;border:#d0d0d0 solid 1px;">
左下
</td>
<td style="text-align:center;vertical-align:bottom;border:#d0d0d0 solid 1px;">
真中下
</td>
<td style="text-align:right;vertical-align:bottom;border:#d0d0d0 solid 1px;">
右下
</td>
</tr>
<!-- //////////  横一列  //////// -->
</table>
table や cell に色をつけたり画像を貼る
style="background:色 url('背景画像アドレス');"
↓下記のソ−スです
windows
下記を[Ctrl]+[A]で
全選択して、コピー
mac
下記を+[A]で
全選択して、コピー
table 全体を gray に
左上、真中上を green に
左真中を blue に
右真中に画像を貼る
右下に背景をpinkにして画像を一点貼る
左上 真中上 右上
左真中 真中 右真中
左下 真中下 右下

背景画像の位置を指定して貼る
左下 → 位置を指定しない
<td style="background:url('画像の url') no-repeat;">左下</td>
真中下 → 位置をセンターに center center
<td style="background:url('画像の url') no-repeat center center;">
真中下</td>
右下 → 背景をpinkにして位置を右の下 right bottom
<td style="background:pink url('画像の url') no-repeat right bottom;">
右下</td>
真中 → 位置を右へ 30% 下へ 90%
<td style="background:url('画像の url') no-repeat 30% 90%;">真中</td>
<table style="width:300px;height;300px;
background:#c0c0c0;border:#d0d0d0 solid 1px;">
<!-- //////////  横一列  //////// -->
  <tr  style="text-align:center;">
	<td style="background:green;border:#d0d0d0 solid 1px;">
		左上
	</td>
	<td style="background:green;border:#d0d0d0 solid 1px;">
		真中上
	</td>
	<td style="border:#d0d0d0 solid 1px;">
		右上
	</td>
  </tr>
<!-- //////////  横一列  //////// -->

<!-- //////////  横一列  //////// -->
  <tr  style="text-align:center;">
	<td style="background:blue;border:#d0d0d0 solid 1px;">
		左真中
	</td>
	<td style="background:url('画像のurl') no-repeat 30% 90%;
border:#d0d0d0 solid 1px;">
		真中
	</td>
	<td style="background:url('画像のurl');border:#d0d0d0 solid 1px;">
		右真中
	</td>
  </tr>
<!-- //////////  横一列  //////// -->

<!-- //////////  横一列  //////// -->
  <tr  style="text-align:center;">
	<td style="background:url('画像のurl') no-repeat;
border:#d0d0d0 solid 1px;">
		左下
	</td>
	<td style="background:url('画像のurl') no-repeat center center;
border:#d0d0d0 solid 1px;">
		真中下
	</td>
	<td style="background:pink url('画像のurl') no-repeat right bottom;
border:#d0d0d0 solid 1px;">
		右下
	</td>
  </tr>
<!-- //////////  横一列  //////// -->
</table>
cell を横や縦に連結する
横に
3cell 連結
横に
2cell 連結 		縦に 3cell
ぶち抜き
横 3cell
2cell 使用 		横 3cell
2cell 使用
横 3cell
2cell 使用 		縦に 2cell
ぶち抜き
横 3cell
離れた 2cell 		横 3cell
離れた 2cell
横 3cell
全部使える 		横 3cell
全部使える 		横 3cell
全部使える
横に 3cell 連結
<td colspan="3">
横に 2cell 連結
<td colspan="2">
縦に 3cell ぶち抜き
<td rowspan="3">
縦に 2cell ぶち抜き
<td rowspan="2">

<table style="width:100%;border-collapse:collapse;">
  <tr>
	<td colspan="3" style="background:yellow;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横に<br> 3cell 連結
	</td>
  </tr>
  <tr>
	<td colspan="2" style="background:lightgreen;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横に<br> 2cell 連結
	</td>
	<td rowspan="3" style="background:lightgreen;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		縦に 3cell <br>ぶち抜き
	</td>
  </tr>
  <tr>
	<td style="background:ivory;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>2cell 使用
	</td>
	<td style="background:ivory;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>2cell 使用
	</td>
  </tr>
  <tr>
	<td style="background:pink;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>2cell 使用
	</td>
	<td rowspan="2" style="background:pink;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		縦に 2cell <br>ぶち抜き
	</td>
  </tr>
  <tr>
	<td style="background:lightblue;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>離れた 2cell 
	</td>
	<td style="background:lightblue;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>離れた 2cell 
	</td>
  </tr>
  <tr>
	<td style="background:aqua;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>全部使える
	</td>
	<td style="background:aqua;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>全部使える
	</td>
	<td style="background:aqua;text-align:center;
border:#d0d0d0 solid 1px;padding:5pt;">
		横 3cell <br>全部使える
	</td>
  </tr>
</table>
↑上記のソ−スです
windows
下記を[Ctrl]+[A]で全選択して、コピー
mac
下記を+[A]で 全選択して、コピー