• ベストアンサー

cssで、1行2段のtableを記述するには？

cssで、1行2段のtableを記述するには？ → htmlのページに以下を挿入しました。 <table> <tr> <td width="2"></td> <td width="588"></td> </tr> </table> → htmlのページの<head>と</head>の間に以下を挿入しました。 <link rel="stylesheet" type="text/css" href="table.css"> → table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。 TABLE{width : 640px;border-width : 0px 0px 0px 0px; padding-top : 0px;padding-left : 0px;padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} → table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか？ いろいろ試しましたが、うまくいきません。 <tr> <td width="2"></td> <td width="588"></td> </tr> → うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> よろしくおねがいします。

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

  • ベストアンサー
  • onimotsu
  • ベストアンサー率36% (279/758)
回答No.2

こんにちは。 外部ファイル（***.css）は１つでいいはずです。 １つの外部ファイルにスタイルを設定するのです。 お分かりだと思いますが、 スタイルの設定の仕方には 1.外部ファイル 2.クラス 3.各々の設定 があります。 1.外部ファイル 外部ファイルをアップロードしたディレクトリ内の全てのファイルに対して スタイルを一括して適用します。 2.クラス ファイル（ページ）ごとにファイル内に記述して 記述したファイルにだけに適用します。 3.各々の設定 文字やテーブルごとに１つずつ適用します。 ファイル数がそれほど多くない場合は クラスで設定されたほうが分かりやすいと思いますよ。 特にテーブルを多用する場合は。 例えばご質問のことをクラスを使って設定すると （1行2段→１行２列） <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .a{ width : 2px;} .b{ width : 588px;} .c{ border-width : 0px 0px 0px 0px; width : 640px; padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} --> </STYLE> </HEAD> <BODY> <TABLE class="c"> <TBODY> <TR> <TD class="a">1</TD> <TD class="b">2</TD> </TR> </TBODY> </TABLE> </BODY> 閲覧者に仕組みを見せたくないと言うことでしょうか。 もし、そうであっても 外部ファイルをダウンロードすることは可能です。 スタイルシートは画面上の見た目を整えると 私自身認識しています。 ですから、スタイルシートを使ってテーブルを構成することは 残念ながら不可能です。

grizzly
質問者

お礼

「クラス」の意味がわかりました。 cssでは、テーブルを構成できないこともよくわかりました。 1行2列のテーブルの設定方法もわかりました。 重ね重ねありがとうございました。 おかげざまで1段高見にたつことができました。

その他の回答 (1)

  • moccos
  • ベストアンサー率43% (61/140)
回答No.1

→ うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> 　　　とありますが・・・・・・ css　スタイルシートは表示方法を統一する為に使われるのが一般的ですし、 タグ一つ一つに属性を書き込む手間を省くのに効果的だとは思いますが、勘違い されてるように思います。 スタイル：背景色・位置・文字の色・枠線の表示/非表示・表の広さ（サイズ）ｅｔｃ ですから＜cssで、1行2段のtableを記述＞というのはできません。 上記のように記述出来ても肝心の表の中身（セルの内容は記入できませんが？） 例）<td>ああでもないこうでもない</td> 前回の回答者の方もかかれてましたＵＲＬはご覧になりましたでしょうか？ スタイルシートの部分は↓（かなり詳しく書いてあります） http://tohoho.wakusei.ne.jp/wwwcss1.htm#What ○同じタグに違うスタイルを指定したい場合は外部スタイルシートの場合 クラス名を指定します。 TD.2{width:2px;} TD.588{width:588px;} でＨＴＭＬのボディタグの中に <table> <tr> <td class="2"></td> <td class="588"></td> </tr> </table> と記述します。 （現実的に２ｐｘのセルは？ですが「grizzly」さんの例を参考にしました。） 横幅だけの指定ですから記述が楽になるどころかかえってめんどくさいですが 他の（プロパティ：値；）を複数指定したい場合は便利なわけです。 え～～と、当方のへぼな説明より件のＵＲＬをしっか見てください。 もし失礼な表現等がありましたらお許しください。

grizzly
質問者

お礼

cssは、色、空白、フォントなどの属性を規定するのですね。勘違いしていました。 Yahoo!のcssの項を見て、ようやくわかりました。 http://dir.yahoo.co.jp/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Cascading_Style_Sheets/ テーブルはひとつにまとめました。 ありがとうございました。

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

