tableタグ

table（表組）を作る時に使用するタグです。

よくtableでサイトのレイアウトまでしてしまう人がいますが、そういう目的としては使わないでください。

基本的なテーブルを作成するには

<!-- HTML -->
<!-- thead→tfoot→tbodyの順で記述だが表示はthead→tbody→tfootになる -->
<table>
	<thead>
		<tr>
		<th></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
		<td></td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
		<td></td>
		</tr>
	</tbody>
</table>

theadやtbodyはjavascriptを組み込んで操作する（親ノードの指定など）ときくらいしか使ったことがないので、実際はもっと短縮した形、

<!-- HTML -->
<table>
	<tr>
	<th></th>
	</tr>
	<tr>
	<td></td>
	</tr>
</table>

で覚えておくとよいでしょう。

<tr>から</tr>までが横1列、<td>から</td>までがその列の中にある1つのセルを示します。<th>はテーブルの見出し用のタグで、なくても大丈夫です。

<!-- HTML -->
<table border="1">
<tr>
<th>見出し1</th>
<th>見出し2</th>
</tr>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
</table>

tableタグの中にborder="1"と入れると、枠線付のテーブルが描画できます。入れないと枠線が表示されません。

見出し1	見出し2
セル1	セル2

エクセルのセルのようにセル同士の連結もできます。

横のセルを連結するのはcolspan、縦のセルを連結するのはrowspanです。

<!-- HTML -->
<table border="1">
<tr>
<th colspan="3">見出し1</th>
</tr>
<tr>
<td rowspan="2">セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
</tr>
</table>

見出し1
セル1	セル2
セル1	セル3

これで終わりにしたいところですが、今の状態だとテーブルの枠線が2重線になっているし、枠線の色も変えられないし、不便です。

そこで、CSSでtableとthやtdに対して枠線を設定し、collapseで枠線を1本線にしてみましょう。

<!-- HTML -->
<table>
<tr>
<th colspan="3">りんごの栄養素一覧</th>
</tr>
<tr>
<td rowspan="2">ビタミン</td>
<td>ビタミンC：4mg/100g</td>
</tr>
<tr>
<td>ビタミンB1：0.02mg/100g</td>
</tr>
<tr>
<td>ミネラル</td>
<td>カリウム：110mg/100g</td>
</tr>
</table>

/* CSS */
table,th,td {
	width:400px;
	margin:auto;
	border:solid 1px #00f;
	border-collapse:collapse;
	margin-top:20px;
	}
th {
	background:#55f;
	color:#fff;
	}

上記をサンプルに追加（tableは</p>のあと、<h2>の前に）すると、サンプル。

もうひとつ、テーブルのセルに何も値を入れたくないときありますよね？そういう時はボーダーがうまく表示されないので空白スペースを打ったりしていることもあると思います。それを表示させるのがempty-cellsプロパティとなります。

/* CSS */
td {
	empty-cells:show;
	}

テーブルにソート機能を追加する

テーブルのソート機能付加にはjQueryのプラグインを使います。ちょっと敷居が上がってしまったかもしれませんが、今はこんなことができるんだよとくらいに考えてください。

Last Name	First Name	Email	Due	Web Site
Smith	John	jsmith@gmail.com	$50.00	https://www.jsmith.com
Bach	Frank	fbach@yahoo.com	$50.00	https://www.frank.com
Doe	Jason	jdoe@hotmail.com	$100.00	https://www.jdoe.com
Conway	Tim	tconway@earthlink.net	$50.00	https://www.timconway.com

tablesorterの配布サイトへ行き、ページ最下部のDownloadのところから「jquery.tablesorter.zip」をダウンロードします。

解凍後フォルダ内現れる、jquery-latest.js、jquery.tablesorter.js、themesフォルダの中の好きな色のcssやらgif画像を読みこまないとなので好きな場所に移動します。(cssは自style.cssに追記してもOK）。そして下記のようにhead内に記述します。

<head>
<link rel="stylesheet" type="text/css" href="../table/themes/blue/style.css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../table/jquery-latest.js"></script> 
<script type="text/javascript" src="../table/jquery.tablesorter.js"></script>
</head>

そしたら、Exsamplesの中から自分好みのスキンを選び、クリックします（上記例はBasicの一番上のやつ）。

そうするとデモページになるので、そこにあるJavaScriptとHTMLの構文をコピーして自サイトへ貼り付ければOKです。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>