229400 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

七鍵@楽天

タグ辞書【TD】


◆ TD
表示可能ブラウザ: [IE4][IE5][IE6][NN4][NN6][OP7]
解説
テーブルの基本的な構造は、TABLEタグ内にTRタグで表の横一行を定義して、
さらにその中にTHタグやTDタグでセルを定義する
TDはTable Dataの略で、セルの内容が「データ」となるデータセルを作成する
セルの内容が「見出し」の場合には、THタグを使用する

属性

align:セル内のデータの幅寄せや、文字列の桁揃えを指定する
また、TD要素の既定値は「left」、 TH要素の既定値は「center」
left : 左詰め(TD要素に対する既定値)
center : センタリング(TH要素に対する既定値)
right : 右詰め
justify : 均等割付
char : ある文字を基準にして文字列を桁揃え
valign:セル内での垂直位置を指定
top : 上詰め
middle : センタリング(既定値)
bottom : 下詰め
baseline : セルに含まれる文字列の最初の文字のベースラインを揃える
char:属性値として指定された文字を、セル内の文字列を桁揃えするための基準文字として指定する
例えば、英語であれば「.」、フランス語であれば「,」のように、
Lang属性で 指定した言語に対応するものを既定値とするすることも可能
ただし、ブラウザはこの既定値をサポートする必要は無い
charoff:Char属性により桁揃え文字が指定されていた場合、
その文字からいくらずらして表示するかを指定する
例えば、小数点以下3桁で揃えたい場合は、「3」を指定する
また、文字揃えの際にずらす方向は、Dir属性による書字方向に依存する
ただし、ブラウザはこの既定値を サポートする必要は無い
bgcolor:テーブルの行全体の背景色を指定する
当属性は非推奨となっており、スタイルシートで指定することが推奨されている
headers:見出しの所在情報を示す
非視覚系ブラウザに対しての配慮であり、TH要素のId属性を複数参照することが 可能
行または列を一括して定義する場合はScope属性を用いる
scope:見出しの所在情報を示すもの
非視覚系ブラウザに対しての配慮であり、そのセルに続くデータ列の場所を一括で明示するもの
部分的に定義する場合はHeaders属性を用いる
row : 当セルの見出し情報を当セル以降の行に適用
col : 当セルの見出し情報を当セル以降の列に適用
rowgroup : 当セルの見出し情報を当行グループに適用
colgroup : 当セルの見出し情報を当列グループに適用
abbr:セルデータを省略形で指定する
繰り返して出現するセルデータに対して指定することで、
非視覚系ブラウザに対して省略形で表現(読み上げられる)される
axis:セルを色々な見方で意味づけして
データ配列の組み替えを可能にするN次元座標軸を設定しようとするもの
例えば、データとしてはN次元あるテーブルを、
あるカテゴリーに添ったデータのみに対して2次元テーブルで表示するような場合などで、
ユーザーは必要に応じてデータを表示できるようになる
またこれは、非視覚系ブラウザに対しても特に有用
colspan:複数のセルを行方向に結合する
数値で結合するセル数を指定する
既定値は「1」で、「0」を指定した場合、そのセルから右の列全てを結合することになる
ただし「0」で結合するセルは、COLGROUP要素 で括られている範囲に限定される(HTML4.01)
rowspan:複数のセルを列方向に結合する
数値で結合するセル数を指定する
既定値は「1」で、「0」を指定した場合、そのセルから下の行全てを結合することになる
ただし「0」で結合するセルは、THEAD要素,TFOOT要素,TBODY要素 で括られている範囲に限定され(HTML4.01)
nowrap:セル内での改行を禁止する
当属性は非推奨であり、 スタイルシートによる指定が強く推奨されている
width:セルの横幅を指定する
指定していなければ、ブラウザ側が自動的に決定する
当属性は非推奨であり、スタイルシートによる指定が推奨されている
height:セルの高さを指定する
指定していなければ、ブラウザ側が自動的に決定する
当属性は非推奨であり、スタイルシートによる指定が推奨されている
%STYLEs%:スタイルシートのクラス名やID名を参照
%LANGs%:言語情報や書字方向などを指定
%EVENTs%:各種イベントを指定

ソース
<TABLE align="center" border="1" bordercolor="#CCCCFF">
<CAPTION align=top>Web Safe Color</CAPTION>
<TR><TD width=70 height=30 align=center bgcolor="#000000">#000000</TD>
<TD width=70 height=30 align=center bgcolor="#000033">#000033</TD>
<TD width=70 height=30 align=center bgcolor="#000066">#000066</TD></TR>
<TR><TD width=70 height=30 align=center bgcolor="#000099">#000099</TD>
<TD width=70 height=30 align=center bgcolor="#0000CC">#0000CC</TD>
<TD width=70 height=30 align=center bgcolor="#0000FF">#0000FF</TD></TR>
<TR><TD width=70 height=30 align=center bgcolor="#003300">#003300</TD>
<TD width=70 height=30 align=center bgcolor="#003333">#003333</TD>
<TD width=70 height=30 align=center bgcolor="#003366">#003366</TD></TR>
<TR><TD width=70 height=30 align=center bgcolor="#003399">#003399</TD>
<TD width=70 height=30 align=center bgcolor="#0033CC">#0033CC</TD>
<TD width=70 height=30 align=center bgcolor="#0033FF">#0033FF</TD></TR>
</TABLE>
表示
Web Safe Color
#000000 #000033 #000066
#000099 #0000CC #0000FF
#003300 #003333 #003366
#003399 #0033CC #0033FF









© Rakuten Group, Inc.