テーブル

基本のテーブルタグ

テーブル内に1つだけ　caption をつけられる


【 HTML 】
<table class="">
	<caption></caption>
	<tr>
		<th></th>
		<td></td>
	</tr>
</table>

【Ａモダンタイプ】
にんじん	赤くて細長い土の中に生息。
キャベツ	黄緑色で、丸くて、葉っぱがたくさんついている。
レンコン
たけのこ	その名の通り、竹の子供の名前。


【 Ａモダンタイプ 】
.testA{
	width:700px;
	border-collapse:separate;
	border:solid 2px #888888;
	empty-cells:show;
}
.testA th{
	border:solid 1px #888888;
	background-color:#CCCCCC;
	padding:10px;
	text-align:center;
}
.testA td{
	border:solid 1px #888888;
	padding:10px;
}

【Ｂレトロタイプ】
にんじん	赤くて細長い土の中に生息。
キャベツ	黄緑色で、丸くて、葉っぱがたくさんついている。
レンコン
たけのこ	その名の通り、竹の子供の名前。


【 Ｂレトロタイプ 】
.testB{
	width:700px;
	border-collapse:collapse;
	border-top:2px solid #808080;
	border-left:2px solid #808080;
	empty-cells:show;
}
.testB th{
	border-right:2px solid #808080;
	border-bottom:2px solid #808080;
	background-color:#CCCCCC;
	padding:10px;
	text-align:center;
}
.testB td{
	border-right:2px solid #808080;
	border-bottom:2px solid #808080;
	padding:10px;
}

表の表示方法を指定 table-layout: fixed;

fixed・・・セル幅が均一に指定される。　table-layout: fixed;
auto・・・セル幅が内容に合わせて変化する。

table-layout: fixed;　でもセル幅が指定されない場合は最終手段！
<table>の下に入れてあげると必ず指定幅で横幅をとってくれる！


<colgroup><col style="width:50%;"><col>

枠線の表示形式を指定 border-collapse:collapse;

collapse・・・隣接するセルの枠線を重ねて表示させる。
separate・・・セルの枠線をそれぞれセルごとに表示させる

※CSSでは「collapse」がデフォルトですが、IEとFireFoxは指定しない場合は「separate」で表示される。

separateの場合、border-collapse　と一緒に指定するとセルの間に空間があく。
但し、どういうわけか、IE6-7は空間の指定が出来ないので、あんまり大きく開けない方が良い。デザインがIE6-7で崩れる。

今日の天気は	晴れのち曇り。ここにテキストを入れますよ！
今日の天気は	晴れのち曇り。ここにテキストを入れますよ！


【 CSS 】
.sampTB{
	width:1050px;
	table-layout:auto;
	border:solid 1px #000000;
	border-collapse:separate;下と一緒に指定しないときかない。これ、単独ではなんの変化もない
	border-spacing:0.3em;セルの空間がどのくらい開けるかを指定
}
.sampTB th{
	width:300px;
	border:solid 1px #707070;
	background-color:#BFBFBF;
	padding:5px;
	fonr
} 
.sampTB td{
	border:solid 1px #707070;
	padding:5px;
}

【イメージタイプ1 】

煮込みスープ
野菜スープにぐつぐつ煮込む。ウィンナー、にんじん、たまねき、キャベツ、全部全部入れて煮込むだけ。そしてとろけてきたら、顕著のスープの素を入れて出来上がり！！野菜スープにぐつぐつ煮込む。ウィンナー、にんじん、たまねき、キャベツ、全部全部入れて煮込むだけ。そしてとろけてきたら、顕著のスープの素を入れて出来上がり！！野菜スープにぐつぐつ煮込む。ウィンナー、にんじん、たまねき、キャベツ、全部全部入れて煮込むだけ。そしてとろけてきたら、顕著のスープの素を入れて出来上がり！！

煮込みスープ

野菜スープにぐつぐつ煮込む。ウィンナー、にんじん、たまねき、キャベツ、全部全部入れて煮込むだけ。そしてとろけてきたら、顕著のスープの素を入れて出来上がり！！


【 イメージタイプ1 】テーブルの上に画像がくるタイプ
【 HTML 】
<img src="image/sample/testc.gif" width="700" height="40" alt="image" />
<table class="testC" summary="野菜の一覧表">
	<tr>
		<th>煮込みスープ</th>
	</tr>
	<tr>
		<td><p></p>
		<p></p>
		</td>
	</tr>
