以下のようなイメージのページをテーブルを使用し作成したいのですが、
表枠は表示させず、縦線と横線のみに出来ますか。
フレームを使用すれば出来そうですが。

図1   | 図2 図3 図4
図5 図6 | 文字1
文字2  | 文字3
文字4  | -----------------
     |文字5
     |文字6 図7 図8

*線は直線です。

A 回答 (4件)

#3のkamotoです。


ちょっと説明がこんがらがってしまいましたので補足。

「縦線と横線の画像をそれぞれ作って…」
というのは、線と文字や画像の間をすこし空けたい場合、
例えば垂直線でしたら、幅11pxの画像で、真ん中の1pxのみ色をつけ、
左右5pxずつを白(または背景色)にしておけば、
その5px分の空間を線の周りに作ることができるよ、
ということです。

高さは1pxにして、<td background="sample.gif">で指定すれば、
テーブル全体の高さに線が伸びてくれます。

同様に、幅1px、高さ11pxの画像を作れば、水平線ができます。
    • good
    • 0
この回答へのお礼

どうも有難う御座いました。N0.3、4にて解決しました。

お礼日時:2002/04/10 20:20

これはテーブルのborderでやらずに、


縦線と横線の画像をそれぞれ作って、
線用の<td>を用意してやるほうがおすすめです♪

ご質問の組み方ですと、
<table width="401" border="0" cellspacing="0" cellpadding="0">
<tr>
 <td width="200" rowspan="3">図1・図5・図6・文字2・文字4</td>
 <td width="1" rowspan="3" bgcolor="#333333"><img src="spacer.gif"></td>
 <td width="200">図2・図3・図4・文字1・文字3</td>
</tr>
<tr><td height="1" bgcolor="#333333"><img src="spacer.gif"></td></tr>
<tr><td>文字5・文字6・図7・図8</td></tr>
</table>

これはテーブルの背景に色をつけて、それを
透明のイメージ=spacer.gifで固定しています。
ちょっと説明を簡単にするために省略しているところも
ありますが…いかがでしょうか?
    • good
    • 0

テーブルタグに「FRAME=VOID」を追加するだけで、外枠を消すことが出来ます。

(ただしInternet Explorerのみかも)
こんな感じです。↓

<TABLE BORDER=1 FRAME=VOID>
<TR><TD rowspan=2> 1 </TD><TD> 2 </TD></TR>
<TR><TD> 3 </TD></TR>
</TABLE>
    • good
    • 0

スタイルシートで border を指定してみてはいかがでしょうか。


たとえば

<table style="border-left:1px solid #000;">

のようにすると、スタイルシートに対応しているブラウザーであれば table の左側に 1 ピクセルの黒い線が表示されます。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q ヽ(^。^)ノ ワードの「書式」→「フレーム」のことで……これで小さな枠を作っても、テキストボックスのような働きはしない?

 WindowsでWord2000を使ってます。
 「書式」の「フレーム」を開いて、新しいフレーム(上)とか新しいフレーム(左)とか、いろいろクリックすると、画面が細かく分割されます。そのフレームをマウスで移動させることもできて、おもしろいんですが、そうしてできた小さな枠のなかに文字を打って印刷しても、フレームは現われず、小さな枠のなかで3行で書いた文章も、印刷しますと1行になって出てきます。
 フレームで作った小さな枠には、「図形描画」の「テキストボックス」のような機能はないんでしょうか?
 そういう機能がないと、せっかくのこのフレーム、あまり意味がないと思うんですが?
 それとも、私のパソコンかプリンタの調子がわるいんでしょうか?

Aベストアンサー

ワードのフレーム機能は、複数の文書ファイルを1ページ内で
表示ための機能です。
フレームで区切られた領域は、それぞれ別の文書ファイルとして保存されます。

例えば、「文書1」というファイルを立ち上げてフレームをいくつか作ってみてください。
それぞれのフレームに、短い言葉(1,2,3とか亜、い、うなど)
を記入して保存します。
すると、「文書1」ファイルがあるフォルダに入力した文字と同じ名前の
文書ファイルがフレームの数だけ作られます。

