締切済み

このtableタグのサイズ変更の仕方を教えてくださ

2011/03/30 11:43

<Table border="1" bordercolor="#d4d4d4" cellspacing="0" style="border:thick ridge #d4d4d4;"> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー１</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー２</a> </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー３</a> </Td></Tr> <Tr><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー４</a> </Td><Td align="center" bgcolor="#ffff80" valign="middle" width="150" height="150" style="color:7f7f7f;"> WELCOME </Td><Td align="center" bgcolor="#7f7f7f" valign="middle" width="150" height="150" onmouseover="this.style.background='#e4e4e4'" onmouseout="this.style.background='#7f7f7f'"> <a href="ページＵＲＬ" style="text-decoration:none;color:#7f7f7f;">メニュー５</a> </Td></Tr> 書ききれませんでした。このテーブルをミニサイズで表示したいのですが、width等を使っても小さくなりません。どうしてですか？上手く説明出来ないので、絵を書きました。下手でごめんなさい。誰かわかる人いたら教えてください。

rinamelon
お礼率0% (0/2)

HTML
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/03/30 23:04 回答No.2

tableのセルのサイズは、その内容物の大きさによって伸縮します。内容物が置換要素ならその量によって、非置換要素なら指定されたサイズによって。　セル内の画像の大きさが200pxならそれ以上は小さくなりません。画像のような置換要素とは異なります。　画像サイズを小さくすると幅を決めなくても小さくなります。　しかしそれ以上に!! 　作成したいものは、どう見てもナビゲーションリンクのようです。だとしたらulまたはol、あるいはnav(HTML5の場合)でマークアップすべきです。　文書の構造にしたがって正しくマークアップしましょう。【HTMLのもっと重要な基本】　デザインのためにtableを使うのは間違いです。具体的には <!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:orika1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css">  </style> </head> <body> <h1>サンプル</h1> <ul id="nav"> <li><a href=""><img src="" width="150" height="100" alt="リンク１"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク２"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク３"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク４"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク５"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク６"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク７"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク８"></a></li> <li><a href=""><img src="" width="150" height="100" alt="リンク９"></a></li> </ul> </body> </html>