テンプレートとアクセスアップのでめらら楽天日記

1-8テーブルの枠線

1-8テーブルの枠線を変えよう

直接指定のstyleを使わずに、また入れ子にしないでテーブルタグを上手にビジュアル表示するにはきっとこのテーブルの枠線の表示を使いこなすのがいいと思います。
タグの重さや、検索エンジンロボットに対応する必要は無いとお考えでしたら、表現の自由度は直接指定のstyleや入れ子でいいとは思うのですが･･･

■テーブルの枠線を変えよう

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□borderなし

<table>
<tr>
<td>
borderなしだと
</td>
<td>
テーブルに見えない？
</td>
</tr>
<tr>
<td>
borderなしだと
</td>
<td>
テーブルに見えない？
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

borderなしだと	テーブルに見えない？
borderなしだと	テーブルに見えない？

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□全ての枠を表現する

<table border>
<tr>
<td>
borderのみ記述
</td>
<td>
基本の形ですね
</td>
</tr>
<tr>
<td>
borderのみ記述
</td>
<td>
基本の形ですね
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

borderのみ記述	基本の形ですね
borderのみ記述	基本の形ですね

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□border、数値指定で立体的に

<table border="10">
<tr>
<td>
borderのみ記述
</td>
<td>
何だか立体的です
</td>
</tr>
<tr>
<td>
borderのみ記述
</td>
<td>
何だか立体的です
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

borderのみ記述	何だか立体的です
borderのみ記述	何だか立体的です

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□全ての枠線をひく

<table border="1" bordercolor="red">
<tr>
<td>
borderとbordercolor
</td>
<td>
ごく普通のタグ
</td>
</tr>
<tr>
<td>
borderとbordercolor
</td>
<td>
ごく普通のタグ
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

borderとbordercolor	ごく普通のタグ
borderとbordercolor	ごく普通のタグ

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□外枠のみ枠線をひく

<table border="1" bordercolor="red" rules="none">
<tr>
<td bgcolor="aqua">
rules="none"
</td>
<td bgcolor="hotpink">
外枠だけ線あり
</td>
</tr>
<tr>
<td bgcolor="yellow">
rules="none"
</td>
<td bgcolor="springgreen">
外枠だけ線あり
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

rules="none"	外枠だけ線あり
rules="none"	外枠だけ線あり

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□内枠のみ枠線をひく

<table border="1" bordercolor="red" frame="void">
<tr>
<td bgcolor="aqua">
frame="void"
</td>
<td bgcolor="hotpink">
内枠だけ線あり
</td>
</tr>
<tr>
<td bgcolor="yellow">
frame="void"
</td>
<td bgcolor="springgreen">
内枠だけ線あり
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

frame="void"	内枠だけ線あり
frame="void"	内枠だけ線あり

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□ヨコ枠のみ枠線をひく

<table border="1" bordercolor="red" rules="rows">
<tr>
<td bgcolor="aqua">
rules="rows"
</td>
<td bgcolor="hotpink">
ヨコ枠だけ線あり
</td>
</tr>
<tr>
<td bgcolor="yellow">
rules="rows"
</td>
<td bgcolor="springgreen">
ヨコ枠だけ線あり
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

rules="rows"	ヨコ枠だけ線あり
rules="rows"	ヨコ枠だけ線あり

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

□タテ枠のみ枠線をひく

<table border="1" bordercolor="red" rules="cols">
<tr>
<td bgcolor="aqua">
rules="cols"
</td>
<td bgcolor="hotpink">
タテ枠だけ線あり
</td>
</tr>
<tr>
<td bgcolor="yellow">
rules="cols"
</td>
<td bgcolor="springgreen">
タテ枠だけ線あり
</td>
</tr>
</table>

↓こんな感じですね（＾＾）

rules="cols"	タテ枠だけ線あり
rules="cols"	タテ枠だけ線あり

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

（楽天広場の各ページ場合改行しますと通常の改行＜br＞と同じになります。ですのでタグ通りの表示をさせるためには改行やスペースを全て排除してください。つまり全部つなげちゃうわけです！）
*****************************************************
なぜか行掛かりでBlogLankingに参加しました(^^;)面白かったらポチして下さいネ