テーブルにCSSで範囲指定できる方法
- テーブルの範囲指定について質問しています。テーブルを終了した後に再度テーブルを書くと下に表示される問題に対して、テーブルの右側に表示させる方法を教えてほしいという内容です。
- もう1つの質問は、CSSで範囲指定をしてその部分だけに効果を与える方法についてです。具体的には、テーブルのボーダーの境目の部分にCSSの効果を付ける方法を教えてほしいという内容です。
- また、テーブル内のテキストエリアの上にタイトルを重ねるようなデザインを作りたいという要望もあります。具体的なデザインの参考ページも提供されています。
- ベストアンサー
テーブルにCSSで範囲指定
テーブルでいま、 ホームページを作っているのですが、 テーブルは、 <table> ～～ </table> で終わりますよね。 そのあとに、もう1回 上記のタグを書くと、 下に表示されてしまいますよね。 今書いたテーブルの右側に表示するにはどうすればいいですか？ もし、分かる方がいたら ソースのほうも回答お願いいたします。（任意） もう1つ質問させてください。 上の質問以外にもう1つ解決方法があるかなーと思いますので。 CSSは範囲を指定して、 その部分だけにCSSの効果を使う事はできますか？ 例えば、 テーブルの<border>の境目の部分とか・・・ こちらも、ソースの方をよろしくお願いします。（任意） ※z-indexのタグを使う場合は、ソースを載せてください。 ちなみに、考えているのは、 http://wdt.pekori.jp/template/box/025_gray.html に載っているのがありますよね。 文を書き込むところの上に タイトルが載っていますが、 それを、また文を書き込むところから 文を書き込むところへと、重ねるような感じの ものを作りたいと思っています。
- kabin2000
- お礼率13% (45/334)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞今書いたテーブルの右側に表示する 方法１． 1行2列のテーブルのセルの中にさらにテーブルを入れる。入れ子、ですね。 方法２． <table style="float:left">と、スタイルを使用する。tableはふたつ続けて書くと通常は下に表示されます（改行されます）が、floatを使用すると、改行されるものが回り込みます。 その他の質問は、他の方にお願いします。
関連するQ&A
- CSSのテーブルの件で
はじめまして よろしくお願いいたします。 CSSでテーブルを作っているのですが うまくいきません 作りたいのは下記のようなテーブルです ┌───────┐ │ A │ B │ └───────┘ 点線ではなく普通の線で構いません 大きなテーブルの幅が500pxとして Aを200px Bを300px にしたいのです テーブルのIDは「table2」にしています <外部CSSの部分> #table2{border:1px solid #000000; width:500px; } #table2 th{border:1px solid #000000; width:200px; } #table2 td{border:1px solid #000000; width:300px; } <htmlの部分> <table id="table2"> <tr> <td></td> </tr> </table> 色々やってみたのですが うまく行きません 詳しい方教えて頂けないでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでテーブルボーダーを一発指定出来ません！
現在テーブルに対してのCSSを設定しているのですが、私の勘違いなのかうまく出来ません・・・。 例えば縦5×横5列の表が有ったとします。 そこにCSSで四方1pxのボーダーを指定します。 でも、これだけだと表の一番外枠部分にしかボーダーが表示されません・・・。（当然なのかもしれませんが） そこで、CSSを使い中のブロック？部分、<td>全てにボーダーを表示させたいのですが、そのようなことは可能なのでしょうか？ ようは、表の枠線全てをcssで表示させたいのですが、この様な事は可能でしょうか？？ ご存知の方がいましたら、アドバイスいただけますでしょうか？ 宜しくお願いいたします。
- ベストアンサー
- HTML
- cssでtableを指定したい
教えてください。 cssでテーブルを指定しているのですが、別の幅のテーブルを指定したいときはどうすればよいのでしょうか。 現在はこういうふうに書いています。ちょっと汚いですが。。。 ----------------------------- #content #main p{ margin:10px 18px 25px; font-size:12px; } #content #main table { border-collapse: collapse; background-color: #FFFFFF; width: 480px; margin:0px padding; border: 0px #000000: 1px; } #content #main caption{ text-align: right; padding-right: 5px; font-size:12px; } #content #main th { border: #999999 1px solid; font-size:12px; font-weight: normal; background-color: #D8EAFC; padding: 5px; } #content #main td{ border-right: #999999 1px solid; border-top: #999999 1px solid; border-left: #999999 1px solid; border-bottom: #999999 1px solid; font-size:12px; text-align: left; padding: 5px; } ----------------------------- 実際にタグを書くときは、こう書いています。 ----------------------------- <table> <tr> <th>aaaa</th> <td>5555555555555555555555555555</td> </tr> </table> ----------------------------- これをmaintable subtable というふうに幅が違うものにしたいのですが、cssにmaintableを追加して、<table class=maintable">と指定しても、maintableではなく、tableで表示されます。 こういう場合はどうすればよいのでしょうか？
- ベストアンサー
- XML
- テーブルの配置
お忙しいところすみません。たぶんＣＳＳでレイアウトした方がいいと思うのですが、よく分からないのでとりあえずテーブルでレイアウトしています。 テーブルの入れ子にせずにレイアウトをしたいのですが、ブラウザーで確認すると、文字サイズを小さくすると、真ん中の左右に並べたテーブルが上下のテーブルの位置からはみだしてしまいます。 何かタグを付け加えるとうまくいくのでしょうか？ ・まず、ページの上にタイトルやボタンを配置するテーブルを置き、 <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> ・その下に左右にテーブルを配置し、内容を書き、 <table width="49%" border="0" align="left" cellpadding="0" cellspacing="0"> <table width="49%" border="0" align="right" cellpadding="0" cellspacing="0"> ・その下にまたテーブルを置いて、コピーライトを表示させる <table width="98%" border="0" align="left" cellpadding="0" cellspacing="0"> 省略してタグを書いていて、分かりにくければ申し訳ございません。教えていただけるとうれしいです。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- テーブルの線の色が指定できない
テーブルの線の色が指定できないうえ、最後に宣言したスタイルシートが適用されてしまいます。 理由がわかりません。 <style type="text/css"> table, td, th.bordercolor_white { border: 1px white solid; } table, td, th.bordercolor_red { border: 1px red solid; } </style> <table class="bordercolor_white"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> このような文だと、 <table class="bordercolor_white">としているのに、 なぜかテーブルの線の色は、赤になってしまいます。 table, td, th.bordercolor_red { border: 1px red solid; } table, td, th.bordercolor_white { border: 1px white solid; } のように、順番を入れ替えると、最後に宣言した白になります。 なので、<table class="bordercolor_white">の部分は無視されるようです。 二つのテーブルの線の色を用意した場合、 任意でテーブルの線の色を付ける方法をご教授ください。
- 締切済み
- CSS
- テーブルのボーダー（枠線）は何で指定したらいいですか？
テーブルの枠線の指定の仕方について質問です。 HTMLだけで指定するのであれば、 <table border="1"> ～～ </table> といった感じなのでしょうが、CSSも併用している場合、CSSで td{border:solid;] とし、HTMLでは <table> ～～ </table> という風に簡単（？）に書いたほうがいいんでしょうか？ なんでも見た目はCSSで定義しろとのことですし、テーブルの枠線ってHTMLとCSSとどっちで定義するのがいいんでしょうか？ 分かりにくい質問で申し訳ありません。初心者のため書き足りないところあるかもしれませんが、よろしくお願いします。
- ベストアンサー
- HTML
- CSSでテーブルを表示させるには
CSSでテーブルを表示させたいのですが、やり方が分かりません。教えてください。 現在は、HTMLで以下のように記述しています。 -------------------------------------------------------- <table border="0" width="100%" cellspacing="0" cellpadding="2"> <tr> <td bgcolor="#000000">テキスト</td> </tr> </table> -------------------------------------------------------- 具体的には、クラスを指定して、<div class="table">テキスト</div> と記述したときにテーブルを表示させたいです。 回答よろしくお願いします。
- ベストアンサー
- CSS
- テーブルの幅をデフォルトに戻すcssがわかりま
<html> <head> <title>test</title> <style type="text/css"> table { width: 100%; } </style> </head> <body> <table border=1> <tr><td>No</td><td>table1</td></tr> </table> <table border=1> <tr><td>No</td><td>table2</td></tr> </table> </body> </html> このようなソースで二つ目のテーブルだけ table { width: 100%; } を適用しない方法はありますか? 実際はテーブルが複数あり 基本的には table { width: 100%; } をテーブルに設定したいのですが とあるテーブルのみテーブルの幅をデフォルトのサイズにしたいのです。 table { width: 100%; } で全てのテーブルに適用した後に クラスを使って該当のテーブルのみ デフォルトの値に戻す方法は有りますか? <table border=1 class="デフォルトに戻す"> <tr><td>No</td><td>table2</td></tr> </table> としたいのですが テーブルの幅をデフォルトに戻すcssがわかりません。 2つのテーブルの幅は指定したくありません。
- ベストアンサー
- HTML
- テーブルがうまくいきません
はじめまして。 テーブル技をやろうと思っております。 テーブルのタグを打ち、文字を書いて保存しプレビューしてみました。 すると、テーブルの一番上から下へと文章を打っていきたいのに、文字が書かれるのはテーブルの真ん中からになってしまいました。 テーブルの上のほうは余白になってしまいます・・・ どうしてでしょうか？ ご指導よろしくお願いいたします・・・ ちなみにソースです。 <table border="0" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF" width="400" height="350"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table>
- ベストアンサー
- HTML
- CSSでテーブルの表示
.table1 { border: 0px #000000 solid; } table1.s1{width: 20px; } table1.s2{width: 40px; } とcssを記述し <TABLE CLASS="table1" CLASS="s1"> ・・・ と行ってもs1,s2の項目が反映されません。 どのようにすればよいでしょうか？
- ベストアンサー
- HTML
お礼
方法２でやってみたところ、 うまくいきました。 ありがとうございました！