- ベストアンサー
table要素のtrやtdって・・・
STICKY2006の回答
- STICKY2006
- ベストアンサー率29% (1536/5269)
>>tr Table Row >>td Table Data http://www.tohoho-web.com/html/index.htm まぁ、「略」を考え込むよりは、HTML打ってた方が、プログラミングのお勉強にはなると思うんだ。
関連するQ&A
- table要素のwidthの解釈
tableタグを使って次のようなことをしたいと考えています。 ・table要素の親はdiv要素 ・div要素にはサイズ(width/height)が指定されており、overflow:hiddenとしてある。 ・table要素にはサイズを指定しない ・td要素にはサイズを指定する →つまり、tableのサイズはtdのサイズで決定する HTML/CSSは次の通りです。 ----------------------------------------------------- div { width: 300px; overflow: hidden; } table { table-layout: fixed; } td { width: 170px; } <div> <table><tr> <td>a</td><td>b</td><td>c</td> </tr></table> </div> ----------------------------------------------------- このコードを「DOCTYPE宣言を書かずに」IE8で開くと、想定通りの表示になりますが、 <!DOCTYPE html>と記述すると、tableの横幅が300pxに詰められてしまいます。 td要素のwidth指定が働かず、親のdiv要素のwidthに無理やり押し込められてしまうようです。 また、FirefoxではDOCTYPE宣言無しでも同様の問題が起きてしまいます。 table内の列数は固定ではないので、tableに対してwidth指定はしたくありません。 何か書き方が間違っているのでしょうか。 あるいは、標準準拠モードの仕様では、そもそもできないことをやろうとしているのでしょうか。
- 締切済み
- HTML
- CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？
CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか？ 例えば、HTMLで一行に3列になるよう以下の様に記述した時に <table> <tr> <td> <p>テキスト左</p> </td> <td> <p>テキスト中</p> </td> <td> <p>テキスト右</p> </td> </tr> </table> CSSでのそうさのみによって 見栄え的に縦3行、横1列に見えるようにできますでしょうか？ 幅などをピクセル制限したりするのでも構いません。 もしHTMLで実現するとするならば <table> <tr> <td> <p>テキスト左</p> </td> </tr> <tr> <td> <p>テキスト中</p> </td> </tr> <tr> <td> <p>テキスト右</p> </td> </tr> </table> 上記のような記述になると思いますが、あくまで最初のHTMLをCSSで変更して、HTML本体は書きかえない方法です。 もし、何らかの形で実現できそうな場合がありましたらアイディアをください。 お忙しいところお手数おかけしますが、よろしくお願いいたします。 ※CSS記述の変更のみ。 ※特定のブラウザに依存させたくない。 ※Javasprictは使用しない。
- 締切済み
- HTML
- Table内TDの子要素を移動させたいのですが・・
初心者的な質問になるかもしれませんが、宜しくお願いします。 唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。 <DIV>.....</DIV> ← (*) <Table> <TR> <TD> ← (1) <SCRIPT ........</SCRIPT> <A HREF="">........</A> <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (2) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> <TD> ← (3) <LI> <DIV class ..... </DIV> <DIV class ..... </DIV> <DIV class ..... </DIV> <LI> </TD> </TABLE> (1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。 この(1)～(3)のTDの子要素部分だけを抽出し、(*)の DIVタグの真下に移動させるようなjquery文を作りたいのですが、 http://d.hatena.ne.jp/replication/20120113/1326382090 等の記事を参考に、 var cells, tblcell; // テーブルタグを探して、１番目のテーブルを取得する var rows = $("table")[0].rows; // 列を１つずつ取り出す $.each(rows, function(i) { cells = rows[i].cells; // 行を１つずつ取り出す $.each(cells, function() { // tdタグの値を書き換える tblcell = $(this).detach(); console.log(tblcell); // tdタグのスタイルシートを書き換える $('div').after(tblcell); }); }); このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。 そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、 中々うまいやり方がみつかりません・・・ なにか、よい方法はございませんでしょうか？
- ベストアンサー
- JavaScript
- divでtable表現
<table> <tr> <td>左の要素</td> </td>右の要素１<br>右の要素２</td> </tr> 左の要素は、真ん中（高さ）にあります。 このtableをdivで表現するためには、どうすれば良いですか？ 以下、自分が考えたものです。（左の要素の下に右の要素が割り込んでしまいます） <div style="float:left; margin:50%"> 左の要素 </div> <div> 右の要素１<br>右の要素２ </div>
- ベストアンサー
- HTML
- なぜ『table td』など親まで書く必要があるの
例えば、tdに色を付けたい場合 table td { background-color: #ffffff; } というようにすると思いますが、 なぜ td { background-color: #ffffff; } ではダメなんでしょうか？ 今はあるサイトを見ながらＣＳＳを勉強しているところなんですが、そちらの説明によると親が決まりきってる場合はこのように書くことになってるとのことでした。 なぜ親まで書くことになってるかは、そのサイトでも分からず、慣例的なものではないかということでした。 まあ、そうやることになってるなら黙って従っていれば良いんですが、親要素を省いて書くと何か不具合でも起こるのか？ただ後で読み返しやすくするために、そう書くことになってるだけなのか？など気になって仕方がありません。 親まで書くようになった経緯や理由などはあるんでしょうか？ 閉じタグのように、省略も可だけと書いた方が分かりやすいよって話でしょうか？
- ベストアンサー
- CSS
- table、tr、tdタグの描画について
table、tr、tdタグがどのような解釈を経てブラウザ（ユーザエージェント？）によって描画されているのか？ をご教授いただきたく質問します。 （table、tr、tdタグの使用方法に関する質問ではありません） 例として、添付画像にサンプルを用意しました。 1セルの幅を決定出来るのは3セルの要素を解釈した後となると思うのですが、 そうなると、1セル→2セル→3セル→4セル という順番で要素と枠線が描画されるのではなく、 全ての要素を一度チェックした後に、各セルの座標を決定し、 要素と枠線を描画しているのではないか？と考えました。 しかし、同じものを2回チェックするのってスマートでないなあ・・・ 実際にはどのように解釈されているのだろう・・・ という思いで質問した次第です。 よろしくお願いします。
- ベストアンサー
- HTML
- ■ <table><tr><td>～～ を表示することはできますか？
テーブルタグ <table> <tr> <td> をそのまま文字として表示することはできますでしょうか？ <を全角の＜にすればいいのでしょうが、なにぶん、テーブルタグの量が膨大なため、手でいちいち直してたら数ヶ月、数年かかってしまいます。 タグをそのまま画面に表示させる良い方法はないでしょうか？ 詳しい方いらっしゃいましたら教えていただけないでしょうか？ よろしくお願いします！
- ベストアンサー
- HTML
- <tr>タグ、<td>タグ
テーブルでレイアウトを行い、htmlで背景色・cssで文字のスタイルを適用する場合、<tr>タグと<td>タグのどちらに記述するのがよいのでしょうか。IEだと大差は無いようなのですが、firefoxやNetscapeで違いが出てくるように感じます（特にfirefox）。 (1)cssで文字スタイルの場合、<table>タグに<table class="text">といった感じで問題ないでしょうか（table内の文字すべてclassがtextの場合）。それともやはり<td>タグひとつひとつにクラス指定した方が良いのでしょうか。 (2)テーブルに背景色を指定する場合、<tr>タグ・<td>タグのどちらに指定するのが良いのでしょうか。
- ベストアンサー
- HTML
- css(div)の中にtableタグを使うとなぜかcellpaddingがきかない
cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか？また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }
- 締切済み
- HTML
- mac＆winのsafari4.03にてtableタグのmarginの挙動がおかしい件
htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------
- ベストアンサー
- HTML
お礼
ありがとうございます。こんな意味だったんですね。 一応ＨＴＭＬは一通り分かるのでその上での質問でした。