imgをtable構成 - Web徒然なるままに

※summaryは、表の内容がわかるようにtable要素に必ず入れる。
※rowは畑を意味し1行を指す。rowspan＝行結合。colspan＝列結合。
※border-collapse: collapse;　隣接するセルボーダーを重ねて表示する。

＜HTML＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5 - table</title>

<link rel="stylesheet" href="table.css">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<script src="sample.js"></script>
</head>

<body>
<div id="wrapper">
<header>2011年いろいろ</header>
<div id="content">

<table id="table01" summary="table練習1"><caption>通常のtable</caption>
  <tr id="tr01"><td id="td01">1</td><td id="td02">2</td><td id="td3" rowspan="2">3</td><td id="td04">4</td><td id="td05">5</td></tr>
  <tr id="tr02"><td id="td06">6</td><td id="td07"  rowspan="4">7</td><td id="td8" colspan="2">8</td></tr>
  <tr id="tr03"><td id="td09" rowspan="2">9</td><td id="td10" colspan="3">10</td></tr>
  <tr id="tr04"><td id="td11" colspan="2">11</td><td id="td12" rowspan="2">12</td></tr>
  <tr id="tr05"><td id="td13">13</td><td id="td14">14</td><td id="td15">15</td></tr>
</table>
     
<table id="table02" summary="table練習2"><caption>CSSでborder-spacing:0px;border-collapse:separate;を指定したtable</caption>
  <tr id="tr01"><td id="td01">1</td><td id="td02">2</td><td id="td3" rowspan="2">3</td><td id="td04">4</td><td id="td05">5</td></tr>
  <tr id="tr02"><td id="td06">6</td><td id="td07"  rowspan="4">7</td><td id="td8" colspan="2">8</td></tr>
  <tr id="tr03"><td id="td09" rowspan="2">9</td><td id="td10" colspan="3">10</td></tr>
  <tr id="tr04"><td id="td11" colspan="2">11</td><td id="td12" rowspan="2">12</td></tr>
  <tr id="tr05"><td id="td13">13</td><td id="td14">14</td><td id="td15">15</td></tr>
</table>
     

<table id="table03" summary="2011年記念写真" cellpadding="0" cellspacing="0"><caption>直接tableにcellpadding="0" cellspacing="0"を指定</caption>
  <tr id="tr01">
    <td id="td01"><img class="img_seihoukei" src="CA3G0964.JPG" alt="草もち"></td>
    <td id="td02"><img class="img_seihoukei" src="CA3G0860.JPG" alt="パラグアイ料理"></td>
    <td id="td3" rowspan="2"><img class="img_tatenaga" src="CA3G0969.JPG" alt="雛祭り"></td>
    <td id="td04"><img class="img_seihoukei" src="CA3G0467.JPG" alt="かぼちゃ"></td>
    <td id="td05"><img class="img_seihoukei" src="IMGP3487.JPG" alt="かまくら"></td></tr>
  <tr id="tr02">
    <td id="td06"><img class="img_seihoukei" src="IMGP2797.JPG" alt="ドラゴンフルーツ"></td>
    <td id="td07" rowspan="4"><img class="img_tyouhoukei" src="IMGP3365.JPG" alt="花火"></td>
    <td id="td8" colspan="2"><img class="img_yokonaga" src="IMGP3427.JPG" alt="作品展"></td>
  </tr>
  <tr id="tr03">
    <td id="td09" rowspan="2"><img class="img_tatenaga" src="CA3G0562.JPG" alt="茶まんじゅう"></td>
    <td id="td10" colspan="3"><img class="img_yokolong" src="IMGP3231.JPG" alt="そば菜" width="582" height="228"></td></tr>
  <tr id="tr04">
    <td id="td11" colspan="2"><img class="img_yokonaga" src="IMGP3438.JPG" alt="クリスマスケーキ"></td>
    <td id="td12" rowspan="2"><img class="img_tatenaga" src="CA3G0766.JPG" alt="クリスマスツリー"></td></tr>
  <tr id="tr05">
    <td id="td13"><img class="img_seihoukei" src="IMGP3332.JPG" alt="蕎麦ひき石"></td>
    <td id="td14"><img class="img_seihoukei" src="IMGP3202.JPG" alt="はな"></td>
    <td id="td15"><img class="img_seihoukei" src="IMGP3199.JPG" alt="そばの花"></td></tr>
</table>

<!-- /#content --></div>
<footer></footer>   
<!--/#wrapper--></div>
</body>
</html>

＜CSS＞

header{
	position:absolute;
	top:830px;
	left:240px;
	color:#0066FF;
	font-size:36px;
	font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
	}

