- 締切済み
このような使い方はありでしょうか？
[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>
