スッキリかんたんスタイルシート～表

トップ＞スッキリかんたんスタイルシート

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

width,height,padding　セルの幅，高さ，余白

① ここはthセル	② width:50pxで指定	③ 折り返し	④ IEのみ
① ここはtdセル	② width:120pxで指定	③ th，tdセルでそれぞれの高さを指定。	④ すべてのセルにpadding:5px 10pxを指定している。
⑤	⑥	⑦	⑧
⑨	⑩	⑪	⑫

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>width, height,padding　セルの幅，高さ，余白</title>
<style type="text/css">
<!--
body {font-size:12px;}
th {width:50px;
	height:20px;
      padding:5px 10px;}
td {width:120px;
	height:50px;
      padding:5px 10px;}
-->
</style>
</head>
<body>
<table border="1">
<tr><th>① ここはthセル</th><th>② width:50pxで指定</th><th>③ 折り返し</th><th>
④ IEのみ</th></tr>
<tr><td>① ここはtdセル</td><td>② width:120pxで指定</td><td>
③ th，tdセルでそれぞれの高さを指定。</td><td>
④  すべてのセルにpadding:5px 10pxを指定している。</td></tr>
<tr><td>⑤ </td><td>⑥ </td><td>⑦ </td><td>⑧ </td></tr>
<tr><td>⑨ </td><td>⑩ </td><td>⑪ </td><td>⑫ </td></tr>
</table>
</body>
</html>

　幅を割合で指定する

① thセル	② width:70%	③ 幅を割合で指定	④
① tdセル	② width:70%	③ 幅を割合で指定	④
⑤ ブラウザの大きさで	⑥ 表の大きさが	⑦ 変わります。	⑧
⑨	⑩	⑪	⑫

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>width,height,padding　幅を割合で指定する</title>
<style type="text/css">
<!--
body {font-size:12px;}
table {width:70%;}
-->
</style>
</head>
<body>
<table border="1">
<tr><th>① thセル</th><th>② width:70%</th><th>③ 幅を割合で指定</th><th>④ </th></tr>
<tr><td>① tdセル</td><td>② width:70%</td><td>③ 幅を割合で指定</td><td>④ </td></tr>
<tr><td>⑤ ブラウザの大きさで</td><td>⑥ 表の大きさが</td><td>⑦ 変わります。</td><td>⑧ </td></tr>
<tr><td>⑨ </td><td>⑩ </td><td>⑪ </td><td>⑫ </td></tr>
</table>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

text-align,vertical-align　セル内の位置を指定する

text-align:left	text-align:center	text-align:right	text-align:baseline
vertical-align:top	middle	bottom	baseline

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>text-align,vertical-align　セル内の位置を指定する</title>
<style type="text/css">
<!--
td {width:120px;
	height:50px;}
.left {text-align:left;font-size:12px;}
.center {text-align:center;font-size:12px;}
.right {text-align:right;font-size:12px;}
.baseline {text-align:baseline;font-size:12px;}
.top {vertical-align:top;font-size:12px}
.middle {vertical-align:middle;font-size:12px}
.bottom {vertical-align:bottom;font-size:12px}
.baseline {vertical-align:baseline;font-size:12px}
-->
</style>
</head>
<body>
<table border="1">
<tr><td class="left">text-align:left</td>
<td class="center">text-align:center</td>
<td class="right">text-align:right</td>
<td class="baseline">text-align:baseline</td>
</tr><tr>
<td class="top"><img src="image001.gif"> vertical-align:top</td>
<td class="middle"><img src="image001.gif"> middle</td>
<td class="bottom"><img src="image001.gif"> bottom</td>
<td class="baseline"><img src="image001.gif"> baseline</td>
</tr>
</table>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

background　表全体に色を指定する

