html table タグ:
基本的な使い方、属性、セルの結合、ソートなど

このページの最終更新日: 2024/09/30

table タグの基本的な使い方
追加できる属性
セルの結合
html でソートできるテーブルを作る
css のみでレスポンシブデザインのテーブルを作る

table tag の基本的な使い方

table タグは、表を作るためのタグである。例えば、この表はその下にあるようなタグで書かれている。

-i	大文字と小文字を区別しない
-l	パターンに一致した行を含むファイル名だけを出力する

<table width="100%" cellspacing="0" cellpadding="5" border="1">
<tr>
<td>-i</td>
<td>大文字と小文字を区別しない</td></tr>
<tr>
<td>-l</td>
<td>パターンに一致した行を含むファイル名だけを出力する</td>
</tr>
</table>

つまり、

<table></table> の中にある <tr></tr> が列を示す。table row だと思われる。囲まれた部分が一行に表示され、5 行の表なら <tr></tr> のペアが 5 つ含まれることになる。
それぞれのセルの内容は、data を示す <td></td> の中に書かれる。つまり、<tr></tr> の中にある <td></td> が列を示すことになる。
tr や td を th にすると見出しになる。

追加できる属性

このサイトで使っているものをとりあえず表にしています。Reference にはもっとたくさん載っているので、そちらも参照して下さい。数が増えてきたら整理します。

属性	意味	場所
border	border="n" で表の枠線の太さを指定。HTML5 では 1 のみ使用可能で、太さはスタイルシートで指定する。0 は境界線なし。	table
width	<table width=200px> で表の幅を、<td width=200px> で列の幅を指定。<td width="200"> でも大丈夫なようである。ただし、ピクセルで幅を指定するとスマホなどの小さい画面でみたときに画面からはみ出してしまう可能性がある。最近は <td width=90%> のようなパーセント表記が気に入っている。	table, td
valign	<td valighn="top"> で、文字などを上揃えで表示できる。middle, bottom, baseline を選択できる。	td
bgcolor	bgcolor="yellow" のようにして背景色を指定。	table, tr, th, td
colspan, rowspan	colspan="3" のようにして複数のセルを結合する。このページの下部に実例あり。	th, td

セルの結合

rowspan の使い方の実例のようなもの。次の表が、以下のような html ソースッで表現されることになる。

タイプ	受容体	備考
イオンチャネル型 Ionotropic	APMA 受容体	GluA1 - GluA4 のサブユニットがある。Postsynaptic。
	NMDA 受容体
	カイニン酸受容体
代謝調節型 Metabotropic	mGluR family

<table cellspacing="0" cellpadding="2" border="1" style="width: 688px; height: 30px;">
<tbody>
<tr>
<th width="150">タイプ</th>
<th width="120">受容体</th>
<th>備考</th>
</tr>
<tr>
<td rowspan="3">イオンチャネル型<br />Ionotropic</td>
<td>APMA 受容体</td>
<td>GluA1 - GluA4 のサブユニットがある。Postsynaptic。</td>
</tr>
<tr>
<td>NMDA 受容体</td>
<td></td>
</tr>
<tr>
<td>カイニン酸受容体</td>
<td></td>
</tr>
<tr>
<td>代謝調節型<br />Metabotropic</td>
<td>mGluR family</td>
<td></td>
</tr>
</tbody></table>

html でソートできるテーブルを作る

javascript を使う方法がこのページに記載されている (Last access 10/5/2018)。

css のみでレスポンシブデザインのテーブルを作る

2019 年 2 月より目次ページで使用開始。いろいろページがみつかるが、このページの方法に従った。Javascript を使う方法もあるが、重くなりそうなので css のみで設定したかった。

このサイトはもともとレスポンシブデザインで、css が「画面 800 px 以下の場合」などに分かれている。そこで、リンク先にある以下の css の緑字にした部分のみをこのサイトの css にコピーした。class は index とした。

もともとある @media only screen and (max-width: 800px) { } の中に入れ込まないといけないので、場所がちょっとややこしい。

.col-head-type1 {
border-collapse: collapse;
width: 100%;
}

.col-head-type1 th,
.col-head-type1 td {
border: 1px solid #dbe1e8;
padding: 8px;
}

.col-head-type1 th {
background: #f9fafc;
text-align: left;
width: 120px;
}

@media only screen and (max-width: 800px) {
.col-head-type1 tr,
.col-head-type1 th,
.col-head-type1 td {
display: block;
width: auto;
}

.col-head-type1 tr:first-child {
border-top: 1px solid #dbe1e8;
}

.col-head-type1 th,
.col-head-type1 td {
border-top: none;
}
}

コメント欄

サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。

References

TAG index: 表を作る. Link.
とほほの WWW 入門. テーブル. Link.

html table タグ:基本的な使い方、属性、セルの結合、ソートなど