</table>
※これだとテーブルの上部にmargin-top: を設定出来ない。画像との間が開いてしまう為。


【 CSS 】
.testC{
	width:700px;
	border-collapse:collapse;
	empty-cells:show;
	background-color:#CCCCCC;
}
.testC th{
	border-bottom:solid 1px #626262;
	padding:10px;
}
.testC td{
	background-color:#CCCCCC;
	padding:5px 5px 10px 20px;
}

borderを全て消す。background-color:#CCCCCC;で色を設定してやると、横の長さがズレすにキレイに揃う。

【イメージタイプ2 】

煮込みスープ
野菜スープにぐつぐつ煮込む。ウィンナー、にんじん、たまねき、キャベツ、全部全部入れて煮込むだけ。そしてとろけてきたら、顕著のスープの素を入れて出来上がり！！野菜スープにぐつぐつ煮込む。ウィンナー、にんじん、たまねき、キャベツ、全部全部入れて煮込むだけ。そしてとろけてきたら、顕著のスープの素を入れて出来上がり！！野菜スープにぐつぐつ煮込む。ウィンナー、にんじん、たまねき、キャベツ、全部全部入れて煮込むだけ。そしてとろけてきたら、顕著のスープの素を入れて出来上がり！！

煮込みスープ


【 イメージタイプ2 】テーブルのthに画像がくるタイプ
【 HTML 】
<table class="testD" summary="野菜の一覧表">
	<tr>
		<th>煮込みスープ</th>
	</tr>
	<tr>
		<td><p></p>
		<p></p>
		</td>
	</tr>
</table>


【 CSS 】
.testD{
	width:700px;
	border-collapse:collapse;
	empty-cells:show;
	margin-bottom:30px;
}
.testD th{
	background-image:url(../image/sample/testd.gif);
	background-repeat:no-repeat;
	color:#FFFFFF;
	padding:10px;
}
.testD td{
	background-color:#CCCCCC;
	padding:5px 5px 10px 20px;
}

▲このページのTOPに戻る▲

キャプション


【 HTML 】
<table summary="">
	<caption></caption>
	<tr>
		<th></th>
		<td></td>
	</tr>
</table>

caption-side:****;

top・・・　　テーブルの上に配置
bottom・・・テーブルの下に配置
left・・・　左に配置
right・・・　右に配置

▲このページのTOPに戻る▲

空セル

何もないセルにたいしてボーダーお表示させるかどうかempty-cells:show;

show・・・通常通りボーダーを表示させる
hide・・・表示させない
nbsp;

▲このページのTOPに戻る▲

連結

rowspan・・・下方向と連結
colspan・・・右方向と連結

▲このページのTOPに戻る▲

文字位置

vatical-align:top;

top・・・上に寄せる
middle・・・中央揃え
bottom・・・下に寄せる
baseline・・・1行目のベースラインを揃える

▲このページのTOPに戻る▲

メニューの表題固定

stickyで固定にすることができる。ただし、overflow-y: scroll;　が効いているとstickyが使えない。
ので、theadではなく、thにstickyをかける。

.scroll-table のdivの中にtableを入れて、.scroll-tableにスクロールバーをつけてあげる。


.nomalTB{
	table-layout: fixed;
	border-collapse:collapse;
	border-top:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	empty-cells:show;
	margin-top:10px;
}
.nomalTB th{
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	background: linear-gradient(#ffadad, #ffe8e8);
	padding:10px;
	text-align:center;
	vertical-align:top;
}
.nomalTB td{
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	padding:10px;
	vertical-align:top;
}
.scroll-table table {
	display: block;
	height:550px;
	overflow-y: scroll;
	white-space: nowrap;/*この一文を入れると改行されなくなり、横に伸びる*/
	-webkit-overflow-scrolling: touch;/*スマホで横スクロール*/
}
thead th{
	postion: -webkit-sticky;
	position: sticky;
	top:0px;
}
tbody td div{
	width:200px;/*改行されるようにtdの中にdivを入れてボックスをつくる*/
	background-color:#9C6;
	white-space:normal;/*作ったボックスを改行させる*/
}

▲このページのTOPに戻る▲

－テーブル－

基本のテーブルタグ

表の表示方法を指定 table-layout: fixed;

枠線の表示形式を指定 border-collapse:collapse;

キャプション

空セル

連結

文字位置

メニューの表題固定