① thセル	②	③	④
① tdセル	②	③	④
⑤ table要素の背景に	⑥ 色を指定しています。	⑦	⑧
⑨	⑩	⑪	⑫

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>background　表全体に色を指定する</title>
<style type="text/css">
<!--
body {font-size:13px;}
table {background:#EEBBEC;}
th,td {padding:5px 10px;}
-->
</style>
</head>
<body>
<table border="1">
<tr><th>① thセル</th><th>②</th><th>③</th><th>④</th></tr>
<tr><td>① tdセル</td><td>②</td><td>③</td><td>④</td></tr>
<tr><td>⑤ table要素の背景に</td><td>⑥ 色を指定しています。</td><td>⑦ </td><td>⑧ </td></tr>
<tr><td>⑨ </td><td>⑩ </td><td>⑪ </td><td>⑫ </td></tr>
</table>
</body>
</html>

表サイズより大きめの画像を指定する

① thセル	②	③	④
① tdセル	②	③	④
⑤ table要素の背景に	⑥ 画像を指定しています。	⑦	⑧
⑨	⑩	⑪	⑫

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>background　表サイズより大きめの画像を指定する</title>
<style type="text/css">
<!--
body {font-size:15px;}
table {background:url("photo001.jpg");}
th,td {padding:10px 20px;}
-->
</style>
</head>
<body>
<table border="1">
<tr><th>① thセル</th><th>②</th><th>③</th><th>④</th></tr>
<tr><td>① tdセル</td><td>②</td><td>③</td><td>④</td></tr>
<tr><td>⑤ table要素の背景に</td><td>⑥ 画像を指定しています。</td><td>⑦ </td><td>⑧ </td></tr>
<tr><td>⑨ </td><td>⑩ </td><td>⑪ </td><td>⑫ </td></tr>
</table>
</body>
</html>

背景画像をしきつめる

① thセル	②	③	④
① tdセル	②	③	④
⑤ table要素の背景に	⑥ ;画像をしきつめる。	⑦	⑧
⑨	⑩	⑪	⑫

使用画像

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>background 背景画像をしきつめる</title>
<style type="text/css">
<!--
body {font-size:15px;}
table {background:url("image002.jpg") repeat-y;}
th,td {padding:5px 10px;}
-->
</style>
</head>
<body>
<table border="1">
<tr><th>① thセル</th><th>②</th><th>③</th><th>④</th></tr>
<tr><td>① tdセル</td><td>②</td><td>③</td><td>④</td></tr>
<tr><td>⑤ table要素の背景に</td><td>⑥ 画像をしきつめる。</td><td>⑦ </td><td>⑧ </td></tr>
<tr><td>⑨ </td><td>⑩ </td><td>⑪ </td><td>⑫ </td></tr>
</table>
<br><IMG SRC="image002.jpg" ALT="背景" WIDTH="400" HEIGHT="20" BORDER=0> 使用画像
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

border　それぞれの要素に枠線を指定する

thセル border:	solid	#F89645	3px
tdセル border:	solid	#C68E51	3px
○	○	○	○
table border:	solid	#96694E	5px

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>border それぞれの要素に枠線を指定する</title>
<style type="text/css">
<!--
body {font-size:12px;}
table {border:solid #96694E 5px;}
th,td {width:120px;
	padding:5px 10px;}
th {border: solid #F89645 3px;}
td {border: solid #C68E51 3px;}
-->
</style>
</head>
<body>
<table>
<tr><th>thセル border:</th><th>solid</th><th>#F89645</th><th>3px</th></tr>
<tr><td>tdセル border:</td><td>solid</td><td>#C68E51</td><td>3px</td></tr>
<tr><td>○</td><td>○</td><td>○</td><td>○</td></tr>
<tr><td>table border:</td><td>solid</td><td>#96694E</td><td>5px</td></tr>
</table>
</body>
</html>

セルだけに枠線を指定する

thセル border:	solid	#F89645	3px
tdセル border:	solid	#C68E51	3px
○	○	○	○
table border:	solid	#96694E	5px

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>border セルだけに枠線を指定する</title>
<style type="text/css">
<!--
body {font-size:12px;}
th,td {width:120px;
	padding:5px 10px;}
th {border: solid #F89645 3px;background-color:#FDE69F;}
td {border: solid #C68E51 3px;}
-->
</style>
</head>
<body>
<table>
<tr><th>thセル border:</th><th>solid</th><th>#F89645</th><th>3px</th></tr>
<tr><td>tdセル border:</td><td>solid</td><td>#C68E51</td><td>3px</td></tr>
<tr><td>○</td><td>○</td><td>○</td><td>○</td></tr>
<tr><td>table border:</td><td>solid</td><td>#96694E</td><td>5px</td></tr>
</table>
</body>
</html>

WinIE
5.0	5.5	6.0

WinNS
4.x	6.x	7.x

WinOpera
6.0	7.x	8.0

winFirefox
1.x

MacSafari
1.x	2.0

MacNs
4.x	6.x	7.x

MacOpera
6.0	7.5	8.0

MacFirefox
1.x

【下記CSSのブラウザ対応】　バージョンがグレーで表示されているブラウザは対応していません。赤表示は一部対応です。

border-collapse　隣り合うセルの枠線を重ねて表示

プロパティ	値	機能
border-collapse	collapse	枠線を重ねて表示
border-collapse	separate	枠線を分離して表示
-	-	（ここでは，collapse）

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>border-collapse　隣り合うセルの枠線を重ねて表示</title>
<style type="text/css">
<!--
body {font-size:14px;}
table {border-collapse:collapse;}
table,th,td {border:solid #FF5353 1px;}
th,td {width:100px;padding:5px;}
#coll {width:240px;padding:5px;}
-->
</style>
</head>
<body>
<table>
<tr><th>プロパティ</th><th>値</th><th id="coll">機能</th></tr>
<tr><td>border-collapse</td><td>collapse</td><td id="coll">枠線を重ねて表示</td></tr>
<tr><td>border-collapse</td><td>separate</td><td id="coll">枠線を分離して表示</td></tr>
<tr><td>-</td><td>-</td><td id="coll">（ここでは，collapse）</td></tr>
</table>
</body>
</html>

隣り合うセルの枠線を分離して表示

プロパティ	値	機能
border-collapse	collapse	枠線を重ねて表示
border-collapse	separate	枠線を分離して表示
-	-	（ここでは，separate）

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>border-collapse　隣り合うセルの枠線を重ねて表示</title>
<style type="text/css">
<!--
body {font-size:14px;}
table {border-collapse:separate;}
table,th,td {border:solid #FF5353 1px;}
th,td {width:100px;padding:5px;}
#coll {width:240px;padding:5px;}
-->
</style>
</head>
<body>
<table>
<tr><th>プロパティ</th><th>値</th><th id="coll">機能</th></tr>
<tr><td>border-collapse</td><td>collapse</td><td id="coll">枠線を重ねて表示</td></tr>
<tr><td>border-collapse</td><td>separate</td><td id="coll">枠線を分離して表示</td></tr>
<tr><td>-</td><td>-</td><td id="coll">（ここでは，separate）</td></tr>
</table>
</body>
</html>

枠線統合を利用した表のデザイン例

機能充実でリーズナブルなレンタルサーバー
サーバー提供	初期費用	月額	容量
Value-Sever.com　格安レンタルサーバー	3150円	699円	100MB
maid4uレンタルサーバー	2100円	1050円	300MB
低価格、高信頼なレンタルサーバーならAblenet	2614円	875円	600MB
SPPDレンタルサーバー	3150円	961円	300MB

>>> HTMLソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>border-collapse　枠線統合を利用した表のデザイン例</title>
<style type="text/css">
<!--
body {font-size:13px;}
table {border-collapse:collapse;
	border:solid #A3A3D1 2px;}
th, td {width:80px;
	padding:5px;}
th#sever,td#sever {width:300px}
th {color:#ffffff;
	background-color:#A3A3D1;}
td {border-top:none;
	border-bottom:none;
	border-left:dashed #A3A3D1 2px;
	border-right:dashed #A3A3D1 2px;}
.trbg {background-color:#D8D8EB;}
-->
</style>
</head>
<body>
<table>
<caption>機能充実でリーズナブルなレンタルサーバー</caption>
<tr><th id="sever">サーバー提供</th><th>初期費用</th><th>月額</th><th>容量</th></tr>
<tr class="trbg"><td id="sever">Value-Sever.com　格安レンタルサーバー</td><td>3150円</td>
<td>699円</td><td>100MB</td></tr>
<tr><td id="sever">maid4uレンタルサーバー</td><td>2100円</td><td>1050円</td>
<td>300MB</td></tr>
<tr class="trbg"><td id="sever">低価格、高信頼なレンタルサーバーならAblenet</td><td>2614円</td>
<td>875円</td><td>600MB</td></tr>
<tr><td id="sever">SPPDレンタルサーバー</td><td>3150円</td><td>961円</td>
<td>300MB</td></tr>
</table>
</body>
</html>

まだまだ使えて安上がり，中古パソコン