スタイルシート 3

■ スタイルシート Part.3

前回は、テーブルの枠自体をスタイルシートで変えて遊んでみました。
今回は、さらにテーブルの枠で遊んでみます。

シンプルな形の枠の色を徐々に変えていきます。

　ここに文章や画像をいれます

入力ソースはこちら。

<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px solid #ccffcc;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #66cc66;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:1px solid #009900;">
<tr><td>ここに文章や画像をいれます
</td></tr></table></td></tr></table></td></tr></table>

　ここに文章や画像をいれます

上のソースの「solid」を「dashed」に。「border:1px」を「border:2px」に。

<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px dashed #ccffcc;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px dashed #66cc66;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:2px dashed #009900;">
<tr><td>ここに文章や画像をいれます
</td></tr></table></td></tr></table></td></tr></table>

　ここに文章や画像をいれます

上のソースの「solid」を「double」に。「border:1px」を「border:3px」に。

<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:3px double #ccffcc;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:3px double #66cc66;">
<tr><td>
<table width="300" height="50" cellspacing="0" cellpadding="0" style="border:3px double #009900;">
<tr><td>ここに文章や画像をいれます
</td></tr></table></td></tr></table></td></tr></table>