◆テーブル（表）-3
セルの中でできることを、説明します。
◇セルに色をつける。　<TD bgcolor="△">...</TD>
セルの背景色　bgcolor="△"　　（△は、色を指定します。
　　　　　　　　　　　　　　　　　　　　　例："#ff66cc"または、"pink"）
● <TABLE border="1" cellpadding="5">
<TR>
<TD bgcolor="#99ccff">1</TD>
<TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD bgcolor="#9999ff">4</TD>
</TR>
</TABLE>
1 2
3 4
　　　　　　　　
◇セルの幅、高さを指定する　width="☆"　 height="☆"
セルの幅　　width="☆"　（☆は、ピクセル数または、％を記述します。）

セルの高さ　 height="☆"　（☆は、ピクセル数または、％を記述します。）
● <TABLE border="1" cellpadding="5">
　<TR>
　<TD width="100" height="50">1</TD>
　<TD >2</TD>
　</TR>
　<TR>
　<TD>3</TD>
　<TD>4</TD>
　</TR>
　</TABLE>
1 2
3 4
　　　　　　　　
◇セルの中の位置揃え　align=".."、valign=".."
●水平位置揃え

　　左揃え　　 align="left"
　　中央揃え　align="center"
　　右揃え　　 align="right"

●垂直位置揃え

　　上揃え　　　valign="top"
　　中央揃え　 valign="middle"
　　下揃え　　　valign="bottom"
● <TABLE border="1" cellpadding="5">
　<TR>
　<TD align="left" width="50" height="50">1</TD>
　<TD align="center" width="50" height="50">2</TD>
　<TD align="right" width="50" height="50">3</TD>
　</TR>
　<TR>
　<TD valign="top" width="50" height="50">4</TD>
　<TD valign="middle" width="50" height="50">5</TD>
　<TD valign="bottom" width="50" height="50">6</TD>
　</TR>
　</TABLE>
1 2 3
4 5 6
◇文字の折り返しをなくす　 nowrap
表を作っていて、下の表の左列のように、文字が勝手に折り返されて、困ったことはありませんか？
セルの幅を指定したり、いろいろ工夫いても、なかなかうまくいきませんよね。
そんなときに、 nowrapを使います。
ハンドルネーム アン
私の好きな本 「赤毛のアン」「ハリー・ポッター賢者の石」、「ワイルド・スワン」
私の好きな作家 ルーシー・モンゴメリ、アガサクリスティ、ディケンズ、シャーロット・ブロンテ
● <TABLE border="1" width="350" cellpadding="5">
<TR>
<TD nowrap>ハンドルネーム</TD>
<TD>アン</TD>
</TR>
<TR>
<TD nowrap>私の好きな本</TD>
<TD>「赤毛のアン」...「ワイルド・スワン」</TD>
</TR>
<TR>
<TD nowrap>私の好きな作家</TD>
<TD>ルーシー・モンゴメリ、...、シャーロット・ブロンテ</TD>
</TR>
</TABLE>
　　　
ハンドルネーム アン
私の好きな本 「赤毛のアン」「ハリー・ポッター賢者の石」、「ワイルド・スワン」
私の好きな作家 ルーシー・モンゴメリ、アガサクリスティ、ディケンズ、シャーロット・ブロンテ
　　　　　
◇空白セルの場合
セルに何も記入しないと、枠線まで消えてしまって、変になってしまいます。
こんなときは、何も記入しないセルに改行<BR>を、入れましょう。
1 2
4 6
● <TABLE border="1" cellpadding="5">
　　<TR><TD >1</TD><TD >2</TD><TD ><BR></TD></TR>
　　<TR><TD>4</TD><TD><BR></TD><TD>6</TD></TR>
　　</TABLE>
　　　　
1 2
4
6
　　　　



←TOP NEXT→


ｂｙ　Anne