ネットが遅くてイライラしてない!?

以下のような表があります。

<TABLE cellpadding="3" cellspacing="1" bgcolor="#666666">
<TBODY>
<TR>
<TD bgcolor="#ffffff">項目1</TD>
<TD bgcolor="#ffffff">内容1</TD>
</TR>
<TR>
<TD bgcolor="#ffffff">項目2</TD>
<TD bgcolor="#ffffff">内容2</TD>
</TR>
<TR>
<TD bgcolor="#ffffff">項目3</TD>
<TD bgcolor="#ffffff">内容3</TD>
</TR>
</TBODY>
</TABLE>

この状態で、壁紙を設定すると表の中は白でつぶれてしまいますよね。
これを表の中にも背景が出るようにすることは可能ですか?
style="filter:alpha(opacity=0)"をいろいろなところに当てはめてみたのですが、うまく出来ませんでした。
何か方法はありますか?よろしくお願いします。

A 回答 (8件)

No.3,No.5,No6のmousegokeです。



border-width:thin;

border-width:1px;

に変えてみてください。
    • good
    • 0
この回答へのお礼

ありがとうございました。
ばっちり出来ました。
何度も何度もすみませんでした<(_ _)>

お礼日時:2003/12/19 19:19

質問の趣旨が、『セルを透明にする』事ではなくて、『テーブルの罫線を望


む色と形状にしたい』と理解しました。

※注意:字下げの為、全角の空白を使用

<style type="text/css">
<!--
table.flat {
 border-collapse: collapse;
 border: 1px solid #666666;
}
.flat th, .flat td {
 border-collapse: collapse;
 border: 1px solid #666666;
}
-->
</style>
    :
    :
<table class="flat" border="1">
<tbody>
<tr>
 <td>項目1</td>
 <td>内容1</td>
</tr>
<tr>
 <td>項目2</td>
 <td>内容2</td>
</tr>
<tr>
 <td>項目3</td>
 <td>内容3</td>
</tr>
</tbody>
</table>

