れびうぶろぐ　@楽天ブログ

テーブルタグその6

TOPページ > 初心者のためのタグ講座

9．テーブルタグその6

01. テキスト、フォント関係	02. 画像の貼り方	03. リンクの貼り方	04. テーブルタグその1
05. テーブルタグその2	06. テーブルタグその3	07. テーブルタグその4	08. テーブルタグその5
09. テーブルタグその6	10. テンプレの作り方	11. テンプレの作り方-日記編	12. その他のタグ

枠の種類には次のような物が使用できます。

none (枠線無し)	solid (直線)	double (二重線)	groove (溝線)	ridge (谷線)
inset (沈み込み)	outset (盛り上がり)	dotted (点線)	dashed (破線)

テーブルの枠にスタイルシートを使用する

<table border="0" style="border: 線の太さ線の種類線の色 ">

<tr>
<td>表示する文字など1</td>
<td>表示する文字など2</td>
</tr>

</table>

線の太さにはpxをつけてください。
線の種類は上記の中から選びます。
色は#をつけてＲＧＢ値で指定してください。
（#をつけないでpinkやblueなどといった指定の仕方もあります。）

では実際に次の物を表示してみます。

<table border="0" style="border:3px solid #aaaaff">

<tr>
<td>表示する文字など1</td>
<td>表示する文字など2</td>
</tr>

</table>

表示する文字など1

表示する文字など2

スタイルシートを使用する際はborderには0を入力してください。
でないと次のようになってしまいます。

表示する文字など1

表示する文字など2

セルごとにスタイルシートを使用する

<table border="0>

<tr>
<td" style="border: 線の太さ線の種類線の色 ">表示する文字など1</td>
<td" style="border: 線の太さ線の種類線の色 ">表示する文字など2</td>
</tr>

</table>

では実際に次の物を表示してみます。

<table border="0" style="border:3px solid #aaaaff">

<tr>
<td style="border: 3px solid #aaaaff">表示する文字など1</td>
<td style="border: 3px solid #ffaaaa">表示する文字など2</td>
</tr>

</table>

表示する文字など1

表示する文字など2

枠の上下左右にそれぞれスタイルシートを使用する

<table border="0>

<tr>
<td style="border-top: 線の太さ線の種類線の色 ">上のみに効果</td>
<td style="border-bottom: 線の太さ線の種類線の色 ">下のみに効果</td>
<td style="border-right: 線の太さ線の種類線の色 ">右のみに効果</td>
<td style="border-left: 線の太さ線の種類線の色 ">左のみに効果</td>
</tr>

</table>

では実際に線の太さを3、線の種類をsolid、線の色を#ffaaaaで表示してみます。

上のみに効果

下のみに効果

右のみに効果

左のみに効果

これはセルに使用してますがもちろん<table>にも使用できます。
ちなみに１つのセルの上下などに効果を働かせたい場合は
<td style="border-top:3px solid #ffaaaa ; border-bottom:3px solid #ffaaaa">
のように;(セミコロン)を間に入れることで複数の効果を使うことが出来ます。

TOPページ > 初心者のためのタグ講座