- 締切済み
このような使い方はありでしょうか？
[table]を左に寄せたいのですが下記のような使い方でいいでしょうか？ まだ勉強を始めたばかりで、よろしくお願いします。 <div align="right"> <table> <tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr> </table> </div>
- pandapandaa
- お礼率33% (1/3)
- HTML
- 回答数1
- ありがとう数12
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いいえ。 tableは、データを２次元で並べるための仕組みで、内容量によって伸縮しなければなりません。また表示サイズ内に収まるように内容が大きい場合は折り返さなければなりません。 ⇒視覚系ユーザエージェントによる表の整形( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.3 ) ★絶対にデザインのために使用してはなりません。 ⇒ページレイアウトの目的で表を用いる。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) ⇒単に文書内容を整形する目的だけで表を用いるべきでない。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 ) [サンプル] ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html# ) W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済みのHTML4.01strict+CSS2.1 ウェブ標準です。 ★タブは＿に置換してあるので戻す。 <!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"> <!-- html,body{margin:0;padding:0;} h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;} p{text-indent:1em;} div.header,div.section,div.footer{width:90%;min-width:630px;max-width:900px;margin:0 auto;padding:5px;} table[summary="periodic table"]{ float:left;/* 左にfloat */ border:none;/* 枠線なし */ border-collapse:separate;/* セル間は空ける */ border-spacing:3px;/* セル間は3px */ empty-cells:hide;/* 中身がないセルは非表示 */ position:relative;/* 以下の位置サイズ基準 */ margin:5px 10px;/* 周囲とのマージン */ background-color:white;/* 背景色 */ } table[summary="periodic table"] td{ padding:10px;/* セル内の余白 */ text-align:center;/* 文字の配置 */ } table[summary="periodic table"] caption{ position:absolute;top:0;left:40%;/* キャプションの表示位置 */ } table[summary="periodic table"] td{ border:solid 2px gray;/* セル枠の色とサイズ */ } table[summary="periodic table"] td+td{border-color:silver;} table[summary="periodic table"] td+td+td{border-color:aqua;} table[summary="periodic table"] td+td+td+td{border-color:lime;} table[summary="periodic table"] td+td+td+td+td{border-color:yellow;} table[summary="periodic table"] td+td+td+td+td+td{border-color:orange;} table[summary="periodic table"] td+td+td+td+td+td+td{border-color:red;} table[summary="periodic table"] td+td+td+td+td+td+td+td{border-color:green;} div.section:after{ content:"";display:block;clear:left;/* float解除 */ } bodY{background-color:gray;} div.header,div.section,div.footer{background-color:silver;} /* aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white、yellow */ --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>本文はsection</p> ＿＿<table summary="periodic table" border="1"> ＿＿＿<caption>周期表</caption> ＿＿＿<tbody> ＿＿＿＿<tr> ＿＿＿＿＿<td>H</td><td></td><td></td><td></td><td></td><td></td><td></td><td>He</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>Li</td><td>Be</td><td>B</td><td>C</td><td>N</td><td>O</td><td>F</td><td>Ne</td> ＿＿＿＿</tr> ＿＿＿＿<tr> ＿＿＿＿＿<td>Na</td><td>Mg</td><td>Al</td><td>Si</td><td>P</td><td>S</td><td>Cl</td><td>Kr</td> ＿＿＿＿</tr> ＿＿＿</tbody> ＿＿</table> ＿＿<p> ＿＿＿周期表は、元素を、それぞれが持つ物理的または化学的性質が似たもの同士が並ぶように決められた規則（周期律）に従って配列した表である。左上から原子番号の順に並ぶよう作成されている。</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2013-03-03</dd> ＿＿</dl> ＿</div> </body> </html>
関連するQ&A
- <TR>要素を横に並べたい。
あるプログラムの中でどうしてもtr要素を横に並べたいのですが、CSSなどで指定することによって可能でしょうか？ <tabel> <tr><td>a</td><td>1</td><td>e</td></tr> <tr><td>b</td><td>2</td><td>f</td></tr> <tr><td>c</td><td>3</td><td>g</td></tr> <tr><td>d</td><td>4</td><td>h</td></tr> </table> のような場合通常は、 a 1 e b 2 f c 3 g d 4 h のように並びますが、 a 1 e b 2 f c 3 g d 4 h このような感じで横に並べ、画面の幅に合わせて a 1 e b 2 f c 3 g d 4 h のように折り返されるようにしたいのですが、可能でしょうか？
- ベストアンサー
- HTML
- メールフォームについて
この中にどのようなHTMLを書けば自分のPCにメールが届く ようになりますか？よろしくお願いします。 <h2>■MAIL FORM</h2> <div class="text"> <form><table><tr><td width="100" align=right> NAME</td><td align=right><input type="text" name="Name" size="34"></td></tr><tr><td width="100" align=right> MAIL</td><td align=right><input type="text" name="Mail" size="34"></td></tr></table> <TEXTAREA NAME="Comments" ROWS="8" COLS="39" value="comments"></TEXTAREA> <br> <table><tr><td width="100" align=right> </td> </tr><tr> <td width="100" align=right> URL</td><td><input type="text" name="URL" value="http://" size="34"></td></tr><tr><td></td><td align="right"> <INPUT TYPE="reset" VALUE=" Reset "> <INPUT TYPE="submit" VALUE=" Send "></FORM> </td></tr></table><br></div>
- ベストアンサー
- HTML
- HTMLでタイムスケジュールを作成しています。
HTMLでタイムスケジュールを作成しています。 ブラウザはIE7です。 左側の「No.」～「氏名」は固定です。 タイムスケジュールの部分に横スクロールを表示させ、ブラウザの横スクロールは使用しません。 1分単位で表示させたいのですが、どうしてもレイアウトが崩れてしまいます。 (添付の図ぐらいの間隔にしたいです。1分を1～3pxぐらいでしょうか。) 下記のHTMLは作成中のものですが、文字数制限のため一部を省略しています。 <table width="100%"> <td> <table width="310" align="left" border="1" cellspacing="0"> <tr> <td rowspan="2" width="10"><div align="center">No.</div></td> <td width="100"><div align="center">所属</div></td> <td width="100"><div align="center">部門</div></td> <td width="100"><div align="center">勤務区分</div></td> </tr> <tr> <td width="100"><div align="center">区分詳細</div></td> <td width="100"><div align="center">階級</div></td> <td width="100"><div align="center">氏名</div></td> </tr> <tr align="middle"> <td rowspan="2" height="50">1</td> <td>所</td> <td>部</td> <td>区</td> </tr> <tr align="middle"> <td>詳</td> <td>階</td> <td>太郎</td> </tr> </table> <div style="overflow-x:scroll; overflow-y:visible;"> <table height="100%" border="1" cellspacing="0"> <tr> <td colspan="60" align="center">08</td> <td colspan="60" align="center">09</td> <td colspan="60" align="center">10</td> </tr> <tr> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> <td colspan="15" align="right">15</td> <td colspan="15" align="right">30</td> <td colspan="15" align="right">45</td> <td colspan="15" align="right">60</td> </tr> <tr align="center"> <td colspan="100" bgcolor="lightpink" height="50">未</td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td bgcolor="lightblue"></td> <td bgcolor="gold"></td> <td colspan="70" bgcolor="lightgreen">仕</td> </tr> </table> </div> </td> </table>
- ベストアンサー
- HTML
- Mac IEのバグなのでしょうか？
TMEspionです。 <table border="0" cellpadding="5" cellspacing="5"><tr><td width="100" align="left" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="center" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="right" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td></tr><tr><td align="left" bgcolor="#999999">左</td><td align="center" bgcolor="#999999">中</td><td align="right" bgcolor="#999999">右</td></tr></table> --------------------------------- 上記のソースの様に、テーブルを縦2段、横2列にセルを作り、上段はテーブルタグ、下段はテキストでそれぞれalign属性をleft、center,rightと設定しています。 ところがInternet Explorer 5.2 for Macで見ると、 上段右のテーブルタグは「align="right"」の効果が出ていません。 この質問を呼んでいる回答者様には、ブラウザでどう表示されるんでしょうか？ どう表示されたかという結果とブラウザ名を教えて下さい。
- ベストアンサー
- HTML
- <table>を複数使用するレイアウトでの質問です。
<table>を複数使用するレイアウトでの質問です。 <table width=30% align=left><tr><td>A</td></tr></table> <table width=70%><tr> <td width=20%>B-1</td> <td width=80%> <table width=100%><tr> <td width=25%>C-1</td> <td width=15%>C-2</td> <td width=15%>C-3</td> <td width=15%>C-4</td> <td width=15%>C-5</td> <td width=15%>C-6</td> </tr></table> </td> </tr></table> <table width=30% align=left><tr><td>D</td></tr></table> <table width=70%><tr> <td width=★%>E-1</td> <td width=☆%> <table width=100%><tr> <td width=20%>F-1</td> <td width=20%>F-2</td> <td width=20%>F-3</td> <td width=20%>F-4</td> <td width=20%>F-5</td> </tr></table> </td> </tr></table> ・”★%”は、（”B-1”＋”C-1”）と同じ幅 ・”☆%”は、（100%-”★”）の値 ・F-1～5は20%としたのですが（=100%）、C-2～6と同じ幅になるかどうか どのようにすれば求められるかご指導お願い致します。
- ベストアンサー
- HTML
- htmlで、特殊な表をつくりたい
お世話になります。 添付の様な表をhtmlで作成したいのですが、 どのようにすれば作成出来るでしょうか？ ※赤色の枠線を本当は、「枠線なし」の状態にしたいのです。 ※一番左の列は、2行目から2つ一組で統合 それ以外の列は、実際には統合しておらず、 2行目から2つ一組であるかのように枠線を表示 可能でしたら、CSSではなく、単純なtableタグで 実現したいと思っております。 何卒宜しくお願い致します。 ------がんばった所までのソース-------- <table width="100%"> <tr> <td bgcolor="#000000"> </td> <td align="center">1</td> <td align="center">2</td> <td align="center">3</td> <td align="center">4</td> <td align="center">5</td> <td align="center">6</td> </tr> <tr> <td rowspan="2" align="center">1</td> <td align="center">a</td> <td align="center">b</td> <td align="center">c</td> <td align="center">d</td> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">A</td> <td align="center">B</td> <td align="center">C</td> <td align="center">D</td> <td align="center">E</td> <td align="center">F</td> </tr> <tr> <td rowspan="2" align="center">2</td> <td align="center">g</td> <td align="center">h</td> <td align="center">i</td> <td align="center">j</td> <td align="center">k</td> <td align="center">l</td> </tr> <tr> <td align="center">G</td> <td align="center">H</td> <td align="center">I</td> <td align="center">J</td> <td align="center">K</td> <td align="center">L</td> </tr> <tr> <td rowspan="2" align="center">3</td> <td align="center">a</td> <td align="center">b</td> <td align="center">c</td> <td align="center">d</td> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">A</td> <td align="center">B</td> <td align="center">C</td> <td align="center">D</td> <td align="center">E</td> <td align="center">F</td> </tr> <tr> <td rowspan="2" align="center">4</td> <td align="center">g</td> <td align="center">h</td> <td align="center">i</td> <td align="center">j</td> <td align="center">k</td> <td align="center">l</td> </tr> <tr> <td align="center">G</td> <td align="center">H</td> <td align="center">I</td> <td align="center">J</td> <td align="center">K</td> <td align="center">L</td> </tr> <tr> <td rowspan="2" align="center">5</td> <td align="center">a</td> <td align="center">b</td> <td align="center">c</td> <td align="center">d</td> <td align="center">e</td> <td align="center">f</td> </tr> <tr> <td align="center">A</td> <td align="center">B</td> <td align="center">C</td> <td align="center">D</td> <td align="center">E</td> <td align="center">F</td> </tr> <tr> <td rowspan="2" align="center">6</td> <td align="center">g</td> <td align="center">h</td> <td align="center">i</td> <td align="center">j</td> <td align="center">k</td> <td align="center">l</td> </tr> <tr> <td align="center">G</td> <td align="center">H</td> <td align="center">I</td> <td align="center">J</td> <td align="center">K</td> <td align="center">L</td> </tr> </table>
- ベストアンサー
- HTML
- フレームの分割について
このようなレイアウトでフレーム分割したいのですが、どのようなソースにしたら良いのでしょうか？また、様々な環境できちんと表示されるでしょうか？ A・C・E・Fには画像を挿入。DはメインのHTMLを表示。BはメニューのHTMLを表示。 <TABLE COL="4" ROW="3" WIDTH="770" BORDER="1" CELLSPACING="0" CELLPADDING="0"> <TR ALIGN="CENTER"> <TD COLSPAN="3" WIDTH="586" HEIGHT="106">A</TD> <TD ROWSPAN="3" WIDTH="184">B</TD> </TR> <TR ALIGN="CENTER"> <TD WIDTH="40" HEIGHT="350">C</TD> <TD WIDTH="506" HEIGHT="350">D</TD> <TD WIDTH="40" HEIGHT="350">E</TD> </TR> <TR ALIGN="CENTER"> <TD COLSPAN="3" WIDTH="586" HEIGHT="106">F</TD> </TR> </TABLE>
- ベストアンサー
- その他([技術者向] コンピューター)
- IE8などでCSSでテーブルを中央に、テーブル内のテキストは左寄せにしたい
お世話になっております。 ・本文・テーブルは中央揃え ・テーブルの内容は左揃え というものをCSSで作りたいのですが、 どのようにしたらいいのでしょうか。 現在のページの一部は <div id="main"> <h1>タイトル</h1> <table border="1"> <p> 本文 </p> <tr> <td colspan="2"><h2 align="center">○○○</h2></td> </tr> <tr> <td>内容</td> <td>内容</td> </tr> ～行が続きますが省略～ </table> </div> のようになっています。 ちなみに cssのmainは「text-align:center;」を指定しておりますが、 IE8にしたところテーブルが左寄せになってしまいました。 なるべく多くのブラウザで同じような配置になるようにしたいのですが どうしたらよいでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
- CSS段組み？で右カラムを右寄せにするには？
説明が難しいのですが・・・ テーブルレイアウトでいえば、下記のHTMLで実現できるような表示方法を、 tableタグを使わずに実現したいです。 <table style="width: 100%;"><tr> <td>左パーツ</td> <td style="text-align: right;">右パーツ</td> </tr></table> divタグに float: left; を付けると、２つのdivブロックを横並びに配置できますが、 右側にあるdivにtext-align: right;を付けても、左寄せになってしまいます。 ※width未指定なので当たり前なのですが・・・ ただ、今回の場合は実際にマルチカラムを実現したいわけではなく、 上記コードでいうところの左パーツを画面の左端へ、 そして右パーツを画面の右端に表示させたいだけです。 左右それぞれの横幅は特定していません。 どなたか分かる方、教えて下さい。
- ベストアンサー
- CSS
- ２つのタグを合わせたいのですが・・・
下記のテーブル内にカラーラインを掲載したいのですが、どうやってもできません。いろいろ調べてるんですが、組み合わせたタグが見つからない状態です。 テーブル内にカラーラインを挿入することは不可能なんでしょうか？ 皆様、ご多忙と存じますが、教えていただけると幸いです。 稚拙な文章で申し訳ありませんが、宜しくお願いいたします。 ・テーブル <DIV ALIGN="CENTER"><TABLE BORDER="1" BORDERCOLOR="#12DAB5"><TR><TD BGCOLOR="#C0FFC0"> <FONT COLOR="#000000">文字</FONT></TD></TR></TABLE></DIV> ・カラーライン <TABLE WIDTH="100%"><TR><TD BGCOLOR="#7FFFFF"> <DIV ALIGN="CENTER"><FONT COLOR="#000000">文字</FONT></DIV></TD></TR></TABLE>
- ベストアンサー
- HTML