あらかじめ作っておいた文書を好きなフレームに表示させることもできます。
任意のフレーム内で、右クリックからフレームのプロパティを選ぶと
参照(リンク)するファイルを選択できます。

ただ、印刷時はすべてのフレームを印刷することはできません。
アクティブな(カーソルがある)フレームが印刷対象になります。

ではこれは何のための機能なのか?
実はホームページを作成する為の機能のようです。
実際、名前をつけて保存から「Webページ」を選択すれば、
次回からは、ブラウザで開くことができます。
ブラウザ上ならば、すべてのフレームを一括印刷することができるので
yumi18さんの希望通りに印刷できると思います。

テキストボックスとしての機能はありませんが、
この面白さと、テキストボックスとしての機能を同時に求めるのなら
エクセルなどの表計算ソフトをお勧めします。

ワードのフレーム機能は、複数の文書ファイルを1ページ内で
表示ための機能です。
フレームで区切られた領域は、それぞれ別の文書ファイルとして保存されます。

例えば、「文書1」というファイルを立ち上げてフレームをいくつか作ってみてください。
それぞれのフレームに、短い言葉(1,2,3とか亜、い、うなど)
を記入して保存します。
すると、「文書1」ファイルがあるフォルダに入力した文字と同じ名前の
文書ファイルがフレームの数だけ作られます。

あらかじめ作っておいた文書を好きな...続きを読む

Q縦線、横線の作成

教えてください、困っています。
HTMLで普通に縦線、横線を引くのはどのようにしてやればよいのでしょうか。
表を使うのですか。

Aベストアンサー

TABLEを使う方法です。このソースを解析してくださいね。

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">

<TABLE WIDTH="400" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR><TD WIDTH=100%>横線</TD></TR>
<TR><TD WIDTH=100% HEIGHT="1" BGCOLOR="#CC0000"></TD></TR>
</TABLE>
<BR>
<BR>

<TABLE WIDTH="400" BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR><TD WIDTH="1" BGCOLOR="#CC0000"></TD><TD WIDTH="399">縦線<BR><BR><BR><BR><BR></TD></TR>
</TABLE>

</BODY>
</HTML>

Q画像の枠にオシャレなフレームをつける事ができるサイト

よろしくお願いいたします。

私は今までブログに写真をUPする際は、「CURURU」というサイトで画像の枠にフレームをつけるオプションを利用していたのですが、残念な事にCURURUが今月末で閉鎖してしまう為、他のサイトや無料ソフトで画像にフレームをつける事ができる場所を探しております。

できれば少しオシャレなフレームなどがあるサイトだと嬉しいのですが。。><
過去の質問も検索し拝見させて頂きましたが、探しているようなサイトやソフトの紹介がなく質問させて頂きました。
大変困っております。。
どなたか分かる方がいらっしゃいましたら教えて頂けませんでしょうか?
よろしくお願いいたします。

*現在使用しているフレームの画像を添付いたします。

Aベストアンサー

サイトについては(閉鎖されてる可能性もあるので)紹介できませんが、
ソフトについては何度も回答している一つ覚え的なものですが紹介することはできます。

【PhotoScape】などはいかがでしょうか。
http://freesoftdownload.1-yo.com/image-editor/photoscape.html
紹介記事を書いているサイト
http://postcard.sakura.ne.jp/PhotoScape.html

添付した画像は、質問に添付したものを真似て加工したものです。

QIE4/5、NN4/6で、UTF-8多言語ページの作成・文字入力方法

当方、Windows95です。
IE4.0と5.0、ネスケ4.xと6.2を使っています。
UTF-8の文字コードセットにて、中文やハングルなども交えたHTMLページを作りたいのですが、どうやってもうまいこといきません。

ネスケに付属のComporserでは、新規、または既存のHTML(Shift-JIS)を開いて、文字コードをUTF-8にして、中文やハングルなどを入力して保存しています。
入力は、ATOK8の文字コードパレットで文字一覧を見ながらクリックして入力しています。
しかし、それをブラウザプレビューしたら、半角カタカナのような文字化けをしていて、正しく表示されていません。表示モードはUTF-8にしています。
外国語フォントはインストール済みです。ネスケ4以外からは、すべて見ることができます。