上記の例では、灰色(#666666)で幅1pxの実線(solid)が罫線として描画
されます。
実線以外にも、以下のものがあります。
 inset, outset, groove, ridge, dashed, dotted, double
この方法だと、上下左右の罫線を個別に設定することも出来て、とても便利
です。

※私が動作確認したブラウザ
 IE 5以上
 Opera 7.x

これで役に立ちますか?
    • good
    • 0
この回答へのお礼

ありがとうございました。
ばっちりなりました!

お礼日時:2003/12/19 19:19

No.3,No.5のmousegokeです。



それではスタイルタグの部分を

<STYLE type="text/css">
<!--
TABLE{
border-collapse:collapse;
}

TD,TH{
background-color:transparent;
}

TABLE,TD,TH{
border-style:solid;
border-color:#666666;
border-width:thin;
}
-->
</STYLE>

としてみてください。

この回答への補足

返答ありがとうございます。

おぉ!
かなりイメージと近くなってきました。
しかし、やはり罫線はちょっと太めですね。
1ピクセル(なのかな?)での罫線と言うのは無理なのでしょうか?
(現状では3ピクセル程度の罫線です)

補足日時:2003/12/19 16:48
    • good
    • 0

No.3のmousegokeです。



もしかしたら#666666は罫線の色のつもりだったんですか?
では

<STYLE type="text/css">
<!--
TD,TH{
background-color:transparent;
}

table,td,th{
border-style:solid;
border-color:#666666;
-->
</STYLE>
</HEAD>
<BODY background="./back02.jpg">
<TABLE cellpadding="3" cellspacing="1">
<TBODY>
<TR>
<TD>項目1</TD>
<TD>内容1</TD>
</TR>
<TR>
<TD>項目2</TD>
<TD>内容2</TD>
</TR>
<TR>
<TD>項目3</TD>
<TD>内容3</TD>
</TR>
</TBODY>
</TABLE>

としてみてください。表に隙間が出来るのはcellspacing"1"を指定しているためだと思います。

この回答への補足

返答ありがとうございます。
なぜか太い罫線になるのですが…
しかも、大枠の中にセル枠が出来てます…(画像をアップできないのが残念です)

細い罫線の状態でセルのバックを抜きたいのですが…

よろしくお願いします。

補足日時:2003/12/19 15:08
    • good
    • 0

bgcolor="#666666" をTABLEタグ内で指定せず、透明にしたくないセル単位(TR)で指定すれば良いっす。



#1でした。

この回答への補足

>bgcolor="#666666" をTABLEタグ内で指定せず
そうすると罫線が表示されないと思うのですが?

>透明にしたくないセル単位
全て透明にしたいのですが…

細い罫線のまま背景色を抜きたいのですが…

補足日時:2003/12/19 14:26
    • good
    • 0

ヘッドタグの最後に



<style type="text/css">
<!--
td,th{
background-color:transparent;
}
-->
</style>

を入れてみてください。
もし一部のセルだけ透過したいのなら
そのセルを
<td class="backtoumei">
のようにclass属性を指定して
.backtoumei{
background-color:transparent;
}

にしてみてください。

この回答への補足

返答ありがとうございます。

--------------------------
</TITLE>
<STYLE type="text/css">
<!--
TD,TH{
background-color:transparent;
}
-->
</STYLE>
</HEAD>
<BODY background="./back02.jpg">
<TABLE cellpadding="3" cellspacing="1" bgcolor="#666666">
<TBODY>
<TR>
<TD bgcolor="#ffffff">項目1</TD>
<TD bgcolor="#ffffff">内容1</TD>
</TR>
<TR>
<TD bgcolor="#ffffff">項目2</TD>
<TD bgcolor="#ffffff">内容2</TD>
</TR>
<TR>
<TD bgcolor="#ffffff">項目3</TD>
<TD bgcolor="#ffffff">内容3</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
--------------------------------
こういうことでしょうか?

残念ですが、だめでした。(やっぱり#666666で埋まるだけ)
他に方法がありますか?

補足日時:2003/12/19 14:17
    • good
    • 0

bgcolor="#666666" をやめて


border=1 border=1 bordercolor="#666666" では?
ちょっと違うか・・・
ボーダーをやめて、#666666色の細い画像を交互に埋め込むとか。

この回答への補足

>border=1 border=1 bordercolor="#666666" では?
こうすると、太線になるんですよね。

>ボーダーをやめて、#666666色の細い画像を交互に
いわゆる
-----------------
<TABLE border="0" cellpadding="0">
<TBODY>
<TR>
<TD rowspan="7" bgcolor="#666666"></TD>
<TD colspan="3" bgcolor="#666666"></TD>
<TD rowspan="7" bgcolor="#666666"></TD>
</TR>
<TR>
<TD>項目1</TD>
<TD bgcolor="#666666"></TD>
<TD>内容1</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#666666"></TD>
</TR>
<TR>
<TD>項目2</TD>
<TD bgcolor="#666666"></TD>
<TD>内容2</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#666666"></TD>
</TR>
<TR>
<TD>項目3</TD>
<TD bgcolor="#666666"></TD>
<TD>内容3</TD>
</TR>
<TR>
<TD colspan="3" bgcolor="#666666"></TD>
</TR>
</TBODY>
</TABLE>
------------------
こういうことでしょうか?
ちょっと美しくないようなw

補足日時:2003/12/19 14:23
    • good
    • 0

bgcolor="#ffffff" の指定を外せばOKっす。

この回答への補足

返答ありがとうございます。

>bgcolor="#ffffff" の指定を外せばOKっす。
それだけだと、実際やってもらえればすぐわかると思うのですが、単に#666666で塗りつぶされてしまうだけですけど…

補足日時:2003/12/19 12:26
    • good
    • 0

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

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

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

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qテーブルの位置を細かく指定したい。

現在、テーブルを組み合わせたサイトを作っていまして
そのテーブルの位置に悩んでおります。


背景固定で一つ大きめのイラストを置いていまして
そこに合わせてテーブルの位置を細かく調整したいのです。

center、left、rightの偏った3種類の位置じゃなく
左から200ピクセル程度の位置にテーブルを置きたいのです。

この様なタグはありませんか?

これはCSSなどて指定するしかないのでしようか?

Aベストアンサー

>左から200ピクセル程度の位置にテーブルを置きたいのです

<TABLE style="margin-left:200px;">
<TR><TD></TD></TR>
</TABLE>

CSSを使っての指定になると思います。

Qtableの背景色のみ半透明にする

tableの背景を白くして、alphaフィルターをかけることで背景画像をtableに半透明で映すことができますよね?
でもそれと一緒に文字まで薄くなってしまいます。
tableの枠と文字はそのままで、tableの背景のみを半透明にする方法はありますか?

Aベストアンサー

テーブルを重ねるのはいかがでしょうか?
外枠のテーブルは枠色をつけて、中は透明、
その中に又テーブルを作り、そこは枠なし半透明処理、
その中のセルは半透明を繁栄させなければ、
文字は半透明にはならないと思います、

こんな感じで、テーブル作ります。
<table width="620" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td width="620" height="669" valign="top">
<table style="filter:alpha(opacity=70)" width="100%" border="0" cellspacing="0" cellpadding="0" height="779" bgcolor="#FFFFFF">
<tr>
<td>TEST</td>
</tr>
</table>
</td>
</tr>
</table>

他にもレイヤー使ったりする方法もありますよ。
こんな感じでどうでしょう?

テーブルを重ねるのはいかがでしょうか?
外枠のテーブルは枠色をつけて、中は透明、
その中に又テーブルを作り、そこは枠なし半透明処理、
その中のセルは半透明を繁栄させなければ、
文字は半透明にはならないと思います、

こんな感じで、テーブル作ります。
<table width="620" border="2" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
<tr>
<td width="620" height="669" valign="top">
<table style="filter:alpha(opacity=70)" width="100%" border="0" cellspacing="0" cellpaddi...続きを読む

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Q文字列が入っているtdを削除せず非表示にしたい

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定したため、about列は表示されないはずなのですが、"右が1へのリンクになります"、"右が2への~"と表示されます。
プログラムの動作にかかわるので、about列を削除することなく、CSSなどを設定することでabout列を非表示にしたいのですが、何か上手な方法はあるでしょうか。

よろしくお願いします。

aboutをクラスとする列(以下、about列)を非表示にしようと、次のような設定をしました。

<style type="text/css">
th.about,
td.about{
width:0px;
border:0px;
}
</style>


<table>
<tr>
<th class="about">右が1へのリンクになります</th>
<th><a href="http://www1..com">ウェブサイト1</a></th>
</tr>
<tr>
<tr>
<td class="about">右が2へのリンクになります</td>
<td><a href="http://www.2.com">ウェブサイト2</a></td>
</tr>
<tr>


</tr>
</table>

aboutの長さ自体を0にするように設定し...続きを読む

Aベストアンサー

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="へんてこな表">
<caption>へんてこ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

だとして、
table{
border-collapse:collapse;
border:solid 1px gray;
}
td,th{border:dotted 1px gray;width:20em;
}
table[summary="なんたらの表"] td,table[summary="なんたらの表"] th{display:none;}
table[summary="なんたらの表"] *+td,table[summary="なんたらの表"] *+th{display:table-cell;}

table[summary="ほげほげの表"] td,table[summary="ほげほげの表"] th{visibility:hidden;}
table[summary="ほげほげの表"] *+td,table[summary="ほげほげの表"] *+th{visibility:visible;}

table[summary="むにゃむにゃの表"] td:first-child,table[summary="むにゃむにゃの表"] th:first-child{display:none;}

table[summary="へんてこな"] td:first-child,table[summary="へんてこな表"] th:first-child{visibility:hidden;}


消滅させるならdisplay:none;→display:table-cell;
存在は残すけど表示させないならvisibility:hidden;→visibility:visibble;

セレクタは適当に・・・
隣接セレクタを使うなら +
第一列なら、擬似クラス:first

<table summary="なんたらの表">
<caption>なんたらの表</caption>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="ほげほげの表">
<caption>ほげほげの表</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>
<tr>
<td>・・・・</td>
<td>・・・・</td>
</tr>
</tbody>
</table>

<table summary="むにゃむにゃの表">
<caption>むにゃむにゃ</cpation>
<tbody>
<tr>
<th>・・・</th>
<th>・・・</th>
</tr>...続きを読む

Qtable表を横に並べる際の間隔指定

<table style='float : left;'>
を用いて、tableを並べています。
この時table同士がくっついてしまうのですが、間隔を開ける方法がありましたら教えて下さい。

Aベストアンサー

マージンをあければいいのでは?

<table style="float:left;margin:5px;"> などなど...。

margin-left:10px; と、左側だけを指定する事も出来ます。
margin-right、margin-top、margin-bottom などなど。

Qテーブル内の一部のみ線を変更する方法ってありますか?

いつもお世話になっております。どなたか教えて下さい。
無理なら無理で結構ですので不可能だと回答下さい。

あるテーブル内の一部のみ線を点線にしたり、線幅を細くする方法があれば教えてほしいのですが・・・可能でしょうか?

イメージはエクセルのように一部の罫線だけを変更したいのです。宜しく御願いします。

1つのテーブルで実現不能ならば、複数のテーブルを自由に結合する方法とかないでしょうか?

むちゃくちゃ言って申し訳ありませんが、どなたか救いの手をお願いします。

ちなみにブラウザはIE5.0か6.0だと思います。

Aベストアンサー

スタイルシートを用いることで可能です。
以下の例ではタグに直接style属性を埋め込んでいますが、
先にstyle指定をしておくと楽かもしれません。
<table border="1" bordercolor="black">
<tr>
<td style="border-top-style:dashed;border-left:3px solid red;border-bottom-width:2px;border-right-color:blue;">あああ</td>
</tr>
</table>
詳しくは、スタイルシート、CSSなどで調べてみてください。

Qtableを縦に続けるとtable間の空間が気になります

tableを使ってHPを作っていますが、tableを下記のように縦にいくつも作っていると各table間が中途半端に隙間が出来てしまいます。もっと上下のtableをくっつけたいのですが何か方法は無いでしょうか?

<table> <tr><td></td></tr></table>
------------ ここ ----------
<table> <tr><td></td></tr></table>
------------ ここ ----------
<table> <tr><td></td></tr></table>

Aベストアンサー

<table>~</table>の中で
<td>~</td>の間以外の場所に
<br>や全角スペースを使っていませんか。(<tr>の前後とか)
それらをすべて削除しましょう。

QJPGを背景を透明にする方法

フォトショップでJPGの背景をキレイに透明にしたいんですが、早くできる方法ありませんか?
消しゴムで地道に消すしかありませんか?

Aベストアンサー

単純に背景を透明にしたいのならアルファチャンネルなんて難しいことをしなくても、残したいモノ(サンプル画像の場合い車椅子)を投げ縄ツールなどで選択・コピーし、新規キャンバスに貼り付ければ選択された以外のところは透明になります。まずは簡単に矩形や楕円で試してみてください。

ただし、保存する時にJPEGにすると透明になるはずの部分は「白」になります。

「透明」が出来るのは「GIF,PNG,PSD」です。

使用しているPhotoshopのバージョンが不明なので出来ないかもしれませんが、「クイックマスクツール」を使用すれば色を塗る感覚で必要な部分だけを選択可能です。このツールはPhotoshopLEやElementsにはありません。
LEやElementsしか持っていないなら、[選択範囲] - [色域指定]で大雑把に選択して不要な部分を消しゴムで消していくしかありません。

更に作業効率を上げるためのアイテムとして「ペンタブレット」をお奨めします。ワコムの製品だとペンの頭がデフォルトで消しゴムになっているのでどのような作業状態でも「消しゴム」ツールがペンを持ち替えるだけで使用できます。

単純に背景を透明にしたいのならアルファチャンネルなんて難しいことをしなくても、残したいモノ(サンプル画像の場合い車椅子)を投げ縄ツールなどで選択・コピーし、新規キャンバスに貼り付ければ選択された以外のところは透明になります。まずは簡単に矩形や楕円で試してみてください。

ただし、保存する時にJPEGにすると透明になるはずの部分は「白」になります。

「透明」が出来るのは「GIF,PNG,PSD」です。

使用しているPhotoshopのバージョンが不明なので出来ないかもしれませんが、「クイックマス...続きを読む


人気Q&Aランキング