サンプル・15

テーブル見本

★　サンプル・15　★

１．セルごとに背景色を設定したテーブル

１行１列目は黄色、２行２列目はオレンジ、３行３列目は赤を設定

（ソース）
<TABLE border="2">
<TR>
<TD bgcolor="#ffff00">１行１列め </TD><TD>１行２列め</TD>
<TD>１行３列め</TD>
</TR>
<TR>
<TD>２行１列め</TD><TD bgcolor="#ff9900">２行２列め</TD>
<TD>２行３列め</TD>
</TR>
<TR>
<TD>３行１列め</TD><TD>３行２列め</TD>
<TD bgcolor="#ff0000">３行３列め</TD>
</TR>
</TABLE>


１行１列め １行２列め １行３列め
（表示例）
２行１列め
 ２行２列め ２行３列め
３行１列め
 ３行２列め ３行３列め


２．色設定の優先順位

テーブル全体、行単位、セル単位の色設定が重複した場合、優先順位は、高いほうからセル、行、テーブル全体の順になります。

テーブル全体をライム、１行目を水色、その１列目のセルを白にすると

（ソース）
<TABLE border="2" bgcolor="#00ff00">
<TR bgcolor="#00ffff">
<TD bgcolor="#ffffff">１行１列め</TD><TD>１行２列め</TD>
<TD>１行３列め</TD>
</TR>
<TR>
<TD>２行１列め</TD><TD>２行２列め</TD><TD>２行３列め</TD>
</TR>
<TR>
<TD>３行１列め</TD><TD>３行２列め</TD><TD>３行３列め</TD>
</TR>
</TABLE>


１行１列め １行２列め １行３列め
（表示例）
２行１列め
 ２行２列め ２行３列め
３行１列め
 ３行２列め ３行３列め


３．配色を考えたテーブル

配色って、けっこう難しい。色の選択を間違うと、
ぎらぎらした、とっても見にくいテーブルに……。好みにもよるけど、どぎつい色の組み合わせは
避けたほうが無難。平凡になる可能性はあるけどね。

セル１Ａ セル１Ｂ セル１Ｃ
セル２Ａ
 セル２Ｂ セル２Ｃ
セル３Ａ
 セル３Ｂ セル３Ｃ

※ソースは、６月１日の日記の練習コーナーに記載


© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: