• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:CSSのテーブルについて教えて下さい。)

CSSのテーブルについて教えて下さい。

ORUKA1951の回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

いや、HTMLもスタイルシートもとってもまずい。  スタイルシートを利用する一番の目的は文書構造を記述するHTMとプレゼンテーションを指定するスタイルシートの役割分担ですよ。そのHTMLはプレゼンテーション目的で書かれているから意味不明ですし、スタイルシートを文書構造を利用できないから複雑なものになってしまう。  スタイルシートに誤りはないので、他の部分でより詳細度が高い設定があり、上書きされているのでしょう。(ひょっとしてリセットスタイルを書いているとか) ★class名に文書構造上意味のないものは書かない!! ★Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )  のDATA入力でチェック済みのHTML4.01strict+CSS2.1です。 ★スマホでも利用できるように幅は指定してありません。(ウィンドウ幅を縮めて確認) ★セレクタやカスケーディングと言う大事な部分が身についていないようです。  それを知らないとカスケーディングスタイルシートを使えません。  ⇒セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )  ⇒値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) ★タブは_に置換してあるので戻す。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> _<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> _<title>サンプル</title> _<meta name="author" content="ORUKA1951"> _<meta http-equiv="Content-Style-Type" content="text/css"> _<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > _<link rel="START" href="../index.html"> _<style type="text/css"> <!-- div.header h1{ margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; } table[summary="schedule"]{ width:80%; max-width:800px; margin:0 auto; border: solid 2px black; border-collapse: collapse; text-align:center;/* 継承されるプロパティ */ } table[summary="schedule"] th,table[summary="schedule"] td{ border: solid 1px black; } table[summary="schedule"] th{background-color:silver;} table[summary="schedule"] em{color:red;font-weight: bold;font-style:normal;} --> _</style> </head> <body> _<div class="header"> __<h1>外来診療のご案内</h1> _</div> _<div class="section"> __<table summary="schedule" border="1"><!-- summaryは必須です。 --> ___<caption>外来診療 予定表</caption> ___<tbody><!-- 必須です。 --> ____<tr> _____<td>診察科</td> _____<th abbr="Mon">月</th><!-- thにabbrは必須です。 --> _____<th abbr="Tue">火</th> _____<th abbr="Wed">水</th> _____<th abbr="Thu">木</th> _____<th abbr="Fri">金</th> _____<th abbr="Sat">土</th> _____<th abbr="Sun">日</th> ____</tr> ____<tr> _____<th abbr="generalPractice">一般歯科</th> _____<td rowspan="4"><em>休診</em></td> _____<td colspan="5">◯</td> _____<td rowspan="4"><em>休診</em></td> ____</tr> ____<tr> _____<th abbr="pedodontics">小児歯科</th> _____<td>◯</td> _____<td></td> _____<td>◯</td> _____<td></td> _____<td>◯</td> ____</tr> ____<tr> _____<th abbr="orthodontics">歯列矯正</th> _____<td></td> _____<td>◯</td> _____<td></td> _____<td>◯</td> _____<td></td> ____</tr> ____<tr> _____<th abbr="cosmeticDentistry">審美歯科</th> _____<td></td> _____<td>◯</td> _____<td></td> _____<td></td> _____<td>◯</td> ____</tr> __</table> _</div> _<div class="footer"> __<h2>文書情報</h2> __<dl class="documentHistry"> ___<dt id="FIRST-PUBLISHED">First Published</dt> ___<dd>2012-08-10</dd> __</dl> __<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> _</div> </body> </html>

