• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:テーブルの1列目だけ背景色をつけたい)

テーブルの1列目だけ背景色をつけたい

kaitakusyaの回答

回答No.1

背景色については、 trタグにbgcolorで指定できます。 <tr bgcolor="#FF0000">等・・・ 文字色についてはtd要素内にスタイルシートを適用するのがいいでしょう。 両方スタイルシートの形式でもかまいませんが・・・ スタイルの例として、 <td style="color:#FFFFFF">などでしょうか? スタイルシートを外部リンクにして一括で指定する方法もあります。 その場合はtr/tdのタグにIDなどつけるとやりやすいでしょう。 参考になりそうなURL載せておきますので勉強してみてください。

参考URL:
http://www.tohoho-web.com/css/basic.htm
noname#61450
質問者

お礼

ありがとうございます。 td のタグにつけると一つ一つつけていかないといけないので、面倒だと思ったんです。できれば<td>だけでどうにかその色がつかないかなと・・・^^; 回答ありがとうございました。

関連するQ&A

  • テーブルのフォントサイズ

    こんにちは。 テーブルタグ内でフォント指定のやり方を探しています。 現段階では <TABLE BORDER=1> <TR><TD><FONT SIZE=2>文章</FONT></TD></TR> </TABLE> のようにやっています。 テーブルで一括して指定できる方法を教えてください! お願いします

    • ベストアンサー
    • HTML
  • 文字を右寄りにしつつ、背景を赤にするには

    css初心者です。 一番左のセルのみ、文字を右寄りにしつつ、背景を赤にしたいのですが、 全ての背景に色がついてしまいます。 1と100のセルのみ、文字を右寄りにしつつ、背景を赤にするにはどうすればいいですか? <html> <head> <title>test</title> <style type="text/css"> td.table_moji_right { text-align: right; } td { background-color: red; } </style> </head> <body> <table border=1 cellspacing=1> <tr><td class="table_moji_right">1</td><td>aaa</td></tr> <tr><td class="table_moji_right">100</td><td>iii</td></tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • クリックするとテーブルの列の背景色が変わる/元に戻る

    このサイトを参考に以下のサンプルを作りました。 「あるセルをクリックすると、そのセルと依存関係のあるセルすべての背景色を変更する。」 この例でいくと、 1.セルA1,A2のどれをクリックしても、列Aすべての色が変わる。 2.セルB1,B2のいずれかをクリックすると、列Aは元の色に戻り、列Bすべての色が変わる という動きを実現したいです。 2.機能を実現するにはどのようにすればよいのか、どなたかご存知の方ご教授のほどよろしくお願いいたします。 現時点のサンプル <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テーブルの列の背景色を変える</title> <SCRIPT language="JavaScript"> <!-- function bgcolor(idName){ for ( i=0 ; i < document.all.item(idName).length ; i++ ) { document.all.item(idName, i).style.backgroundColor = "#EE3300"; } } //--> </SCRIPT> </head> <body> <TABLE border="1"> <TR> <TD width="30">&nbsp;</TD> <TD width="30">列A</TD> <TD width="30">列B</TD> <TD width="30">列C</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行1</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A1</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B1</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C1</TD> </TR> </TABLE> <TABLE border="1"> <TR> <TD width="30">行2</TD> <TD width="30" id="td1" onclick="bgcolor('td1')">A2</TD> <TD width="30" id="td2" onclick="bgcolor('td2')">B2</TD> <TD width="30" id="td3" onclick="bgcolor('td3')">C2</TD> </TR> </TABLE> </body> </html>

  • テーブルタグについてなんですけど・・・

    下記のテーブルタグを使うと <Table Border> <Tr BgColor=#d5eaff> <Td>あ</Td><Td>い</Td> </Tr> <Tr BgColor=#ffffd5> <Td>う<Td><Td>え</Td> </Tr> </Table> これをHPに編集して反映させてみると上にテーブルと同じ色の棒線みたいなものが現れるんです。 http://heo.jp/tag/table/bgcolor.html  ここから、テーブルタグを頂きました。 どなたか、わかる方がいましたら回答お願いします。

  • gooの記事に表を作成する

    記事の中に、表を書き込む方法を教えてください。 テーブルタグの使い方が分かりません。 例 <Table Border> <Tr> <Table> 文字等 </Td> </Tr> </Table>

  • firefox:テーブルの背景色を半透明にすると文字も半透明になる

    Web初心者です。 opacityを使用して、テープルの背景色を半透明にしようとしていますが、下記のコードでは文字も半透明になってしまいます。 <table border="0" cellspacing="1" cellpadding="3" style="-moz-opacity:0.2"> <tr bgcolor="#990000"> <td><font color="#FFFFFF">test</font></td> </tr> </table> いろいろと調べましたが、IEでの解決方法は見つかるのですが、firefoxでやってみてもどれもうまくいきません。 市松模様の透過gif画像を作成する、という方法も知ってはいるのですが、色はユーザが指定できるようになっているので、全ての色の画像を用意するわけにも行かず、困っています。 firefoxでうまくやる方法はないでしょうか。

    • ベストアンサー
    • HTML
  • テーブルタグについて

    私は今テーブルタグでレイアウトする勉強をしています。よくHPでみかける作り方ですが、セルを縦に設定したいと思っています。作り方がテーブルタグの中にテーブルタグをいれて作っているようなのですが、実際私が作ってみると、左右のテーブルの位置が行数が違ってくると少ない行数の方が上下にセンタリングされてしまい、トップの位置がずれてしまいます。 何回もHPを見て、これはと思うタグをいれてやってはみたのですが、うまくいきません。 下に私が作った「html」をのせましたので、どなたかわかる方、教えてください。お願いします。 <参考html> <html> <head> </head> <body> <table border="1" align="center" cellspacing="0" cellpadding="0"> <tr> <td> <table> <tr> <td> <table border="1"> <tr> <td>これは日本昔話です。</td> </tr> <tr> <td>むかしむかしあるところにおじいさんとおばあさんが住んでいました。ある日おじいさんは芝刈りに、おばあさんは川へせんたくにいきました。</td> </tr> </table> </td> </tr> </table> </td> <td> <table border="1"> <tr> <td> <table border="1"> <tr> <td>私はWEBの勉強をしています。</td> </tr> <tr> <td>なかなかむずかしいです。。</td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルタグで列を揃える方法

    テーブルタグで列を揃える方法を教えてください。 <table border width="500"> <tr> <td>あ</td> <td>あい</td> <td>あいう</td> <td>あいうえ</td> <td>あいうえお</td> </tr> </table> のような表だとあいうえおの部分が一番大きな枠になって、あの部分が一番小さな枠になってしまいます。 あも、あいうえおも同じ大きさの枠にする方法がありましたら教えていただけると助かります。 回答お願い致します。

    • ベストアンサー
    • HTML
  • テーブルの背景を変える

    js(外部ファイル)から呼び寄せる方法で1段目と3段目のセルが赤、2段目と4段目のセルが青にする方法 分かりやすくいいますと、奇数が赤、偶数が青になる 方法を教えてもらいたいです。 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> <table border="1"> <col span="6" width="85" align="center"> <th>ID</th> <th >NO</th> <th >Name</th> <th >身長</th> <th>体重</th> <th >その他</th> </table> <table border="1"> <col span="6" width="85" align="center"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> <tr> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> <td>4</td> </tr> </table> </body> </html>

  • テーブル内のテーブルの高さを揃えたい。

    CGIの表示部分を改造中です。 下のソースをhtmlファイルにして見てもらったら判ると思うのですが、 <TABLE border="0"> <COL span="4" width="50"> <TR> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">こんな風に</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">枠を置いたときに</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">100%のサイズ指定しても合わない高さを</TD> </TR> </TABLE> </TD> <TD valign="top"> <TABLE border="0" cellpadding="0" cellspacing="1" bgcolor="#cccccc" height="100%"> <TR> <TD bgcolor="#ffffff">ちゃんと揃えて配置したい</TD> </TR> </TABLE> </TD> </TR> </TABLE> 高さを100%にしても広がりませんでした。 どうにかして高さ(下の位置)を揃えることは出来ないでしょうか?

    • ベストアンサー
    • HTML