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

UB3/informatics/html/tag_table

このページの最終更新日: 2019/02/11

  1. table タグの基本的な使い方
  2. 追加できる属性
  3. セルの結合
  4. html でソートできるテーブルを作る
  5. 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

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