もう1つ、秀丸エディタでもUTF-8モードで編集、保存、しているのですが、編集画面の半角カタカナのような文字のままブラウザに表示されてしまいます。

http://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8
このようなページのソースを拾っての、コピーペーストでは、正しく表示されます。

MS-OfficeやMGIによる解決方法は無しでお願いしたいと思います。<(_ _)>

当方、Windows95です。
IE4.0と5.0、ネスケ4.xと6.2を使っています。
UTF-8の文字コードセットにて、中文やハングルなども交えたHTMLページを作りたいのですが、どうやってもうまいこといきません。

ネスケに付属のComporserでは、新規、または既存のHTML(Shift-JIS)を開いて、文字コードをUTF-8にして、中文やハングルなどを入力して保存しています。
入力は、ATOK8の文字コードパレットで文字一覧を見ながらクリックして入力しています。
しかし、それをブラウザプレビューしたら、半角カタカナのよう...続きを読む

Aベストアンサー

たぶん、文字コード「変換」が行われていない為かと・・・。

Comporser を少し見た処、変換機能が見つからなかったのに
>文字コードをUTF-8にして
と、たぶん表示の文字コードの事を言われている気がして・・・。

そう感じる一番の理由が、
>このようなページのソースを拾っての、
>コピーペーストでは、正しく表示されます。
対象が元々 UTF-8 なのですが・・・。

少なくとも既存のHTML(Shift-JIS)は文字コード変換してあげなければ、いつまでも Shift-JIS のままかと・・・
ただ、新規がよ~判らん???

新規で作った処、
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>test02</title></head><body>

タイトルは別として、他は誰が操作しても大差ないと思うし、物は UTF-8 で保存されるし・・・。


とりあえず、思いついた事だけでもと・・・・・。
参考になれば。

たぶん、文字コード「変換」が行われていない為かと・・・。

Comporser を少し見た処、変換機能が見つからなかったのに
>文字コードをUTF-8にして
と、たぶん表示の文字コードの事を言われている気がして・・・。

そう感じる一番の理由が、
>このようなページのソースを拾っての、
>コピーペーストでは、正しく表示されます。
対象が元々 UTF-8 なのですが・・・。

少なくとも既存のHTML(Shift-JIS)は文字コード変換してあげなければ、いつまでも Shift-JIS のままかと・・・
ただ、新規がよ...続きを読む

QHP作成のヒント。これってフレーム?枠?

ホームページ作成しようと思っているのですが・・・

http://ip.tosp.co.jp/i.asp?i=milk_marie

こんな風にしたいのですがこれってフレームでしてるのでしょうか。フレームではなく、枠ですか?

こんな感じで周りがピンクの枠でその中にスクロールバーを入れて、バック固定でしたいのですが、タグ等分かりましたら教えてください。
あと、こんな感じのタグが沢山あるサイトさんがあれば教えてください。イラスト素材ではなく・・・

ちなみにこのサイトさんは通りがかりで見つけたものですので参考までに・・・

Aベストアンサー

Javaはの知識はあまりないですが、そんなの使わなくても再現可能です。
ちなみにフレームでもできますが、そうでない方法を紹介します。

