- 締切済み
htmlを使って表を作っています
自分でつくった表だとどうしてかうまくいきません。何がいけないのでしょうか？わからないところをまた自分で見つけて修正するのでポイントとソースを書いていただけませんか？ 練習問題と自分が作ったソース載せます。 <html> <h4><b>１問<b></h4> <table border="1"width="400"height="400"> <tr><td background="1_4.jpg"width="200">1_4.jpg</td><td></td></tr> </table> <table border="1"width="400"height="400"> <tr><td>aaaa</td><td>aaaa</td></tr> </table> <h4><b>2問<b></h4> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> </table> <h4><b>3問<b></h4> <table border="1"width="150"height="100"> <tr bgcolor="#0000ff"><td></td><td></td><td></td></tr></table> <table border="1"width="150"height="100"> <tr colspan="3"><td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td></tr> <tr><td width="50"></td> </tr> </table> <h4><b>4問<b></h4> <table border="1"width="100"height="100"> <tr><td bgcolor="#00ff00"></td><td></td></tr></table> <table border="1"width="100"height="100"> <tr><td></td><td></td></tr></table> </html> 課題1_7-2 覚えるタグ ・<td background="★">～</td> ★には画像ファイル名(URL)を入れます。 <td>タグのbackground属性でセルの背景に画像を 貼り込むことができます。 画像の大きさがセルよりも小さい場合は繰り返して タイル状に並べられます。 それでは早速つくってみましょう。 ＜第一問：幅400、高さ400、上のセルの数が２つ、下のセルの数が２つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。＞ どうですか？うまく表示されましたか？ レイアウトをしていく上で大切なタグになっていくので頑張って作ってみましょう。 背景に指定できるのは画像だけではありません。 文字のように、色を指定することもできます。 覚えるタグ ・<table bgcolor="★">～</table> ・<tr bgcolor="★">～</tr> ・<td bgcolor="★">～</td> ★には色指定値(例：#ff0000)が入ります。 bgcolor属性でテーブルの背景色を設定します。 <table>タグに指定した場合はそのテーブル全体に、 <tr>タグに指定した場合はその横一列（一行）に色がつきます。 <td>タグに指定した場合はそのセルにのみ色がつきます。 それでは実際に作ってみましょう。 ＜第二問：幅50、高さ50、１つのセルのテーブル全体の背景を赤くしてみましょう。 赤→#ff0000＞ ＜第三問：幅150、高さ100、上のセルを３つ、下のセルを３つのテーブルを作り、 上３つのセルの背景を青くしてみましょう。 青→#0000ff＞ ＜第四問：幅100、高さ100、上のセルを２つ、下のセルを２つのテーブルを作り、 左上のセルの背景を緑にしてみましょう。 緑→自分で見つけて下さい＞
- bmxqw241
- お礼率23% (6/26)
- ホームページ作成ソフト
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞今はあえて基本をやっているようです。 困りましたね。・・やっていることは、基本と言うより、頂上にたどり着くためには、決しては迷い込んではならない脇道なので・・。 どこが間違っているかは、先に紹介したチェックサイトがありますからそれでチェックするのが一番の早道です。ソースはきちんとタブでインデントさせる癖をつければ、閉じ忘れが無いか視認も出来るでしょう。 ＜第一問：幅400、高さ400、上のセルの数が２つ、下のセルの数が２つの テーブルを作り、左上のセルに1_4.jpgを背景に貼り込んでみましょう。＞ 質問文が間違っています。『列(col)数２、行数(row)２のtableを作成し、左上のセルに背景を・・』と言う意味でしょう。 ★tableにheight属性は書いてはなりません。内容量や文字サイズによって伸長しなければなりませんから・・ ★tr/td要素に、background属性はありません。 ★tableにはsummary属性が必須です。(HTML5以降は無くても良い) ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) で検証済み。 タブは＿に置換してあるので、タブに戻すこと。 <!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"> <!-- --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<table border="1" width="400" summary="question1"> ＿＿<tbody> ＿＿＿<tr> ＿＿＿＿<td style="background-mage:url(1_4.jpg)">画像が入る</td> ＿＿＿＿<td>aaa</td> ＿＿＿</tr> ＿＿＿<tr> ＿＿＿＿<td>2行目1列目</td> ＿＿＿＿<td>２行目2列目</td> ＿＿＿</tr> ＿＿</tbody> ＿</table> </body> </html> テキストエディタは、テキストエディタ EmEditor - EmEditor Free ( http://jp.emeditor.com/modules/download2/rewrite/tc_5.html )を使うと、良いでしょう。 あなたが学ばれているのが書籍でしたら、直ちに捨てちゃいなさい。教室だったら、・・どうしたら良いものか私もわかりません。ただ、決して迷い込んではならない脇道だと言うことを理解するための一つの悪例を学んでいると妥協するしかないかも。
- DrFell
- ベストアンサー率55% (305/551)
タグを閉じることが身についていないようです。 <h4><b>2問<b></h4><!--ｂはいつ閉じるの？--> <table border="1"width="50"height="50"> <tr bgcolor="#ff0000"><td></tr></td> <!--タグは完全に入れ子にする。td/tdにしてからtrを閉じる。互い違いはダメ。--> </table> #1さんもおっしゃっていますが、今学ぼうとされているのは、古い手法です。これから学ばれるなら、現在の手法をお勧めします。 今は、Web標準といって、表や見出しといった文章構造のhtmlと、デザインスタイル（スタイルシート・ｃｓｓ）に役割を分割する手法が主流です。上の例ですと、<h4>問2</h4>とhtmlはしておき、別の場所にスタイルシートでh4{font-weight:bold;}とします。htmlには<h4>＜/h4>とするだけで、何度出てきてもいちいちデザイン的なタグを入れる必要はありません。 タグでのデザインよりはるかに、スタイルシートではきめこまやかなデザイン指定ができます。例えば、<h4>にも背景を入れられたり、罫線を入れられたりします。これから学ばれるのであれば、Web標準に準拠した教本に変えられることをお勧めします。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
本題は後回しにして・・ tableをつかって、レイアウトをされているようですが、これは学ぶ必要はまったくありません。 1999年にHTML4.01が勧告される前(草案の段階)から、tableによるレイアウトとは、強く否定され続けてきました。すなわち「文書の構造をプレゼンテーションと切り離すこと」が言われ続けてきました。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) 特にtableでのレイアウトは 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 単に文書内容を整形する目的だけで表を用いるべきでない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［11.1 表の概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから ・ページレイアウトの目的で表を用いる。 ・・・【中略】・・・ こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より ★HTML(htmlと小文字じゃない)を学ぶ上で、最も根幹に関わる基本中の基本です。 最も重要なことと言っても良いでしょう。 また、bodyでさえ、背景を指定するbackground属性も非推奨です。次期HTML5では完全に廃止されます。tableやそのセル(td/th)は、HTML4.01には存在すらしません。HTML的に誤った属性です。(bgcolorはありますが、非推奨です!!) ・<td background="★">～</td> 自体が、根本的な誤りです。 ^^^^^^^^^^^^^^^^^^^^^^^^^ ですから、無駄な学習になりますから、そのtableを使ってのレイアウトは、学ぶ必要はありません。というか、害になります。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) というとてもすばらしい、チェッカーがあります。そこで、今まで作成されたHTMLをチェックしてみてください。ショックを受けられないように。 はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ ) というすばらしい初心者用のウェブページ(ホームページじゃない)があります。(出版は1999年) そこで、正しい書き方を身に着けられたら、きっと早いでしょう。
補足
アドバイスありがとうございます。 今はあえて基本をやっているようです。たぶん。 来月あたりからCSS等をやっていくのだと思われます。 なので申し訳ないのですが間違っているところ多々あると思うのですがチェックお願いします