関連するQ&A

  • css テーブルについて

    よろしくお願いします。 2だけを300pxと100pxに2分割にできないでしょうか。 <div class="aa"> <table> <tr> <th>1</th> <td>2</td> </tr> <tr> <th>1</th> <td>1</td> </tr> </table> </div> .aa table { width: 500px; height: 100px; border: 1px #000000 solid; border-collapse: collapse; } .aa th { width: 100px; border: 1px #000000 solid; } .aa td { width: 400px; border: 1px #000000 solid; }

    • ベストアンサー
    • CSS
  • CSSについて 初心者です。

    勉強中の身なんですが・・ このように設定した場合文章1と文章2が大きく開く状態になるんですが、なぜでしょうか? また文章1セルの真ん中に表示され文章2が左にひょうじされるのも分りません・・・・ いろいろ調べてみたんですが中々納得ができなくて・・・ 特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。 詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますm(。。)m 「HTML」 <table> <tr> <th>見出し</th> <th></th> <th>&nbsp;</th> <th>&nbsp;</th> </tr> <tr> <td>内容</td> <td>&nbsp;</td> <td>&nbsp;</td> <td></td> </tr> </table> 「CSS] table{ width:250px; border-collapse:collapse; border-width:1px; border-style:solid; border-color:#000000; border-spacing:0; } th{ border-width:1px; border-style:solid; border-color:#000000; } td{ border-width:1px; border-style:solid; }

    • ベストアンサー
    • HTML
  • tableの外枠をCSSで表示させない方法

    HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか? HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> <tr> <th scope="row">&nbsp;</th> <td>&nbsp;</td> <td></td> <td></td> </tr> </table> </body> </html>

    • ベストアンサー
    • 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"> 1 </Td></Tr></Table> </Td><Td width="350"> ===ここに文章を書いて下さい1=== </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"> 2 </Td></Tr></Table> </Td><Td width="350"> ===ここに文章を書いて下さい2=== </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"> 3 </Td></Tr></Table></div> </Td><Td width="350"> ===ここに文章を書いて下さい3=== </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか? 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。

    • ベストアンサー
    • HTML
  • ie8のcssでcol要素のwidthがきかない

    ie7でうまく表示しているソースで、先日ie8にアップグレードし表示を確認しましたら、セルの幅の設定がうまくいかず、すべてのセルの幅が同じ長さ(省略値?)になっていました。 いろいろと確認して行くと、どうもcol要素のcssのwidthが無視されているようでした。 cssはまだ勉強し始めたばかりで詳しくありません。cell11,cell12の中にwidthを指定すればwidthは有効のようです。 どなたか、どこを修正すれば直るか教えてください。ソースは以下の通りです。 ------------------------------------------- htmlのソース <table class="table2"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <col class="col41"> <col class="col42"> <col class="col51"> <col class="col52"> <tr> <th class="cell12" colspan="2" align="center" nowrap>3月</th> <th class="cell12" colspan="2" align="center" nowrap>4月</th> <th class="cell12" colspan="2" align="center" nowrap>5月</th> <th class="cell12" colspan="2" align="center" nowrap>6月</th> </tr> <tr> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> <th class="cell11" nowrap>点数</th> <th class="cell11" nowrap>金額</th> </tr> <tr> <td class="cell12" nowrap>100</td> <td class="cell12" nowrap>200,000</td> <td class="cell12" nowrap>50</td> <td class="cell12" nowrap>100,000</td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> <td class="cell12" nowrap></td> </tr> </table> ----------------------------------------- cssのソース .table2 { border : 0px solid black ; border-collapse: collapse ; margin: 0px; padding: 0px; } .col41 { /* 緑 各月 点数 */ text-align: right; width: 50px; background-color: #e0ffff ; } .col42 { /* 緑 各月 金額 */ text-align: right; width: 80px; background-color: #e0ffff ; } .col51 { /* 白 各月 点数 */ text-align: right; width: 50px; background-color: #ffffff ; } .col52 { /* 白 各月 金額 */ text-align: right; width: 80px; background-color: #ffffff ; } .cell11 { border-right : 1px solid silver ; border-bottom: 1px solid black ; } .cell12 { border-right : 1px solid silver ; border-bottom: 1px solid silver ; } よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSを使ってテーブルでセル全体をリンクしたい

    CSSを使ってテーブルでセル全体をリンクしたい CSSを使ってテーブルでセル全体をリンクしたい・・・と思っています。 4つのセル?を横並びにして(2段目は説明書き)、一つ一つ違うところに飛べるようにしたいのですけど、文字だけしかリンクできません。。。 block要素?を使うらしい?ということはわかったのですが、テーブル要素と組み合わせて使う場合どうしたらいいのでしょう? 色々やってみたのですが、セルが縦並べになってしまったりメインのcolorがなくなってしまったり、形が大幅に崩れたりしてしまいました。 ホームページ作りもCSSも初めてなので、なにをどうしたらよいか教えていただけると嬉しいです ソースをのっけておきます <cssの方> 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; } <htmlの方> <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
  • tableの枠について

    よろしくお願いします。前回もtableについて質問をさせていただきましたが、今回は若干内容が違うため新たに質問させていただきました よろしくお願いします。 まず、cssとhtmlに以下の記述をしました。 【css】 table{ border: 2px solid #000000; border-collapse: collapse; width: 750px; margin-left:auto; margin-right:auto; } th.g{ border: 1px solid #000000; text-align: center; padding:10px; font-size: 1.0em; font-weight:bold; width: 750px; color: #0066cc; } 【html】 <table> <tr><th class="g">パソコン</th>tr> 上記の部分をブラウザで見るとwidth: 750px;の設定はしているのですが「パソコン」の文字に出来た枠と、外枠との間に右側ですが隙間が出来てしまいます。margin: autoではと思い、設定をしてみましたが 特別何も変わりません。 どなた様か、ご指導の程よろしくお願いします。

    • ベストアンサー
    • HTML
  • テーブルを挿入すると他のCSSと干渉してレイアウトが崩れてしまいます。

    いくらやっても作成したテーブルを挿入するととの画像やメニューと干渉してレイアウトが崩れてしまいます。テーブルを取るとレイアウトが戻ります。。。 文字量の関係でテーブルだけ記入しました。 <HTML> <HEAD> <STYLE type="text/css"> <!-- /*テーブル*/ table {position:absolute; left:200px; top:450px; font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:center; border-collapse:collapse } caption { font-family:MS,UI,Gothic,標準; FONT-SIZE: 11px; COLOR: #666666; font-weight: lighter; text-align:left; } table,th,td {border:1px solid} div {margin:20px} --> </style> </head> <body> <div> <table> <caption>ジャズシューズサイズ表</caption> <tr><th width=70px>Sansha</th><td width=30px>2</td><td width=30px>3</td><td width=30px>4</td><td width=30px>5</td><td width=30px>6</td> <td width=30px>7</td><td width=30px>8</td><td width=30px>9</td><td width=30px>10</td><td width=30px>11</td> <td width=30px>12</td><td width=30px>13</td><td width=30px>14</td><td width=30px>15</td> </tr> <tr><th>(cm)</th><td>21</td><td>21.5</td><td>22</td><td>22.5</td><td>23</td><td>23.5</td><td>24</td> <td>24.5</td><td>25</td><td>25.5</td><td>26</td><td>26.5</td><td>27</td><td>27.5</td> </tr> </table> </div> </body>

    • ベストアンサー
    • CSS
  • 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
  • 【CSS】floatで左右に並べた<div>のマージンが効かない。

    CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A">   <div class="B">    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div>   <div class="C" >    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div> </div> 【CSS】--------------------------------- #A {     margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }

    • ベストアンサー
    • HTML