• ベストアンサー

tableに対するdiv

テーブル内の文字色を白にしたい場合、 <style type="text/css"><!-- div.font{color:white;} --></style> <tr> <div class="font"> <td align="center" width="20%">★１</td> <td align="center" width="20%">★２</td> <td align="center" width="20%">★３</td> <td align="center" width="20%">★４</td> <td align="center" width="20%">★５</td> </div> </tr> このように指定しましたが、適用されません。 なぜでしょう？

  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • X-trail_00
  • ベストアンサー率30% (438/1430)
回答No.1

<TR>タグの中にdivタグ入れてもダメです。 tdタグの中にそれぞれ入れてください。 というかそれぞれのtdのclassをセットしたほうが早い。 <td align="center" class="font" width="20%"> このように そしてCSSを td.font{color:white;}

zidane1980
質問者

お礼

できました＾＾ なるほど、tdタグにやったほうがいいですね。 ありがとうございました！！

その他の回答 (1)

回答No.2

<tr></tr>の中に直接<div></div>を入れるのはHTMLの文法違反です。 <style type="text/css"> <!-- .font{color:white;} --> </style> <tr class="font"> <td align="center" width="20%">★１</td> <td align="center" width="20%">★２</td> <td align="center" width="20%">★３</td> <td align="center" width="20%">★４</td> <td align="center" width="20%">★５</td> </tr> でいけると思います。

zidane1980
質問者

お礼

