TABLE

Contents

  1. HTML 4 $B$K$*$1$k(B table $BMWAG(B
  2. $BI=$N%?%$%H%k0LCV$ND4@0(B
  3. $B%;%kFb$NJ8;z0LCV(B
  4. $BJ,N%%b%G%k!&7k9g%b%G%k(B
  5. $BOH@~!&7S@~$N
  6. border$B%W%m%Q%F%#(B

HTML 4 $B$K$*$1$k(B table $BMWAG(B

$B$^$:!"(BHTML 4$B$G$N!"(Btable $BMWAG$N357A$r<($7$F$*$/!#(B

<table>
<caption>3$B9T(B3$BNs$NI=$NNc(B</caption>
<tr>
    <th>header 1</th>  <td>cell (1,1)</td>  <td>cell (1,2)</td>
</tr>
<tr>
    <th>header 2</th>  <td>cell (2,1)</td>  <td>cell (2,2)</td>
</tr>
<tr>
    <th>header 3</th>  <td>cell (3,1)</td>  <td>cell (3,2)</td>
</tr>
</table>
$B!ZI=<(Nc![(B
3$B9T(B3$BNs$NI=$NNc(B
header 1 cell (1,1) cell (1,2)
header 2 cell (2,1) cell (2,2)
header 3 cell (3,1) cell (3,2)

caption-side

$BI=$N(B caption $B$NI=<(0LCV$r@_Dj$7$^$9!#(B

caption-sidetop | bottom | left | right | inherit

I.E.6 $B$G$OL58z$G$9$,!"(B Netscape 6 $B$G$O(B 'top', 'bottom' $B$K8B$jM-8z$G$9!#(B

$B!ZMxMQNc![(B

caption { caption-side: bottom }

$B$3$NNc$G$O!"I=$N%?%$%H%k$NI=<(0LCV$O(B$BI=$N2<(B$B$KI=<($5$l$k!#(B

$B!ZI=<(Nc![(B
3$B9T(B3$BNs$NI=$NNc(B
header 1 cell (1,1) cell (1,2)
header 2 cell (2,1) cell (2,2)
header 3 cell (3,1) cell (3,2)

$B$^$?!"(B CAPTION $BMWAG$NJ8;zNs$N?eJ?0LCV$O!"B>$NKX$I$NMWAG$HF1MM$K(B 'text-align' $B$GB7$($k;v$,=PMh$^$9!#(B

$B!ZMxMQNc![(B

caption { caption-side: bottom;
	text-align:right }
$B!ZI=<(Nc![(B
3$B9T(B3$BNs$NI=$NNc(B
header 1 cell (1,1) cell (1,2)
header 2 cell (2,1) cell (2,2)
header 3 cell (3,1) cell (3,2)

right, left $B$N>l9g$NCm0U(B

$B%F!<%V%k$N:81&$K;XDj$5$l$?%-%c%W%7%g%s$G$O!"(B "width: auto" $B0J30$NCM$rL@<($9$k$h$&$K?d>)$5$l$^$9!#(B 'auto' $B$r;XDj$9$k$H!"$I$N$h$&$JI=<(I}$r:NMQ$9$k$+$K5,Dj$,$"$j$^$;$s$N$G!"2DG=$J8B$j:G$b69$$I}$+$i0l9T$KG[CV$G$-$k$@$1$NI}$^$G!"%V%i%&%6$K0lG$$9$k$3$H$K$J$j$^$9!#(B

$B$^$?!":81&$KG[CV$7$?%-%c%W%7%g%s$N?eJ?0LCV$O(B 'text-align' $B%W%m%Q%F%#$G;XDj$7!"%F!<%V%k$N9b$5$KBP$9$k?bD>0LCV$O(B 'vertical-align' $B%W%m%Q%F%#$G;XDj$7$^$9!#(B 'vertical-align' $B$GM-8z$JCM$O(B 'top', 'middle', 'bottom' $B$N;0$D$@$1$G!"B>$NCM$OA4$F(B 'top' $B$H2r

$B%;%kFb$NJ8;zNsG[CV(B

$B%;%kFb$NJ8;zNs$N0LCV$O(B 'text-align', 'vertical-align' $B$rMQ$$$l$P;XDj$G$-$^$9!#(B

$B?eJ?0LCVG[CV(B

$B%;%kMWAG!J(Btd, th$B!K$K;XDj$9$k>l9g!"%W%m%Q%F%#CM$KDL>o:N$jF@$k%-!<%o!<%I$K2C$($F!VJ8;z!W$,@8$8$^$9!#(B

$B!Z5-=RNc![(B

td { text-align: "." }

$B$3$NNc$G$O!">.?tE@$N%T%j%*%I$,B7$($k4p=`<4$NJ8;z$K;XDj$7$F$"$j$^$9!#%;%kFb$K$3$3$G;XDj$7$?J8;z$,B8:_$7$J$$>l9g!"J8;zNs$N8e$mC<$,4p=`<4$K$J$j$^$9!#(B

$BI=<(35G0?^(B
   1.0e0
1000
   0.25e0
$B!ZI=<(Nc![(B
1.0e0
1000
0.25e0

$B$^$?!"4p=`<4J8;z$O3F%;%k$G6&DL$7$F$$$kI,MW$O$"$j$^$;$s!((B

td.doll { text-align: "$" }
td.yen { text-align: "¥" }
$BI=<(35G0?^(B
   ¥1,000-
   ¥500-
   $1,000-
100

$B?bD>0LCVD4@0(B

$B%;%kFb$NMWAG$N?bD>0LCV$O(B 'vertical-align' $B$GD4@0$G$-$^$9$,!";XDj$G$-$k%-!<%o!<%I$K@)8B$,@8$8$^$9!#;H$($k%-!<%o!<%I$O

baseline, top, bottom, middle

$B$3$NB>$N!"(B sub$B!"(Bsuper$B!"(Btext-top$B!"(Btext-bottom $B$K4X$7$F$O(B baseline $B$G$"$k$H2r

$B!ZI=<(Nc![(B
baselinebaseline topbottommiddle sub

baseline

First the cells that are aligned on their baseline are positioned. This will establish the baseline of the row. Next the cells with 'vertical-align: top' are positioned.
This will establish the baseline of the row. Next the cells with 'vertical-align: top' are positioned. top bottom middle These values do not apply to cells; the cell is aligned at the baseline instead.

$B7k9g%b%G%k$HJ,N%%b%G%k(B

$B%\!<%@!<$r0z$$$?;~$K!"%;%k$N4V$rJ,N%$9$k$+$I$&$+$r@_Dj$G$-$^$9!#(B

border-collapsecollapse | separate | inherit

collapse $B$,7k9g%\!<%@!<%b%G%k!"(B separate $B$,J,N%%\!<%@!<%b%G%k$r0UL#$7$^$9!#(B

$B!ZI=<(Nc![(B I.E., Netscape $B6!$K=i4|CM$O;EMM$rL5;k$7$F(B separate $B$r:NMQ$7$F$$$^$9!#(B

table.sep { border: 1px solid black;
    border-collapse: separate }
table.coll { border: 1px solid black;
    border-collapse: collapse }
td { border: 1px solid black }
$B!ZI=<(Nc![(B
$BL5;XDj$NNc!J5,3J$G$O(B collapse $B$K$J$kH&!K(B
cell (1,1) cell (1,2)
cell (2,1) cell (2,2)
cell (3,1) cell (3,2)
cell (4,1) cell (4,2)
'separate' $B$NNc(B
cell (1,1) cell (1,2)
cell (2,1) cell (2,2)
cell (3,1) cell (3,2)
cell (4,1) cell (4,2)
'collapse' $B$NNc(B
cell (1,1) cell (1,2)
cell (2,1) cell (2,2)
cell (3,1) cell (3,2)
cell (4,1) cell (4,2)

I.E. $B$G$OM-8z$G$9$,(B Netscape6.2 $B$G$OL58z$G$9!#(B Netscape 6.0 $B$G$OM-8z$G$7$?$,$H$F$bI=<($,Mp$l$F$$$^$7$?!#%P%0%U%#%C%/%9Cf$J$N$G$7$g$&!#(B

$BJ,N%%b%G%k(B

$BJ,N%%b%G%k$G$O!"3F%;%k$N%\!<%@!

$B$^$?!"(B TABLE $BI}!J(B'width' $B$G;XDj!K$N30C<$+$i30OH@~$,0z$+$l!"$3$N%\!<%@!<$NI}$O(B TABLE $BI}$KA4$/;;F~$5$l$^$;$s!#(B

$B%\!<%@!<4V$N5wN%(B

$B$3$N%b%G%k$G$O!"FHN)$7$?%;%k$,8D!9$K%\!<%@!<$r;}$C$F$$$^$9!#$3$N%W%m%Q%F%#$O!"FHN)$7$?%;%k$N%\!<%@!<4V$N5wN%$r;XDj$7$^$9!#(B

border-spacing<length> <length>? | inherit

$BCM$,0l$D;XDj$5$l$?$H$-$O?bD>!"?eJ?N>J}8~$N%;%k4V3V$r;XDj$7$^$9!#Fs$D;XDj$5$l$?$H$-$O!"0l$DL\$,?eJ?J}8~!"Fs$DL\$,?bD>J}8~$N%;%k4V3V$K$J$j$^$9!#(B

$BNY@\$9$k%;%k$N%\!<%@!<4V$N6u4V$O!"%F!<%V%k$NGX7J$K$J$j$^$9!#(B

table { border: outset 10pt;
   border-collapse: separate;
   border-spacing: 20pt 10pt }
td { border: inset 5pt }
td.special { border: inset 10pt }  /* the top-left cell */
$B!ZI=<(Nc![(B
separate
special cell (1,2)cell (1,3)
cell (2,1) cell (1,2)cell (2,3)
cell (3,1) cell (1,2)cell (3,3)

$B6u$N%;%k(B

$BJ,N%%\!<%@!<%b%G%k$G!"6u$N%;%k$N<~$j$K%\!<%@!<$rI=<($9$k$+$I$&$+$r@_Dj$G$-$^$9!#(B

empty-cellsshow | hide | inherit

I.E.6 $B$G$OL58z$G$9$,!"(B Netscape 6 $B$G$OM-8z$G$9!#(B

$B7Q>5$rMxMQ$7$F!"(B table $BMWAG$K;XDj$9$k$3$H$G!"$=$N;RB9MWAG$G$"$kA4$F$N%;%kMWAG(B (th, td) $B$KBP$7$F;XDj$9$k$3$H$,=PMh$^$9!#(B

table { empty-cells: show }

$B$3$NNc$G$O!"6u%;%k$b4^$a$FA4$F$N%;%k$N<~$j$K%\!<%@!<$,0z$+$l$^$9!#(B

$B!ZI=<(Nc![(B
$BL5;XDj$NNc(B
cell (1,1)cell(1,2)
cell(2,2)
cell (3,1)
show $B$NNc(B
cell (1,1)cell(1,2)
cell(2,2)
cell (3,1)
hide $B$NNc(B
cell (1,1)cell(1,2)
cell(2,2)
cell (3,1)

$B7k9g%b%G%k(B

$B7k9g%b%G%k$G$O!"3F%;%kF1;N$NNY@\$9$kJU$,7k9g$7!"%\!<%@!<$r6&M-$7$^$9!#$3$N;~!"%;%kMWAG!"9TMWAG!"9T%0%k!<%WMWAG!"NsMWAG!"Ns%0%k!<%WMWAG$NA4$F$N%\!<%@!<$,;XDj2DG=$G$9!#(B

$B$^$?!"(B table $BMWAG$N30OH@~$NH>J,$r4^$a$F(B table $BI}!J(B'width' $B$G;XDj!K$H$7$F7W;;$5$l$^$9!#(B

$B%\!<%@!<$N6%9g(B

$B7k9g%b%G%k$G$O!"0?$k6-3&@~$,=EJ#$7$F;XDj$5$l$k>l9g$,5/$3$j$^$9!#Nc$($P!"(B tbody $B$H(B td $B$K%\!<%@!<$r;XDj$7$F$$$k$H!"I,$:;XDj$N=EJ#$,5/$3$j$^$9!#(B

/* $B%\!<%@!<$K6%9g$,5/$3$kNc(B */
tbody { border: 1pt solid }
td { border: 1pt dashed }

$B$7$+$b!"$=$N;XDj$,L7=b$9$k>l9g$I$N;XDj$,:NMQ$5$l$k$N$G$7$g$&$+!#Nc$($P!"NY@\$9$k%;%kF1;N$G!"0lJ}$O(B 'solid' $B$r!"B>J}$O(B 'dotted' $B$r;XDj$7$F$$$?>l9g!"Fs$D$N%;%k$,6&M-$9$k%\!<%@!<$O$I$N$h$&$KI=<($5$l$k$+$,LdBj$H$J$j$^$9!#(B

hidden $B$N:GM%@h(B
$BI}$NM%@h(B
border-style $B$NM%@h=g0L(B
$B%;%k$NM%@h(B

$B$8$c$"!":G8e$KNY@\%;%kF1;N$,6&M-$9$k%\!<%@!<$KBP$9$k;XDj$,!"?'$@$1$7$+L7=b$7$J$$>l9g$O$I$&$9$k$s$G$7$g$&$M!)(B

border-style

'border-style'$B%W%m%Q%F%#$K4X$7$F$O!"0JA0(BBOX$B4XO"%W%m%Q%F%#(B$B$G@bL@$7$^$7$?!#>\$7$/$O$=$A$i$KLa$C$F2<$5$$!#(B

border-stylenone | hidden | double | solid | dashed | dotted | ridge | outset | groove | inset
$B!ZI=<(Nc![(B
$BJ,N%%\!<%@!
double solid dashed dotted
hidden ridge inset none
ridge outset groove inset
$B7k9g%\!<%@!<%b%G%k(B
double solid dashed dotted ridge
dashed dotted ridge outset groove
ridge outset groove inset double
hidden $B$H(B none
double solid none dotted ridge
dased none ridge hidden hidden
ridge outset groove inset double

$B>e$NNc$G$O!"$o$+$j$d$9$/$9$k$?$a$K(B border-color $B%W%m%Q%F%#$bJ;$;$F@_Dj$7!"%\!<%@!<$K?'$rIU$1$^$7$?!#(B

border-style $B%W%m%Q%F%#$N$H$kCM$N@bL@(B
hidden $B%;%k<~JU$N%\!<%@!<$O@dBP$KI=<($5$l$J$$!#(B
$B7k9g%b%G%k$GNY@\%\!<%@!<$,@_Dj$5$l$F$$$F$b$=$l$r>C$9!#(B
none $B%;%k<~JU$N%\!<%@!<$r@_Dj$7$J$$!#(B
$B7k9g%b%G%k$GNY@\%\!<%@!<$,@_Dj$5$l$F$$$l$PI=<($5$l$k!#(B
ridge $B%\!<%@!<$rN45/$GI=8=$9$k(B
outset $BJ,N%%\!<%@!<%b%G%k$G$O!"MWAG$NFbB&$,7&$_$NDlLL$K$J$k!#(B
$B7k9g%\!<%@!<%b%G%k$G$O!"(B 'ridge' $B$HF1$8!#(B
groove $B%\!<%@!<$r7&$_$GI=8=$9$k(B
inset $BJ,N%%\!<%@!<%b%G%k$G$O!"MWAG$NFbB&$,N45/$N>eLL$K$J$k!#(B
$B7k9g%\!<%@!<%b%G%k$G$O!"(B 'groove' $B$HF1$8!#(B

hidden $B$O<~0O$N6-3&@~$r>C$7!"(B none $B$O;XDj$7$J$$$@$1$G$9!#(B 'border-collapse' $B$,(B separate $B!JJ,N%%\!<%@!<%b%G%k!K$N>l9g$OF1$8$G$9$,!"(B collapse $B!J7k9g%\!<%@!<%b%G%k!K$N>l9g$OL@3N$K0c$&$b$N$G$9!#(B

$B$3$l$O(B CSS2 $B$G$NDj5A$G$"$j!"

'border' $B4XO"%W%m%Q%F%#$K4X$7$F$O!"0JA0(B BOX $B4XO"%W%m%Q%F%#(B$B$G@bL@$7$^$7$?!#>\$7$/$O$=$A$i$KLa$C$F2<$5$$!#(B

Copyright © 2001, SUGAI, Manabu. All rights reserved.
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送