• 締切済み

PHPとCSSを使用して九九表作成について

PHPとCSS(スタイルシート)を使用して、九九表を作成しているのですが、うまくいきません。 うまくいかない事象としましては、表がきれいにくっつかなく表と表の間に変な間隔ができてしまって困っております。 何かアドバイスを頂けたら助かりますのでよろしくお願い致します。 ※CSSは外部ファイルとして作成しました。 〈PHPファイル〉 <html> <head> <link href="test.css" rel="stylesheet" type="text/css"> <title>九九演算表</title> </head> <body> <table> <?php for($i = 0; $i <=9; $i++) { echo '<tr>'; if ($i == 0) { echo '<td><q>'."".'</q></td>'; } else { echo '<td><q>'.$i.'</q></td>'; } for($j = 1; $j <=9; $j++) { if ($i == 0) { echo '<td><q>'.$j.'</q></td>'; continue; } echo '<td><p>'. $i * $j.'</p></td>'; } echo '</tr>'; } ?> </table> </body> </html> <CSSファイル> <style> table{ border-collapse: collapse; border: 2px solid #000000; } q{ font-weight: bold; width:40px; height:30px; text-align: center; border: 1px solid #000000; padding: 2px 8px; border-collapse: collapse; background-color: #ccccff; } p{ width:40px; height:30px; text-align: center; border: 1px solid #000000; padding: 2px 8px; border-collapse: collapse; } </style> 以上です。

  • PHP
  • 回答数2
  • ありがとう数0

みんなの回答

  • koke29
  • ベストアンサー率58% (114/196)
回答No.2

補足です CSSの問題なので質問するならHTML板で聞いた方がいいですよ ※ もちろんココにもわかる人いますけど板違いかなーと 結局どうしたらって回答をしてなかったので補足でした。

  • koke29
  • ベストアンサー率58% (114/196)
回答No.1

これはPHPじゃなくてCSSの使い方ですよ とりあえず<th><td>で分けるで良いのでは?と思いました (マークアップを考えても<q>は変な気が…)

関連するQ&A

  • フルCSSプロフェッショナルテンプレの表作成

    ビルダー15に同梱のフルCSSプロフェッショナルテンプレートで、まったく別の色の表を作成したいのですが、フルCSSのせいで、背景色が反映されません。 1、まったく別の表のためのCSSはどのように書けばいいのでしょうか? 2、それをどのように記述すればよいでしょうか? 3、または、フルCSS”表のデザイン”で選んだ表は、文字が小さく嫌なので、文字を大きく表示する方法はあるのでしょうか?(文章ごとにフォントサイズの変更しなきゃだめ?) ↓↓こんな感じで書いてみたのですが・・・。 CSSコード .example table { width: 640px; border: 1px #ff6347 solid; border-collapse: collapse; } .example td { border: 1px dashed; background-color: #ff6347; padding: 0 6px; } .example th { border: 1px dashed; background-color: #9acd32; } HTMLコード <div class="example"> <table> <tr> <th>1-1</th> <th>1-2</th> <th>1-3</th> <th>1-4</th> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> <td>3-1</td> <td>3-2</td> <td>3-3</td> <td>3-4</td> </tr> </table> </div>

  • CSSでtext-align

    不思議な現象が起きてます。 2行7列の表を作って、 2行目の3~5列と7列目を右寄せにしたいがために、 <td class="right"> で外部CSSに .right{ text-align:right; } と記述したところ適用されませんでした。 しかしインラインで <td style="text-align:right;"> と書くと右寄せになるんです・・・ 原因がわからずこまっています。 ちなみに <td align="right"> でも表示されませんでした・・・ table全体には以下のCSSが外部で適用されてます、 div.gray_box { background-color: #FFFFFF; border-color: #CCCCCC; border-style: solid; border-width: 1px; padding: 1px 0 1px 0; } table.wide_table_border { border: 1px solid #FFFFFF; border-collapse:collapse; margin: 0px auto; padding: 5px; width: 100%; } あまり関係ないとは思うのですが一応載せておきます。 目的としては、必ず外部CSSに記述することです。

    • ベストアンサー
    • HTML
  • CSSを消して表に色を付けたい!!!

    参考サイトのソースをそのまま使って編集してたら、表を挿入して、色を付けようとしたら「CSSが設定されているため・・・」と出て表に色がつけられません。 <!-- BODY { MARGIN-TOP: 3px; COLOR: #000000; BACKGROUND-COLOR: #e6eee6; TEXT-ALIGN: center ;} TABLE { BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 0px; WIDTH: 900px; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px ;} TD { FONT-SIZE: 11pt; MARGIN: 0px; WIDTH: 140px; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #48D1CC; TEXT-ALIGN: center ;} DIV { BORDER-RIGHT: #999999 1px solid; BORDER-TOP: #999999 1px solid; BORDER-LEFT: #999999 1px solid; WIDTH: 900px; BORDER-BOTTOM: #999999 1px solid; BACKGROUND-COLOR: #ffffff ;} .menu { BORDER-RIGHT: #66cc99 0px solid; PADDING-RIGHT: 3px; BORDER-TOP: #66cc99 0px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; BORDER-LEFT: #66cc99 0px solid; WIDTH: 100%; COLOR: #ffffff; PADDING-TOP: 3px; BORDER-BOTTOM: #66cc99 0px solid; BACKGROUND-COLOR: #1E90FF; TEXT-DECORATION: none ;} .menu:hover { COLOR: #004411; BACKGROUND-COLOR: #FFF8DC ;} .close { BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 11pt; BORDER-LEFT: #ff0000 1px solid; COLOR: #dd0000; BORDER-BOTTOM: #ff0000 1px solid; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none ;} .close:hover { COLOR: #ffffff; BACKGROUND-COLOR: #ff0000 ;} --> 1.CSSを全て解除しなければいけないのですか? 2.メニューにカーソルをあてたら色が変わるようにしています。表に色をつけるようにするには、どこを削除すればいいのですか?

  • テーブル(表)の表示について

    ブラウザ(現在わかっているのはIE6、7)によって、表の表示が異なる事に悩んでます。 例えば、 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#B2DFEE;text-align:left;margin:15px 15px 15px 15px ; float: left;"><tbody><tr> <td style="border:1px solid #000000" colspan="5"><div align="center"><b>○○</b></div></td> </tr><tr> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr><tr> <td style="border:1px solid #000000">○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○○○</td> <td style="border:1px solid #000000">○○</td> </tr></tbody></table> のような記述だと、右側の罫線が表示されません。 私はFirefoxを使っていて安心していたのですが、友人に指摘されて困っています。 作成した環境はwin xp MCE 2002 sp3です。 ちなみにSafariではきちんと表示されていました。 どこを直せばいいのかどなたか教えてください。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • htmlできれいな画像のような表を作りたいです。

    htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか? ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>

  • TABLE(表)を横に並べたいのですが

    こういった表↓(実際はもっと縦が長いです)をhtmlで少し間隔をあけて横に並べて表示したいのですが、どのようにすればいいのでしょうか?可能なのでしょうか? 宜しくお願い致します。 <table cellpadding="5" style="border-collapse:collapse;font-size:12px;color:#000000;background:#ffffff;text-align:center"><tbody><tr> <td style="border:1px solid #ffcccc" colspan="3">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr><tr> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> <td style="border:1px solid #ffcccc">ここに文字</td> </tr></tbody></table>

    • ベストアンサー
    • HTML
  • 表の作成をスタイルシートで

    皆さんはHTMLで表を作成する際、どのように作成していますか? 私はTableタグとスタイルシートを使っているのですが、これをスタイルシートのみで 作成できないでしょうか。 例えば以下のような表で、■部分は他のセルと背景色を変えます。    ■□□    ■□□    ■□□ 通常私がやっている方法は、tableタグに下記スタイル「tb01」を、タイトル部分には 「td.title」を設定を設定しています。 -----------------HTML-------------------------- <table width="100%" border="0" cellspacing="1" cellpadding="0">  <tr>   <td class="title">6月7日</td>   <td>text</td> <td>text</td> <td>text</td>  </tr>  <tr>   <td class="title">6月8日</td>   <td>text</td> <td>text</td> <td>text</td>  </tr> </table> ---------------------------------------------------------- -----------------スタイルシート-------------------------- .tb01 {FONT-SIZE: 12px; border-collapse : collapse ;     border-width : 1px 0 0 1px ; border-style : solid ;     border-color : #CDCDCD ; ; width:350px; background-color:#FFFFFF;     } table.tb01 td {border-width : 0 1px 1px 0 ; border-style : solid ; padding : 7px ;         line-height:120%; border-color : #CDCDCD ; } td.title {background-color:#ECECEC;      } ---------------------------------------------------------- スタイルシートのみでは無理でも、もっと良い方法があれば 是非教えてください。

    • ベストアンサー
    • HTML
  • html、CSSを使用。うまくいきません。ソース見てください。

    <html> <head> <style type="text/css"> table { border-collapse:collapse; } .main { border-style:solid; border-color:#33ffff; border-width:0px 7px 0px 7px; } </style> </haed> <body> <table class="main" border=0> <tr><td width="400" bgcolor="red" colspan="2">ああ</td><td></td></tr> <tr><td width="200" bgcolor="green">いい</td> <td width="200" bgcolor="blue">うう</td></tr> </table> </body> </html> このようなソースを作成しました 2段のテーブルで1段目はセルを連結させてあるものです。 その後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について 初心者です。

    勉強中の身なんですが・・ このように設定した場合文章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