スタイルシートは分かりますか?
<style type="text/css">
<!--
body { border-width:20px; bordercolor:#ffcc99; border-style:solid;}
-->
</style>

これをヘッダーの中に埋め込みます。

URLを貼っておきます。
これは参考になると思います。

ちなみに今紹介したのは、最下部「その他の小技」の「ページを枠で囲む」という項目に載っています。

参考URL:http://hp.xrea.jp/m/index.html

QInternet Explorerになぜフレームイン(フレーム外し?フレームリンク?)の機能がないのでしょうか?

 ど近眼で、しかも15インチCRTなので、640×480ピクセルで見ていますが、そうすると、2~3個フレームがあると、各フレームがせまくて見づらくて仕方ありません。
 Internet Explorerなどのブラウザには、なぜフレームイン(フレーム外し?フレームリンク?)の機能がないのでしょうか?
 ついでに、そういう機能をもったブラウザソフトがあるならば紹介してください。

Aベストアンサー

ツールなら、YunaToysが便利ですね。
このソフトを使えば、右クリック→ゆなデュプリケート という操作で、フレームの中身のみを新しいウインドウで開くことが出来ます。

参考URL:http://www.uryusoft.com/

Q枠がないフレーム

よく他のホームページで枠がないフレームがありますが
あれはどうやってプログラムを作ればよいのでしょうか?
このサイトも枠がないのですが、いわいるこんな感じです

Aベストアンサー

<frame border="0">
のことでしょうか。

フレームについては以下のサイトに詳しく載っています。

参考URL:http://papa345.hp.infoseek.co.jp/www/wwwreffr.htm

Qフレーム枠の消し方について教えて下さい

こんにちは。
現在、ホームページビルダーを使って、HPを作成しています。
フレームのあるページにして、なおかつフレーム枠線のない(あのグレ
ー色の線です)ページにしようかと作成して転送してみました。

Winでは、もちろんそのフレームのページは線のないページで見られる
のですが・・・Macだと白い線で表示されていました。

この場合どのように直したらよろしいのでしょうか。
お手数ですが、教えて下さい。よろしくおねがいします。

Aベストアンサー

IE用に、frameborder=0 framespacing=0
NN用に、border=0
としておけば、枠線が完全に消えるとおもいます。

QPhotoshop6.0木枠のフレームは?

http://dospara.okwave.jp/qa2849925.html
の質問の続きですが、確かにフレームはできました。
しかし木の枠みたいな、フレームの作成はPhotoshop6.0では無理ですかね!
宜しくお願いいたします。

Aベストアンサー

技量次第で何でもできるソフトです。
写真素材のテクスチャがあればそれを利用しても良いですが、無いなら自分で作成できます。
作成した画像を縦横に配置すればフレームが完成します。

http://www.furuoka.com/photoshop/text_wood_04.html

Qスタイルシートでフレーム枠を隙間なくピタリとつける。

よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" width="10" height="300" />
<p><img src="images/top/event.png" width="220" height="20" /></p>
</div>


【css】
#subnavibar {
width: 240px;
float: left;
background-color: #ffffff;
height: 100%;

}


原因としては、何があるでしょうか?

よろしくおねがいします。
http://www.sonzai.net/test/test.html
参考URL↑
中央に<iframe>を置き、それを囲むようにフレームを設置したいのですが、
下辺だけ微妙に離れてしまいます。
【HTML】
<div id="subnavibar">
<p><img src="images/top/event.png" width="220" height="50" /></p>
<img src="images/top/event.png" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="images/top/event.png" w...続きを読む

Aベストアンサー

> 原因としては、何があるでしょうか?
「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。

1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="20" /><BR><BR>赤のバーがピッタリとくっつきません。</p>
</div>

2. vertical-align:bottom; を指定する
<style type="text/css">
img,iframe { vertical-align:bottom; }
</style>

Export-Japan Blog » Blog Archive » IEで、画像の下に隙間ができたり、逆に隙間がバラバラだったり
http://www.export-japan.co.jp/blog/2007/06/21/ie%E3%81%A7%E3%80%81%E7%94%BB%E5%83%8F%E3%81%AE%E4%B8%8B%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E3%81%A7%E3%81%8D%E3%81%9F%E3%82%8A%E3%80%81%E9%80%86%E3%81%AB%E9%9A%99%E9%96%93%E3%81%8C%E3%83%90%E3%83%A9/

> 原因としては、何があるでしょうか?
「img要素の基準線としてbaselineが指定されているから」だそうです。(調べて知りました)
対策は2つあります。

1. 空白文字を取り除く
<div id="subnavibar">
<p><img src="01.gif" width="220" height="50" /></p>
<img src="02.gif" width="10" height="300" /><iframe src="a.html" width="200px" height="300px" scrolling="yes" frameborder="0" name="side"></iframe><img src="02.gif" width="10" height="300" /><p><img src="03.gif" width="220" height="...続きを読む


人気Q&Aランキング

おすすめ情報