テーブル ( 表 ) は奥が深いです。
ちょっと間違えると、ページ全部が崩れてしまったりします(´・ω・｀)
でも、上手に使えば整理するにも便利だし、見栄えよくすることもできます。
テーブル・セルのサイズ指定
テーブル全体のサイズ指定は<table>内に。
セルのサイズ指定は<td>内に以下のタグを入れます。
セルの幅を1か所を指定するとその列の全部のセルが、
セルの高さを1か所を指定するとその行の全部のセルが同じになります。
サイズ指定の単位は「px（単位不要、数字のみでOK）」か「%」がよく使われますが、「%」はモニターに対するサイズなので、
見る環境によってはレイアウトが崩れることがあります。
また、セルの中に入れる文字や画像によってもレイアウトが崩れることがあるので、
よくわからないうちはいろいろと指定しない方がいいかもしれません。
セル内の左右よせ ( セル、行単位 )
<td>内に入れればそのセルだけ、<tr>内に入れればその行のセル全部を指定できます。
「left」、「right」、「center」で。
セル内の上下よせ ( セル、行単位 )
<td>内に入れればそのセルだけ、<tr>内に入れればその行のセル全部を指定できます。
「top」、「right」、「bottom」で。
セル内の左右よせ・上下よせ ( テーブル、列単位 )
<table>の後に、以下のタグを入れます。
【位置】のタグは、上記のものを使います。
上下・左右とも指定するときは、半角スペースを空けて続けていれます。
左の列から、<○列は○よせ>、<その次の○列は○よせ>、という指定のしかたです。
指定する数で、<col span=〜>の数も変えて下さい。
テーブル全部を同じにする場合は、全部の列数にすればできます。
<colgrounp>
<col span=【列数】 【位置】><col span=【列数】 【位置】>
</colgrounp>
|
セル内の折り返し ( 改行 ) 禁止
<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>内、セル単位なら<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タグ」のトップに戻る
|
|
|
