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

<table style="width:300px;height:300px;border:#d0d0d0 solid 1px;">
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="width:100px;height:150px;border:#d0d0d0 solid 1px;">
			縦一列目横1
		</td>
		<td style="width:150px;height:150px;border:#d0d0d0 solid 1px;">
			縦一列目横2
		</td>
		<td style="width:50px;height:150px;border:#d0d0d0 solid 1px;">
			縦一列目横3
		</td>
	</tr>
<!-- //////////  横一列  //////// -->
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="width:100px;height:50px;border:#d0d0d0 solid 1px;">
			縦ニ列目横1
		</td>
		<td style="width:150px;height:50px;border:#d0d0d0 solid 1px;">
			縦ニ列目横2
		</td>
		<td style="width:50px;height:50px;border:#d0d0d0 solid 1px;">
			縦ニ列目横3
		</td>
	</tr>
<!-- //////////  横一列  //////// -->
<!-- //////////  横一列  //////// -->
	<tr>
		<td style="width:100px;height:100px;border:#d0d0d0 solid 1px;">
			縦三列目横1
		</td>
		<td style="width:150px;height:100px;border:#d0d0d0 solid 1px;">
			縦三列目横2
		</td>
		<td style="width:50px;height:100px;border:#d0d0d0 solid 1px;">
			縦三列目横3
		</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]で 全選択して、コピー