- ベストアンサー
XHTMLの<table>について教えてください。
- XHTMLの<table>に関する質問とサンプルソースについて説明します。
- XHTMLの<table>でのcaptionや<th>の使い方についてご質問があります。
- サンプルソースのテーブルに関して、使用方法や心理効果について解説します。
- みんなの回答 (2)
- 専門家の回答
関連するQ&A
- [table] colspanについて
画像添付にあるようなセル区切りのtableをhtmlで作成したいと考えています。 4列目にセルが4つあるので、3列目のcolspanの指定をどのように記述すればいいのか 不明で困っています。 ---------------------------------------------------- <table> <tr> <th></th> <th colspan="3"></th> </tr> <tr> <td></td> <td colspan="3"></td> </tr> ▼▼▼▼▼この列のrowspanの指定がわからない▼▼▼▼▼ <tr> <td></td> <td></td> <td></td> </tr> ▲▲▲▲▲この列のrowspanの指定がわからない▲▲▲▲▲ <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="3"></td> </tr> </table> ---------------------------------------------------- どなたか解決案をご存知の方、お教えいただけないでしょうか? colspanにこだわっているわけではないので、cssで解決できるのであればcssでも大丈夫です。 よろしくお願い致します。
- ベストアンサー
- HTML
- display:table-cellについて
下記のhtmlを、 <h4>あああ</h4><p>あああ</p> <h4>いいい</h4><p>いいい</p> <h4>ううう</h4><p>ううう</p> 下記のようなテーブルのときと同じ見た目にしたいです。 <table> <tr> <th>あああ</th><th>いいい</th><th>ううう</th> </tr> <tr> <td>あああ</td><td>いいい</td><td>ううう</td> </tr> </table> つまり、h4同士、p同士の高さが、 それぞれ一番高いセルに追従するということです。 ※文法を遵守したまま見た目だけテーブル組みが狙いですので、 テキストの順番を入れ替えるのはNGです。 display:table-cellがIE8から実装されますので、 tableの代用品として使えると思ったのですが、 もし、このケースがdisplay:table-cellではできないとなると、 とんだ紛い物となってしまいます。 現在、自分でも調べているところですが、 ご存知の方がいらっしゃいましたら、 ご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- <table>~</table>内のテキストのサイズ
以下のようなソースで,TEXTの部分のサイズを変更したいと思い,<table>~</table>を含む範囲をを<div class="test">~</div>で挟んで,スタイルシートで指定してみました. そしたら,<div class="test">~</div>の中でも<table>~</table>の外にあるテキストはサイズが変わるのですが,下のソースのTEXT部分は変わりませんでした. 表中のテキストのサイズを一括して指定する方法はあるのでしょうか? <table align="center"> <tr bgcolor="#aaffaa"> <td>TEXT</td><td>TEXT</td><td>TEXT</td> </tr> <tr bgcolor="#aaaaff"> <td>TEXT</td><td>TEXT</td><td>TEXT</td> </tr> </table>
- ベストアンサー
- HTML
- XHTMLに関する質問 順序が逆になってしまうのはどうしてでしょうか?
現在、XHTMLでHPを作っているのですが、 <title>My profile </title> </head> <body><center> <p><h1><strong>My Profile</strong></h1></p> <p><img src="pictures/me.jpg"></p> <p>↑is my pfhoto(whem I was 19 years old in Fuji-Mountain)</p> <table border="1"> <tr> <th>name</th> <td>**** ********</td> </tr> <tr> <th>age</th> <td>23</td> </tr> <tr> <th>hobby</th> <td>playing guitar</td> </tr> <tr> <th>Hometown</th> <td>Chiba</td> </tr> <ul> <li>Favorite Guitarist Ranking</li> <ol> <li>Doug Aldrich</li> <li>Zakk Wylde</li> <li>Kiko Loureiro</li> </ol> <li>Favorite Band Ranking</li> <ol> <li>Ozzy Osuborne</li> <li>Whitesnake</li> <li>BON JOVI</li> </ol> </ul> </center> </body> </html> と、ソースを書いたのですが、 写真 簡単な自己紹介(表) 好きなギタリストとバンドのランキング と、ソースで書いた順番ではなく、 写真 ギタリストのランキング 簡単な自己紹介(表) の順に表示されてしまいます。 様々な本やWEBを参照したのですが、よくわかりませんでした。 どなたか、この解決法を教えていただければ・・よろしくお願いいたします。 また、表示を全てセンターに寄せたいのですが、 <center>を使うのは、XHTML的によいのでしょうか?? XHTMLの本にはそういう書き方はされておらず、 どうすれば全体が真ん中によるのかも教えていただけると幸いです。 長くなりましたがよろしくお願いいたします。
- ベストアンサー
- HTML
- <table>タグ、セルの隙間
初めてなので上手く伝えられなかったらすみません。 テーブルのセルの隙間を調整したいんですが上手くできません。 <table cellspacing="0"> <tr> <th></th><td></td> </tr> ・ ・ ・ <tr> <th></th><td></td> </tr> </table> という形です。thとtdにはテキストが入っています。 縦の幅をそろえたいんですがcellspacing="0"をしても一行の高さより間隔が広いのをなんとかしたいんです。thの中に改行があるのでそれと合わせたいんです。 これはline-heightとかで何とかなりますか?一応文字サイズ変えたり見ても均一な行間になるようにしたいので高さ指定だとあまり良くないと思ってます。 CSSもいくらか分かるので、HTMLかCSSで上手い対策をごぞんじの方教えてください。
- ベストアンサー
- HTML
- table構文について
<CENTER> <TABLE border="1"> <TR> <TD>あ</TD> <TD>い</TD></TR> <TR> <TD>う</TD> <TD>え</TD></TR> <TR> <TD>お</TD> <TD>か</TD></TR> <TR> <TD>き</TD> <TD>く</TD></TR> <TR> <TD>け</TD> <TD>こ</TD></TR> <TR> <TD>た</TD> <TD>ち</TD></TR> <TR> <TD>つ</TD> <TD>て</TD></TR> </CENTER> </TABLE> この表のセルの背景色をセルごとに変えたいんですが、どうすればいいんですか? つまり 「あ」のセルの背景は赤色 「い」のセルの背景は黄色みたいにしたいんです・・・。
- 締切済み
- ホームページ作成ソフト
- html table の中のボーダーが二重になる
初歩的な質問ですが、テーブルタグに、線をつける際に、枠だけついたり、下記のように記述しても、 真ん中のtr もしくは th や td の上下か左右がかぶってしまい、局所的に2本になってしまいます。(他に比べて太くなります。) .book_form tbody tr .mailform, .book_form tbody tr .mailtext { border: 1px solid #666; } すべてのラインを1本にして、きれいに見せるにはどのようにしたいいでしょうか。 ちなみに、<table class="book_form" border="1" bordercolor="#666"cellspacing="0" cellpadding="3"> こちらでもうまく表示されません。 CSSでの記述があるものだと助かります。 構成は、 <table> <tbody> <tr></tr> <th></th> <td></td> </tbody> </table> です。
- ベストアンサー
- HTML
- データの受け渡し(表内に収めたいのですが)
phpで表から表へデータを飛ばし表示させようとしています。 例 ___________________ |_A___|__B___|___C__| |_____|______|_______| ↓ ___________________ |_A___|__B___|___C__| |_____|______|_______| 例えば、下記のようなソースsample.php→sample4.php を作りました。 データは飛ばすことが出来ますが、表内に収める場合 どのようにすればよいですか? ちなみに、YPHPSampleは、ソースがおいてあるディレクトリです。 (1)sample.php <html> <head> <title>サンプル</title> <head> <body> <table border="2"> <tr bgcolor="#AAAAAA"> <td><th>都市名</th></td> <td><th>最高気温</th></td> <td><th>最低気温</th></td> </tr> <tr bgcolor="#AAAAAA"> <td><th> <form action="http://localhost/YPHPSample/sample4.php" method="post"> <input type="text" name="aut"/> </th></td> <td><th> <form action="http://localhost/YPHPSample/sample4.php" method="post"> <input type="text" name="soft"/> </th></td> <td><th> <form action="http://localhost/YPHPSample/sample4.php" method="post"> <input type="text" name="hard"/> </th></td> </tr> </table> <input type="submit" value="送信"/> </form> </body> </html> (2)sample4.php <html> <head> <title>サンプル</title> </head> <body> <table border="2"> <tr bgcolor="#AAAAAA"> <td><th>都市名</th></td> <td><th>最高気温</th></td> <td><th>最低気温</th></td> </tr> </table> <?php if($_POST["aut"]) print"{$_POST["aut"]}<br/>\n"; if($_POST["soft"]) print"{$_POST["soft"]}<br/>\n"; if($_POST["hard"]) print"{$_POST["hard"]}<br/>\n"; ?> </body> </html>
- 締切済み
- PHP
- tableタグの中にtableタグ
tableタグの中にtableタグ 課題をやっています。 ホームページを作っていて、画像のようなページを今作っています。 僕が書いたタグはこうです。(途中ですが、何か違うんだと思います。) <html> <head><title>FOMデンタルクリニック</title></head> <body bgcolor="#99ccff" background="images/back.jpg" link="#cc0000" vlink="#663333" alink="#cc9999"> <table width="600" height="400" align="center" bgcolor="#ffffff" valign="top"> <tr><td><font size="2">完全予約制となっておりますので、あらかじめご予約ください。</font></td></tr><br> <tr><td><hr></td></tr> <tr><td><b><font size="4" color="#000099" align="left">診療科目</font></b></td></tr><br> <br> <tr><th align="left"> <ol> <li>一般歯科</li> <li>矯正歯科</li> <li>審美歯科</li> </th></tr><br> <br> <br> <tr><td><b><font size="4" color="#000099" align="left">診療時間</font></b></td></tr><br> <table width="500" height="90" align="center" border="1"><tr bgcolor="#ffcccc" align="center"> <th>時間</th> <th>月</th> <th>火</th> <th>水</th> <th>木</th> <th>金</th> <th>土</th> <th>日</th> </tr> <tr> <th>午前(9時~12時)</th> <th>○</th> <th>○</th> <th>○</th> <th>○</th> <th>○</th> <th>○</th> <th>×</th> </tr> <tr> <th>午後(15時~18時)</th> <th>○</th> <th>○</th> <th>×</th> <th>○</th> <th>○</th> <th>×</th> <th>×</th> </table> <tr><td><b><font size="4" color="#000099" align="left">ご予約方法</font></b></td></tr><br> <br> <tr> <th align="left"> <ul> <li>予約専用フリーダイヤル(0120-333-XXX)にお電話ください。</li> <li>予約専用メールアドレス(yoyaku@fom)にお名前と希望日時をご記入の上、お申し込みください。</li> </th> </tr> </table> <a href="index.htm"><img src="images/button.gif" border="0"></a> </body> </html> 何が違うんでしょうか? tableの中にtableを使ってるからでしょうか^^; ググってもよく分からないので教えてください。 よろしくお願いします。
- 締切済み
- HTML
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
お礼
返信おそくなりましてすみません、16時提出でバタバタとしていたもので、 翌日のお礼となりましたm(_ _)m ご丁寧にありがとうございます、大変参考になりました。 ご指摘どおりのソースへと変更し、同時にテーブルへの理解がよりいっそう深まりました^^ 感謝です! ありがとうございます。