html table タグ:
基本的な使い方、属性、セルの結合、ソートなど
UB3/informatics/html/tag_table
このページの最終更新日: 2024/09/30- table タグの基本的な使い方
- 追加できる属性
- セルの結合
- html でソートできるテーブルを作る
- css のみでレスポンシブデザインのテーブルを作る
広告
table tag の基本的な使い方
table タグは、表を作るためのタグである。例えば、この表はその下にあるようなタグで書かれている。
-i | 大文字と小文字を区別しない |
-l | パターンに一致した行を含むファイル名だけを出力する |
<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 ソースッで表現されることになる。
タイプ | 受容体 | 備考 |
---|---|---|
イオンチャネル型 |
APMA 受容体 | GluA1 - GluA4 のサブユニットがある。Postsynaptic。 |
NMDA 受容体 | ||
カイニン酸受容体 | ||
代謝調節型 Metabotropic |
mGluR family |
<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 {
.col-head-type1 th,
.col-head-type1 th {
@media only screen and (max-width: 800px) {
|
広告
コメント欄
サーバー移転のため、コメント欄は一時閉鎖中です。サイドバーから「管理人への質問」へどうぞ。