/*
solid		1本線
double		2本線　二重線の間に背景色が表示される
groove		彫りこみ。立体的に窪んだ線
ridge		浮き出し。立体的に隆起した線で表示されます。
inset		上と左のボーダーが暗く、下と右のボーダーが明るく表示
		され、ボーダーで囲まれた領域全体が立体的に窪んだよう
　　　　　　　　　に表示されます。
		上下左右の一部だけに指定しても立体感は出ません。
outset		上と左のボーダーが明るく、下と右のボーダーが暗く表示
　　　　　　　　　され、ボーダーで囲まれた領域全体が立体的に隆起したよう
　　　　　　　　　に表示されます。
　　　　　　　　　上下左右の一部だけに指定しても立体感は出ません。
dashed		破線で表示されます。
dotted		点線で表示されます。

table　　に対してのborderは外枠のみ線がひかれる
tr　	に対してborderは表示されない。背景は反映される
td	の線の外にtable背景色が表示される


テーブルには、データとデータの間に
線の太さ(border)、セルとセルの隙間(cellspacing)、セル内部の隙間(cellpadding)の3つが存在します。
これらをなくすためには以下のような指定を行います。 

※隙間を無くすにはtableに、	border-spacing:0px;	border-collapse:separate;をセットする。
（border-spacing	隣接するセルのボーダーとボーダーの間隔を指定する際に使用します。
border-spacingプロパティは、border-collapseプロパティの値がseparateのときに有効となります。 ）
*/

table{
	margin:15px 0 10px 5px;
	}

#wrapper #content #table01 {
	border:#000099 solid 1px;
	background-color: #FFFF99;
	width:300px;
}

#wrapper #content #table01 #tr01 {
	background-color: #009933;
	border: thick double #0066FF;
}
/*二重線*/
#wrapper #content #table01 #tr01 #td01 {
	border: thick double #FF3366;
	background-color: #CC99FF;
}
/*彫りこみ*/
#wrapper #content #table01 #tr02 #td06 {
	border: groove #CC0033;
}
/*浮き出し*/
#wrapper #content #table01 #tr02 #td8 {
	border: ridge #996633;
}
/*インセット*/
#wrapper #content #table01 #tr03 #td09 {
	border: inset #003333;
}
/*アウトセット*/
#wrapper #content #table01 #tr03 #td10 {
	border: outset#666666;
}

/*-------table2---------------*/
 /* IE8以上でないと有効にならない為tableに直接書く方が良いかもしれない。
border-spacing:0px;
border-collapse:separate;
*/

#wrapper #content #table02 {
	border:#000099 solid 1px;
	background-color: #FFFF99;
	width:300px;
	border-spacing:0px;
	border-collapse:separate;
}


#wrapper #content #table02 #tr01 {
	background-color: #009933;
	border: thick double #0066FF;
}
/*二重線*/
#wrapper #content #table02 #tr01 #td01 {
	border: thick double #FF3366;
	background-color: #CC99FF;
}
/*彫りこみ*/
#wrapper #content #table02 #tr02 #td06 {
	border: groove #CC0033;
}
/*浮き出し*/
#wrapper #content #table02 #tr02 #td8 {
	border: ridge #996633;
}
/*インセット*/
#wrapper #content #table02 #tr03 #td09 {
	border: inset #003333;
}
/*アウトセット*/
#wrapper #content #table02 #tr03 #td10 {
	border: outset#666666;
}


/*-------table3---------------*/

#wrapper #content #table03 {
	border: none;
	width:500px;
}

#wrapper #content #table03 td,
#wrapper #content #table03 tr,
#wrapper #content,
{	
	border-spacing:0px;
	border-collapse:separate;
	margin:0px;
	padding:0px;
}

/*--画像を敷き詰めるさいは
vertical-align:top;を指定しないと上下に隙間が生じる--*/

img{
	vertical-align:top;
}



#wrapper #content #table03 img.img_seihoukei{
	width:100px;
	height:100px;
}


#wrapper #content #table03 img.img_tatenaga{
	width:100px;
	height:200px;
}

#wrapper #content #table03 img.img_tyouhoukei{
	width:100px;
	height:400px;
}

#wrapper #content #table03 img.img_yokonaga{
	width:200px;
	height:100px;
}

#wrapper #content #table03 img.img_yokolong{
	width:300px;
	height:100px;
}

/*
static	通常の位置に配置 （初期値）。この値のときには、top、bottom、
　　　　 left、rightは適用されません。
relative	通常の位置を基準とした相対的な配置。
absolute	positionプロパティで static 以外の値が指定された要素がある場合
         は、その要素の位置を基準にします。
	それ以外の場合は、ウィンドウの枠を基準とした配置になります。
fixed	ウィンドウの枠を基準とした配置になります。
         スクロールしても位置が固定されたままとなります。
*/