(0) | 表/配置:中央(横)、フロート:標準、罫線:1、セルスペース:2、セル間スペース:0、背景色:#FFFFFF、明罫線:#EDE6FF、暗罫線:#C1B7DF、幅:90%、。 セル/配置:横・縦標準、背景色:#FFFFFF、幅:25% |
ここに文字や画像をペーストします。 改行 → 高さが変わります。 | ……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
……
|
@
(1) | 表/配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:1、背景色:#530080、幅:90%。 セル/配置:横・縦標準、背景色:#FFFFFF、幅:25% |
◆ここに文字や画像をペーストします。 改行
→ 高さが変わります。 セル背景色無変化タグ(例)
|
…… | …… | …… |
……
|
……
|
……
|
……
|
……
|
……
|
……
|
|
……
|
……
|
A
(2) | 表/配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:2、背景色:#FFFFFF、幅:90%。 セル/配置:横・縦標準、背景色:#F3F3F3、幅:25% |
※:マウスオーバー時にセル背景色が指定色の色違い。
ここに文字や画像をペーストします。 改行
→ 高さが変わります。
|
セルの背景画像の指定(例) | …… | …… |
……
|
◆ 画像挿入(例) | ||
……
|
|||
……
|
B
(3) | 表/配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:1、背景色:#530080、幅:600ピクセル、高さ:50ピクセル。 セル/配置:中央(横)、縦(中央)、背景色:#FFFFFF、幅:25% |
ここに文字や画像をペーストします。改行 → 高さが変わります。 | …… | …… | …… |
……
|
|||
……
|
|||
……
|
C
(4) | 表/配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:2、背景色:#FFFFFF、幅:600ピクセル、高さ:50ピクセル。 セル/配置:中央(横)、縦(標準)、背景色:#DCD9E0、幅:25% |
ここに文字や画像をペーストします。改行 → 高さが変わります。 | …… | …… | …… |
……
|
|||
……
|
|||
……
|
D
(5) | 表/配置:標準(横)、フロート:標準、罫線:0、セルスペース:1、セル間スペース:0、背景色:#630198、幅:100%、高さ:。 セル/配置:標準(横)、縦(標準)、背景色:#DCD9E0、幅:25% |
|
下は、上のタグを4回繰り返し。
|
|
|
|
E
(6) | 表/配置:中央(横)、フロート:標準、罫線:0、セルスペース:0、セル間スペース:0、背景色:#630198、幅:99%、高さ:。 セル/配置:、縦(標準)、背景色:#DCD9E0、幅:16% |
|
F
(7) | 表/配置:中央(横)、フロート:標準、罫線:0、セルスペース:1、セル間スペース:1、背景色:標準、幅:100%、高さ:。 セル/配置:、縦(標準)、背景色:標準、幅:指定値 中央配置の表に背景画像を挿入した(例) : 表配置 : 中央横、幅 : 100%、セル幅 : 70%、高さ : 任意(改行で可変)、背景画像 : あり(下記) |
※:背景画像サイズを”ピクセル”で指定する場合の(例) : <td width="300" background="http:/…… blst01.gif" height="300">
背景画像 : blst01.gif
|
ホーム へ サンプルページ ハイライト表 highlight_table.htm
表(table)にマウスオン/オフ時、セルの背景色が変化、痕跡を遺します。 DHTML。 変化色などのカスタマイズはテキストエディターなどで可。 all 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
デモ : マウスオーバーで。 ※: PCのファイルを直接表示で可。
< ご使用方法 >
・ 保存は highlight_table.htm を右クリック、【名前を付けてリンクを保存】 - <保存する場所>: ……、などで。 ※: 変わってしまった、ファイル名や、*.htm 中のパスは要修正。
・ ペーストは、highlight_table.htm をテキストエディターで開き、ホームページ作成ソフトなどの ”テキストモード で、新しいページや hogehoge.htm(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1) を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。 ※: テキストモード : コード/HTMLタグ挿入/HTMLメニュー など。
・ 編集 : hogehoge.htm に テキストモードでペースト 後は、ホームページ作成ソフトのデザインや通常モード、テキストモード、テキストエディターで編集します。 下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。
※: 外部ドメイン(サイト)にアップロートの画像などの使用は、非表示に注意。 画像の alt タグは不可、サイズ指定の pt などの省略は注意。 スクリプト構文中への 改行混入に注意。
・ アップロードは、hogehoge.htm と同じホルダーに、使用してる記画像などをアップロードします。 別ホルダーの場合は、hogehoge.htm の該当パス注意。
・ 作動テストは Edge〜 などで。 更新の確認は、ブラウザーなどのキャッシュのクリア後に実施。 (1) [F5]キ- or Ctrl+Rキー を押し、最新データ読み込みで。 更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [プライバシー、検索、サービス] - [閲覧デ-タをクリア] - [クリア-するデ-タの選択] - [v]閲覧の履歴 -[今すくクリア] をクリック。 留めに、(3) サーバーのファイルを一旦削除。
・ 関連情報 : 色記号 、RGB5 〃6 、〃8 、フォント、スタイルシートリファレンス、ホームページ開設入門、HTMLをテキストエギタ-で編集。
(*1) : highlight_table.htm (例) 下線 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
HTMLの編集方法 | (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、編集し使用。 |
〔この列ペースト不要〕
シフトJIS使用(削除不可) URL前・ツールバーに表示のアイコンファイル名(削除可)favicon_**.ico など
<style type= 〜
</style>は(削除可)
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ JavaScript |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="favicon.ico"> <style type="text/css"><!--
<base target="_blank"> <title>サンプルページ ハイライト表</title> <!-- ★ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- --> ==== この間、説明を省略。 === if (ie&&event.toElement!=source||ns6&&e.relatedTarget!=source)
|
(*2) : highlight_table.htm (例) 表 挿入先の <body> 〜 </body> の、〜 部分にペーストします。
HTMLの編集方法 | (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、編集し使用。 |
〔この列ペースト不要〕
<table 部に記述 以下、同様。
|