テーブル ( 表 ) は奥が深いです。
ちょっと間違えると、ページ全部が崩れてしまったりします(´・ω・｀)
でも、上手に使えば整理するにも便利だし、見栄えよくすることもできます。
テーブル・セルのサイズ指定
テーブル全体のサイズ指定は<table>内に。
セルのサイズ指定は<td>内に以下のタグを入れます。
行単位（<tr>）の指定はできません。
サイズ指定の単位は「px（単位不要、数字のみでOK）」か「%」がよく使われますが、「%」はモニターに対するサイズなので、
見る環境によってはレイアウトが崩れることがあります。
また、セルの中に入れる文字や画像によってもレイアウトが崩れることがあるので、
よくわからないうちはいろいろと指定しない方がいいかもしれません。
※スタイルシートでの指定もできます。下のタグの代わりに「style="width:【幅】; height=【高さ】"」を使います。
セルの幅指定（列単位）
<table>の後に、以下のタグを入れます。
幅指定の単位は「px（単位不要、数字のみでOK）」か「%」がよく使われます。
この「<col span=〜」のタグでのサイズ指定は幅のみで、高さの指定はできません。
左の列から、<○列は○○>、<その次の○列は○○>、という指定のしかたになっています。
指定する数で、<col span=〜>の数も変えて下さい。
列の幅の合計が全体の幅より大きくなるなど、計算が合わなかったりすると指定が無効になります。
※スタイルシートでの指定もできます。下のタグの代わりに「style="width:【幅】"」を使います。
<col span=【列数】 width=【幅】><col span=【列数】 width=【幅】>
|
参考URL…http://www.1uphp.com/con1/table/cell-coletc.html
セル内の左右よせ ( セル、行単位 )
<td>内に入れればそのセルだけ、<tr>内に入れればその行のセル全部を指定できます。
「left」、「right」、「center」で。
※スタイルシートでの指定もできますが、ブラウザによっては無効になるものがあるので使わないことを推奨します。
参考までに、「style="vertical-align:【位置】"」というタグで、【位置】は「left」、「right」、「center」
のいづれかを指定します。
参考URL…http://www.1uphp.com/con1/table/cell-align.html
参考URL…http://www.1uphp.com/con1/table/cell-coletc.html
セル内の上下よせ ( セル、行単位 )
<td>内に入れればそのセルだけ、<tr>内に入れればその行のセル全部を指定できます。
「top」、「middle」、「bottom」で。
※スタイルシートでの指定もできますが、ブラウザによっては無効になるものがあるので使わないことを推奨します。
参考までに、「style="vertical-align:【位置】"」というタグで、【位置】は「top」、「middle」、「bottom」
のいづれかを指定します。
参考URL…http://www.1uphp.com/con1/table/cell-align.html
参考URL…http://www.1uphp.com/con1/table/cell-coletc.html
セル内の左右よせ・上下よせ ( テーブル、列単位 )
<table>の後に、以下のタグを入れます。
【位置】のタグは、左右は「left」、「right」、「center」を、上下は「top」、「middle」、「bottom」を使います。
上下・左右とも指定するときは、半角スペースを空けて続けて入れます。
左の列から、<○列は○よせ>、<その次の○列は○よせ>、という指定のしかたです。
指定する数で、<col span=〜>の数も変えて下さい。
テーブル全部を同じにする場合は、全部の列数にすればできます。
<col span=【列数】 【位置】><col span=【列数】 【位置】>
|
参考URL…http://www.1uphp.com/con1/table/cell-align.html
参考URL…http://www.1uphp.com/con1/table/cell-coletc.html
セル内の折り返し（改行）禁止
<td>内に以下のタグを入れます。
列や行単位、テーブル全体では指定できないようです。
※半角英数字では、折り返されないようになっているようです…場合によっては不便そう。
スペースなどが入ればそこで改行されます。
テーブルの線の太さ
指定しない場合は「0」になっていて、これを「1」以上に指定しないと線が表示されません。
<table>内に以下のタグを入れます。
|
これがborder最小1。cellspacingは0、cellpaddingは5。
|
下にも書いていますが、テーブルの線は2本の線がくっついているので「border=1」でも1×2の太さなんだと思います。
その2本の線を重ねるスタイルシートが以下のタグ、これを<table>内に追加します。
私がたくさん使っているグレーのテーブルは、これを使っています。
|
style="border-collapse:collapse;"
|
参考URL…http://www.htmq.com/style/border-collapse.shtml
テーブルの線のすき間
<table>内に以下のタグを入れます。
テーブルの線は、太くするとわかりますが実はふたつの線がくっついています。
その線と線のすき間の幅を指定します。
これを「0」にしたり、大きくしたりすると、かなり印象が変わります。
セル内の余白
<table>内に以下のタグを入れます。
テーブルの線の色
<table>内に以下のタグを入れます。
線は上になる色と下になる色に分かれていて、上記の指定では両方その色になり、1色の線になります。
上になる色が「bordercolorlight」、下になる色が「bordercolordark」と別々に指定することもできます。
以下は3つとも「border=5 cellspacing=5 cellpadding=5」。
セルの背景色（テーブル、行単位、セル単位）
テーブル全体なら<table>内、行単位なら<tr>内、セル単位なら<td>内に以下のタグを入れます。
セルの背景色（テーブル、列単位）
<table>の後に、以下のタグを入れます。
左の列から、<○列は○○（色）>、<その次の○列は○○（色）>、という指定のしかたです。
指定する数で、<col span=〜>の数も変えて下さい。
テーブル全部を同じにする場合は、全部の列数にすればできます。
※下記の枠内のタグはスタイルシートですが、HTMLタグ「bgcolor="【色】"」でも同じ指定ができます。
でもこれは、ブラウザによって無効になることがあるため、スタイルシートの方を推奨します。
<col span="【列数】" style="background-color:【色】">
<col span="【列数】" style="background-color:【色】">
|
テーブルの背景に画像を使う
テーブル全体なら<table>内、セル単位なら<td>内に以下のタグを入れます。
行単位の<tr>指定はネスケは表示されるけど、IEでは無効です。
テーブルの一部の罫線を表示しない
<table>内に以下のタグを追加します。
frame=void 外枠を表示しない
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
frame=hsides 左右の外枠を表示しない
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
frame=vsides 上下の外枠を表示しない
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
rules=none 中のしきりを表示しない
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
rules=rows 中のしきりの縦線を表示しない
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
rules=cols 中のしきりの横線を表示しない
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
テーブルにタイトルをつける
<table>の後に以下のタグを追加します。
もともとセンタリングですが、<caption>内に「align=〜」を入れることで左よせ ( left )、右よせ ( right ) もできます。
「align=bottom」と入れると、テーブルの下に表示されます。
タイトルは、自動的に大きめの文字になるようです。
|
<caption>【タイトル】</caption>
|
タイトル
| 1-1 | 1-2 | 1-3 |
| 2-1 | 2-2 | 2-3 |
| 3-1 | 3-2 | 3-3 |
テーブルの幅を完全に固定する
<table>内に以下のタグを追加します。
いちばん上にも書いたサイズ指定は、セル内の文字や画像などで指定どおりにならないことがありますが、
これは中を無視して完全に固定します。
高さの完全固定はできないようです。
単位は通常と同じで主に「px（単位不要、数字のみでOK）」か「%」を使いますが、
やはり「%」は環境によってレイアウトが崩れることがあります。
※指定したサイズよりもセル内の文章が長い場合、日本語なら端で自動的に改行されます。
しかし、半角英数字はスペースかハイフンがないと改行されない約束になっていて、
幅の完全固定をすると途中から切れて見えなくなってしまいます。
画像も同じく、切れます。
このように柔軟性がないので、あまりこのタグはお薦めしません。
|
style="table-layout:fixed" width=【幅】
|
|
日本語なら端で自動的に改行されます。このセル内には改行タグは使っていません。
|
下に0〜9A〜Zまで並べていますが、途中で切れていると思います。
悪い例↓
0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
悪い例↓
クリックすると、実際のサイズの画像が見れます。
|
「HTMLタグ」のトップに戻る
|
|
|
