リンクする文字が横一列のとき、見栄えをよくするのにテーブルを使うと思うのですが、そのときの質問があります。 ■HTML プロフィール(Profile) 日記(Diary) 絵(Picture) 疑問(Question) このような場合、CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？また、リンクする文字と文字の間（プロフィール(Profile)←→日記(Diary)）を均一にするにはCSSのどのプロパティを使えばいいのでしょうか？回答よろしくお願いします。

>均一え？text-justifyの話なの？marginとかpaddingの話だと思ってたんだけど >CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？ http://www.w3.org/TR/CSS21/visudet.html#propdef-width tr要素に効かないのはCSS2.1の仕様。 td要素には効くはず。ただし http://www.w3.org/TR/CSS21/tables.html#propdef-table-layout を気にしておかないと穴に嵌ることがあるから注意。

CSS：横一列にリンクする文字の見栄えをよくする

解決済

質問者：miya_HN
質問日時：2008/01/16 17:01
回答数：4件

リンクする文字が横一列のとき、見栄えをよくするのにテーブルを使うと思うのですが、そのときの質問があります。

■HTML
<table>
<tr>
<td><a href="">プロフィール(Profile)</a></td>
<td><a href="">日記(Diary)</a></td>
<td><a href="">絵(Picture)</a></td>
<td><a href="">疑問(Question)</a></td>
</tr>
</table>

このような場合、CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？
また、リンクする文字と文字の間（プロフィール(Profile)←→日記(Diary)）を均一にするにはCSSのどのプロパティを使えばいいのでしょうか？

回答よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： dezimac
回答日時：2008/01/16 17:46

テーブル使わなくともできます。

文字の間を均一にするとかは以下を熟読してもらえば理解出来ます。
http://allabout.co.jp/internet/hpcreate/closeup/ …

もちろん、tdやtrにwidth等を指定する事もできます。
/*12文字分でセンター寄せ*/
td {
width:12em;
text-align:center;
}

↓テーブルの装飾の例
http://allabout.co.jp/internet/hpcreate/closeup/ …

参考URL：http://allabout.co.jp/internet/hpcreate/closeup/ …

- 0
- 件

通報する

この回答へのお礼

テーブルを使わなくてもできるんですね。文字間の均一の参考URLは大変参考になりました。
tdやtrにもwidthを指定することができるんですね。

ありがとうございました。

通報する

お礼日時：2008/01/17 14:04

No.4

回答者： kazumero
回答日時：2008/01/16 21:33

テーブルは表を作成するタグなので、見栄えをよくするのに用いるのは不適切です。

リンクを並べる場合、リストを用いるのが適切です。
ただ、そのまま用いると、中黒がついたり、縦に並んでしまうので、CSSで制御します。試しに簡単なリンクメニューを作ってみました。

<html>
<head>
<style type="text/css">
#navi{
background-color:#999966;
border-top:solid 1px #003333;
clear:left;
height:18px;
list-style:none;
margin:0px;
padding:0px;
width:100%;
}

#navi li{
display:block;
float:left;
width:150px;
border-right:solid 2px #003333;
}
#navi a{
display:block;
line-height:1.3em;
width:150px;
color:white;
background-color:#999966;
font-size:14px;
text-align:center;
border-bottom:none;

}
#navi li a:hover{
background-color:#99cccc;
color:#003333;
}
</style>
</head>
<body>
<ul id="navi">
<li><a href="">プロフィール(Profile)</a></li>
<li><a href="">日記(Diary)</a></li>
<li><a href="">絵(Picture)</a></li>
<li><a href="">疑問(Question)</a></li>
</ul>
</body>
</html>

これなら、横幅の長さも均一になっています。

- 0
- 件

通報する

この回答へのお礼

リンクを横一列に並べるにはテーブルよりリストの方がいいんですね。
まだCSSはほとんど勉強していないので書かれていることは分かりませんが、これから勉強して理解しようと思います。

ありがとうございました。

通報する

お礼日時：2008/01/17 18:53

No.3

回答者： himajin100000
回答日時：2008/01/16 17:57

>均一

え？text-justifyの話なの？marginとかpaddingの話だと思ってたんだけど

>CSS「{width}」を「td」や「tr」で使えないのはなぜでしょうか？
http://www.w3.org/TR/CSS21/visudet.html#propdef- …
tr要素に効かないのはCSS2.1の仕様。
td要素には効くはず。
ただし
http://www.w3.org/TR/CSS21/tables.html#propdef-t …
を気にしておかないと穴に嵌ることがあるから注意。