アドバイスありがとうございます＾＾ 理解できました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • borderが1のテーブル

    ボーダーが1ピクセルくらいの表を作りたいので、tableの入れ子で作ったのですが「tableの入れ子は良くない」ととあるサイトで読んだので、入れ子にしないでtableを作りたいのですが何か良い方法はありますでしょうか？ 私が書いたのはこんなかんじです。 <table width="400" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#000000"><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="1"> <tr bgcolor="#999999"> <th><div align="center"><font size="2">名称</font></div></th> <th><div align="center"><font size="2">模型材質</font></div></th> <th><div align="center"><font size="2">生産材質</font></div></th> </tr> <tr bgcolor="#FFFFFF"> <td bgcolor="#999999"><div align="center"><font size="2">本体</font></div></td> <td><div align="center"><font size="2">発泡塩ビ板</font></div></td> <td><div align="center"><font size="2">プラスチック</font></div></td> </tr> </table></td> </tr> </table> CSSで「style="border-width :1px 1px 1px 1px;border-style : solid solid solid solid ;border-color :#000000 #000000 #000000 #000000 ;"」というのを入れてやってみたのですが、これだと外側にしかラインが表示されませんでした。 よろしくおねがいします。

  • 横に並べたテーブル

    200×200px程度のテーブルを複数（行数や列数はバラバラです）横に並べたいのですが、とりあえず、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ページのタイトル</title> <style type="text/css"> <!-- body{ color:#330000; background-color:#cc3333; } table.a{ background-color:#ffffff; padding:1px; border:1px solid #000000; display:inline; margin:5px; } td.a{ text-align:center; vertical-align:middle; border:1px solid #000000; font-size:small; padding:1px; background-color:#ffffff; } div.center{ text-align:center; } --> </style> </head> <body> <div class="center"> <table class="a"> <tr><td class="a">AAAAAAAAAA</td></tr> <tr><td class="a">AAAAAAAAAA</td></tr> </table> <table class="a"> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> <tr><td class="a">BBBBBBBBBB</td></tr> </table> </div> </body> </html> という感じでdisplay:inlineで並べました。 これだとIEでは普通に見えるのですが、Ffだと表示が崩れてしまいました。 どこがいけないのかよくわかりません……。FfやNNでもちゃんと見えるようにしたいのですが、どうすればいいでしょうか。 また、スタイルシートでもっといい他の方法があったら教えていただけると助かります。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • ＤＩＶが二つ続いた後の下にテーブルを表示したいので

    添付はエクセルの画像ですが ＨＴＭＬでＤＩＶが二つ続いた後の下にテーブルを表示したいのですが <html> <head> <title>test</title> <style type="text/css"> <!-- div.migi, div.hidari{ float : left ; text-align:center; width:100px; background-color: #ffff00; border: 1px #BDBDBD solid; padding: 10px 6px; } div.migi{ float: right; } --> </style> </head> <body> <div class="hidari"> hidari </div> <div class="migi"> migi </div> <table border=1 cellspacing=0> <tr><td>1</td><td>2</td></tr> </table> </body> </html> このコードだとDIVの中にテーブルが入ってしまいます。 理想は添付画像です。 どうすれば良いでしょうか？ よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブル内に隙間が。

    テーブル内に隙間が。 質問です。CSSとテーブルタグを使用してwebページを作りました。が、 IE,FireFox,Chrome等のブラウザでは添付画像のように隙間が出来ます。 これを無くすにはどうすればいいのでしょうか。 （html/cssの書き直さなくてはならない箇所はどこでしょうか） 高さは左右のセルとも300に合わせているのですが…。 どなたかご教授願います。 <!--ソース --> <style TYPE="text/css"> <!-- td { margin: 0; padding: 0px; } .content_title { display: block; position: relative; padding-left: 0px; width: 100%; height: 40px; color: #ffffff; background-color: #000000;} .content_cell { position: relative; padding-bottom: 0px; width: 100%; height: 260px; padding: 0; } .menu_link { display: block; position: relative; width: 100%; height: 30px; padding-top: 12px; text-align: center; font-size: 11pt; color: #f5f5f5; background-color: #000000; } --> </style> <table bordercolor="#aaaaaa" border="2" align="center" width="92%" bgcolor="#353535" cellspacing="2" height="300"> <td rowspan="6" width="72%" bgcolor="#ffffff" height="300" valign="top"> <div class="content_title">あいうえお</div> <div class="content_cell"><img src="img/hikaku.png" width="100%" height="100%" border="0"></div> </td> <td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../about/index.html">cell_1</a> </td> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../flash/index.html">cell_2</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../web/index.html">cell3</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../diy/index.html">cell_4</a> </td></tr> <tr><td width="28%" height="30" align="center" bgcolor="#000000"> <a class="menu_link" href="../link/index.html">cell_5</a> </td></tr> <tr><td width="28%" align="center" height="150" bgcolor="#000000"> <!-- no contents -->no content </td></tr> </table>

  • dreamweaverで、テーブルのボーダーカラーに入力しても、表示されません。

    プロの方に作っていただいたHPを書き換えていて、 テーブルのボーダーカラーを指定しようとしているのですが、 コードから何回もボーダーカラーを指定しているのに、 色がまったく表示されません。 </table> <table width="500" height="118" border="2" align="center" cellpadding="5" cellspacing="2" bordercolor="#000000"> <tr> <td width="131" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="205" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> <td width="114" bordercolor="#000000" bgcolor="#CCCCCC"><div align="center">●●●</div></td> </tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> <tr> <td bordercolor="#000000"><div align="center">●●●</div></td> <td bordercolor="#000000"><div align="center">●●●<br> ●●● </div></td> <td bordercolor="#000000"><div align="center">●●●</div></td> </tr> </table> 新しいページに、以上のコードをペーストすると、ちゃんと表示されます。 スタイルシートやCSSで指定してあって、それが優先されているのでしょうか？ スタイルシートやCSSは使ったことがないのですが、 それを解除するには、どうすれば良いでしょうか？ よろしくお願いいたします。

  • tableの内側の線を表示したい

    タイトルどおり、テーブルの内側の線を書きたいのですが、CSSなどが影響しているようで縦の線が表示されません。 私個人のサイトではないので、他のページのテーブルは変更できないので、私が書いている文章の途中にだけ出てくるテーブルのみに、縦線を表示させたいです。 今後は使うことはないと思うので、できれば、CSSのファイルをいじることなくやりたいのですが、方法がわかりません。アイデアを貸してください。 <table style="height: 614px;" width="496" > <tbody> <tr> <td><img class="size-medium wp-image-1624 aligncenter" src="" alt="12" width="225" height="300" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1626 aligncenter" src="" alt="11" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1584 aligncenter" src="" alt="1022" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1585 aligncenter" src="" alt="1082" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1586 aligncenter" src="" alt="1092" width="300" height="339" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1627 aligncenter" src="" alt="13" width="254" height="339" /> <p style="text-align: center;">テキスト</p> </td> </tr> <tr> <td><img class="size-medium wp-image-1583 aligncenter" src="" alt="P1000231" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> <td><img class="size-medium wp-image-1625 aligncenter" src="" alt="15" width="300" height="225" /> <p style="text-align: center;">テキスト</p> </td> </tr> </tbody> </table>

    • 締切済み
    • CSS
  • CSSを使った丸ナンバー付きテーブルの挿入

    HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。

    • ベストアンサー
    • HTML
  • Firefoxでテーブルの外側の背景色が出ない

    IE8では中央にテーブルが配置し外側の背景色が出るのですが、Firefoxではテーブルの位置も左側に寄り、外側の背景色がテーブル内と同じ白一色になってしまうのですが、どう直したらいいのでしょうか。 以下、ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows"> <TITLE>○○○</TITLE> <STYLE TYPE="text/css"> <!-- BODY {background:'palegreen';color:#000000;text-align:center;} TABLE {background:#FFFFFF;color:#000000;} CAPTION {background:#FFFFFF;color:#000000;text-align:left;font-weight:bold;} .tmscntr {text-align:center;font-size:14px;font-family:'Times New Roman';} .tmsrght {text-align:right;font-size:14px;font-family:'Times New Roman';} .tmslft {text-align:left;font-size:14px;font-family:'Times New Roman';} SPAN {margin-left:20PX;"}}}}}}}} .cntr {text-align:center;} .rght {text-align:right;} .lft {text-align:left;} A:visited {color:#000099;} A:active {color:#FFFFFF;background:#CCCCFF;} A:hover {color:#DCDCDC;background:#000099;} --> </STYLE> </HEAD> <BODY text="#000000" bgcolor="#FFFFFF" link="#ff3535" vlink="#808080" alink="#ff8040"> <DIV><BR> <TABLE cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION><TR><TD> <TABLE border="0" cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION> <TR><TD><b>(1)○○○</b></TD><TD><b>○○○</b></TD><TD colspan="3"><b>○○○○○○</b>　<b><font color="#ff0000">○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</TD><TD><b>○○○○○○○○○</b></TD></TR> <TR><TD><br><b>(2)○○○</b></TD><TD><br><b>○○○</b></TD><TD colspan="3"><br><b>○○○<b><font color="#008800">○○○○○○○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</b></TD><TD><b>○○○○○○○○○</b></TD></TR> <TABLE align="center"><br><br><br> </TABLE> </TD></TR></TABLE></DIV> </BODY> </HTML>

  • CSSでテーブルを中央にする方法

    CSSでテーブルを中央にする方法を教えてください いろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css"> <!-- .tableley { margin-left: auto; margin-right: auto; text-align: center; } //--> </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか？ <div align="center">にするしか方法がないのでしょうか？ 文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいます よろしくお願いします。

    • ベストアンサー
    • HTML
  • コンテナ内で文字を中央に表示したい

    <div> <table border=0 cellspacing=0 cellpadding=0 style="width: 100%; height: 100%;"> <tr> <td style="text-align: center; vertical-align: middle;"> Hello! </td> </tr> </table> </div> のように、テーブルを使わずに（できればCSSなどで）divタグ内のテキストを中央に表示したいのですが、できますか？ よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する