|
action |
CASE1：htmlによる指定
(枠幅=3px,色=なし)
普通の枠の設定です。 |
CASE2：スタイルシート(個別指定)によるテーブル
(枠の種類=実線.枠幅=3px,色=赤)
四辺とも同じ設定です。二重線や点線の指定も可能です。 |
CASE3：スタイルシート(クラス指定)によるテーブル
(枠の種類=点線.枠幅=5px,色=青)
四辺とも同じ設定です。二重線や破線の指定も可能です。 |
CASE4：応用技/スタイルシート(個別指定)/四辺別々指定
上・右・下・左の順で指定しています。
(枠の種類=破線・点線・二重線・実線.
枠幅=1・2・4px
色=青・緑・ピンク・水色) |
|
| web技 |
◆CASE1【htmlによるテーブル枠の設定】<body〜>に記述
※table idの設定は特に必要ありません(以下、全部同じ)
-----次の行から(copy)-----
<table id="TABLE1" border="3">
<tr>
<td>CASE1：htmlによる指定</td>
</tr>
</table>
-----上の行まで(copy)-----
◆CASE2 【スタイルシートによる個別設定(四辺とも同じ)】<body〜>に記述
-----次の行から(copy)-----
<table id="TABLE2" border="0">
<tr>
<td style="border-style : solid ; border-width : 3px ; border-color : red ;">
CASE2：スタイルシート(個別指定)によるテーブル</td>
</tr>
</table>
-----上の行まで(copy)-----
◆CASE3 【スタイルシートによるクラス設定(四辺とも同じ)】<body〜>に記述
※下記のスタイル設定は<head>〜</head>に記述(クラス名:table_1)
※クラス属性は<table〜>に記述すると表の外枠に、また<td〜>に記述するとセルの枠に適用されます。
-----次の行から(copy)-----
<style type="text/css">
<!-- /*クラス指定*/
.table_1 {
border-style:dashed; /*四辺とも枠の種類=点線*/
border-width:5px; /*四辺とも枠幅=5px*/
border-color:blue; /*四辺とも枠の色=青*/
}
-->
</style>
-----上の行まで(copy)-----
※テーブルにクラス設定 <table〜>に記述(クラス名:table_1)
-----次の行から(copy)-----
<table id="TABLE3" border="0" class="table_1">
<tr>
<td>CASE3：スタイルシート(クラス指定)によるテーブル</td>
</tr>
</table>
-----上の行まで(copy)-----
◆CASE4 【スタイルシートによる個別設定(四辺別々)】<body〜>に記述
-----次の行から(copy)-----
<table id="TABLE4" border="0">
<tr>
<td style="border-style : dashed dotted double solid;
border-width : 1px 2px 3px 4px;
border-color : blue lime fuchsia aqua;">
<b>CASE4：応用技/スタイルシート(個別指定)/四辺別々指定</td>
</tr>
</table>
-----上の行まで(copy)-----
|
| 解説等 |
◆htmlによる指定は細かい技は使えません。小技を使うのならスタイルシートを用います。
◆スタイルシート(個別指定)は<table〜>に直接スタイル指定しますので、そのテーブルだけの設定になります。
◆スタイルシート(クラス指定)は<head>〜</head>間にスタイルシートのクラス指定を行い、<table〜>に適用するクラス名を設定します。同一ページの他のテーブルでも共通に使えます。<td〜>にクラス指定してセル毎にスタイルを設定する場合に実用的です。
【応用技】 四辺を別々に設定する(個別指定の場合)
◆各項目とも、上・右・下・左の時計回りで別々にスタイル指定します。
<td style="border-style : dashed dotted double solid; ...>
solid:実線/dotted:点線/double:二重線/dashed:破線
|
| キーワード |
◇style◇border-style |
| 注意 |
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]はtxtファイルを表示していますので、クリップボードにコピーして他のファイルに貼り付けできます。
-----次の行から(copy)-----
(この部分をクリップボードにコピー)
-----上の行まで(copy)-----
◆｢text保存｣は右側のインラインフレームに表示したテキストファイルをダウンロードします。｢クリック｣せず｢右クリック｣して｢対象をファイルに保存｣を選択して下さい。 |