関連する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のtableについて【CSSが無かったのでHTMLで…。】

    <html> <head> <title>test</title> <style type="text/css"> <!-- table { border : 1px #000000 solid; text-align : center; } td,th { border : 1px #000000 solid; width : 100px; } --> </style> </head> <body> <table> <tr> <td rowspan="2"> 1 </td> <td> 3 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td colspan="2"> 3 </td> </tr> </table> </body> </html> このように入力をした場合、一番下にできるテーブル(3)2つ結合しているにもかかわらず、1つ分？の状態で文字がcenterになってしまいます。結合した(2つの)真ん中に表示させるにはどうしたらいいですか？？ 教えてください☆

    • ベストアンサー
    • HTML
  • cssで<div>にpaddingを指定したとき

    下のように、ｃｓｓで<div>にwidth720px、padding10px,background-color: #00FFFF;と指定して、 IE6とoperaで表示してみたところ、widthが740px、padding10pxになってしまいます。 divの下に７４０pxのテーブルをおいて確認してみました。 これは、こういうものと、思うしかないのでしょうか？ また、こうなるのは、私だけなのでしょうか？ <style type="text/css"> <!-- #contents { width: 720px; padding: 10px; background-color: #00FFFF; } --> </style> </head> <body> <div id="contents"> あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ </div> <table width="740" border="0"> <tr> <td bgcolor="#0000FF">あ</td> </tr> </table> </body>

    • ベストアンサー
    • HTML
  • テーブルをＣＳＳの外部ファイルで表示するには

    テーブルをＣＳＳの外部ファイルを利用して表示させたいのですが 外部ファイルへの記入が間違っているのかうまくいきません。 作りたいテーブルは htmlで書くと <table border="1" cellspacing="0" bordercolor="#ffffff"> <tr><th colspan="4" bgcolor="#000000"> 見出し </th> </tr> <td width="125px"> 　内容１ </td> <td width="125px"> 内容２ 　</td> <td width="125px"> 内容３ 　</td> <td width="125px"> 内容４ 　</td> </tr> </table> といった感じです。 内容１～４も中心に寄せたいです。 テーブル全体は指定できても、th,tdの指定の仕方がよくわかりません。 外部ファイルにはどう書けばいいでしょうか。 初歩的かもしれませんがよろしくお願いいたします。

    • ベストアンサー
    • 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
  • CSSを使ってテーブルでセル全体をリンクしたい

    CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 ４つのセル？を横並びにして（２段目は説明書き）、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素？を使うらしい？ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう？ 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもＣＳＳも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます ＜ｃｓｓの方＞ table#table-01 { width: 600px; border: 0px #E3E3E3 solid; border-collapse: separate; border-spacing: 20px 0; } table#table-01 th { width: 130px; height: 70px; padding: 5px; border: #E3E3E3 solid; border-width: 1px 0 0 1px; background: #F5F5F5; font-weight: bold; line-height: 120%; text-align: center; } table#table-01 td { vertical-align: top; padding: 1px 3px 20px 0; border: 0px #E3E3E3 solid; border-width: 0; text-align: center; } ＜ｈｔｍｌの方＞ <table id="table-01" cellspacing="20px"> <tr><th>●●●●</th><th>▲▲▲</th><th>■■■</th><th>○○○</th></tr> <tr><td>●の説明</td><td>▲の説明</td><td>■の説明</td><td>○の説明</td></tr> よろしくお願いします

    • ベストアンサー
    • 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がわかりません！

    <table> <tbody> <tr> <td>あ <td>い <td>う ・・・ って感じになってて、この「い」だけを300pxの幅にしたいです。 CSSに td.under_supplementation_table{ width: 300px important!; } と記述し、 <table> <tbody> <tr> <td>あ <td class="under_supplementation_table">い <td>う に直しても、うまくいきませんでした。 正しい修正方法を教えてください。

    • ベストアンサー
    • CSS
  • スタイルシートのテーブル枠について

    今までテーブルを利用してホームページに簡単な線を つけていました。これをスタイルシートで行うと 微妙にうまくできません・・・お助けください。 すべてＩＥで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが 線が１pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img　src="ims/sps.gif" width="600"　height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか？ 質問が、うまくまとまってなくてすみません・・・

    • ベストアンサー
    • HTML
  • table cellpadding「有」又は「無し」でCSSの解釈違う？

    IE6,７ tableのcellpaddingをcellpadding="0"と表記してスタイルシートでセルのpaddingを指定するのと、cellpadding="0"と表記せずにスタイルシートでセルのpaddingを指定するのとでは、ブラウザーのテールブルの解釈(表示)が違うのですが、スタイルシートでセルのpaddingを指定する場合、HTMLのcellpaddingをcellpadding="0"と表記するべきですか又は表記しないべきですか？ 以下の二つのコードの違いは、<table>タグにcellpadding="0"が「ある」か「ない」かだけですが、例２のコードのテーブルの方が例1のテーブルより全体的な幅が広く表示されます。 <例１：cellpadding="0"あり> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1" cellpadding="0"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html> <例2：cellpadding="0"無し> <html> <head> <style type="text/css"> .ta { margin-top:20px; margin-bottom:20px; table-layout:fixed; } .ta_ti { padding-top:5px; padding-bottom:5px; text-align:center; font-size:18px; font-weight:900; line-height:180%; } .ta_he { font-size:16px; padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; font-weight:900; } .ta_da { padding-top:5px; padding-bottom:5px; padding-left:10px; padding-right:10px; text-align:left; vertical-align:top; line-height:180%; } </style> </head> <body> <table class="ta" width="550" border="0" cellspacing="1"> <colgroup> <col width="200"> <col width="347"> </colgroup> <tr> <td class="ta_ti" colspan="2"> タイトル </td> </tr> <tr> <td class="ta_he"> 見出し </td> <td class="ta_da"> データ </td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する