html: table タグの使い方

informatics/html/tag_table
4-8-2017 updated

  1. table タグ
  2. 追加できる属性
  3. セルの結合

広告

table tag

table タグは,表を作るためのタグである。

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

とすると,以下の表がブラウザに表示される。

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

つまり,

  • <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>

コメント欄

一言コメントをどうぞ! (基本500字まで - 100字のページもあるかも)


References

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