初めての店舗開業を成功させよう>>

テーブルタグの TH, TD 内にHR(水平の罫線)を引くのですが
これは使っても良いのでしょうか?

<table>
<tr>
<td>
テスト1
<hr>   <!-- ここ -->
テスト2
</td>
</tr>

動作はしているのですが、お勧めできないことでしたら、やめようと思います。

中にテーブルタグで分けるのが面倒なので、水平罫線<HR>で出来れば便利だと思いまして質問しました。

他に何か見栄えも良くておすすめできるものがありましたら教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

> テーブルタグの TH, TD 内にHR(水平の罫線)を引くのですがこれは使っても良いのでしょうか?



文法上は間違いではないです。

> 動作はしているのですが、お勧めできないことでしたら、やめようと思います。

hrは、あるひとかたまりの内容がここから違うひとかたまりの内容に変わりますよ、という目印としての区切り線といった意味を持つものですので、質問者様のソースの場合、「テスト1」と「テスト2」の内容がそういった性質のものであるかどうかによって、論理的に適切かどうか(「お勧め」できるか否か)は違ってきます。
あと、tableは「表」ですので、表のデータの中にそのhrが出現する様な性質のものが出てくるケースというのがちょっと想像できない(有り得ないとは言いません)のですが、もしかしてこの<table>~</table>は「表」としてではなく、レイアウトをする為だけに使っていますか?(本来それは推奨されない事なのですが、今回の質問はその事ではないので無視しておきます)であれば、hrを使う様な内容があっても不思議ではないですが。

以下の様なサンプルで、hrの使い方の感じが掴めますでしょうか。
---------------------------------------------------------------------
私はペットを沢山飼っている。それを紹介する。

<p>犬の話題…</p>
<hr>←ここで話題が変わるので挿入
<p>猫の話題…</p>
<hr>←ここで話題が変わるので挿入
<p>ハムスターの話題…</p>
---------------------------------------------------------------------

> 他に何か見栄えも良くておすすめできるものがありましたら教えてください。

単にブロックとブロックの間に線を引きたいという見た目の問題だけなら、CSSでborderプロパティを使えば線の形状・色・太さ・線とテキストとの間隔も自在です。
    • good
    • 0

問題もないわ。



ただし、一部の古いブラウザ(Netscape3)で
レイアウトが崩れることがあるようなので
<hr>にはwidthを指定して、必ずセルの幅よりも小さくする
ようにする必要があるわ。

もちろん、
そんなレアブラウザ無視してしまう
というのもありよ。

私が、仕事抜きで自分のサイトを作る場合は無視しちゃうし
仕事の場合は許可貰う方向で話を進めるわ。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 

Qテーブル内の一部のみ線を変更する方法ってありますか?

いつもお世話になっております。どなたか教えて下さい。
無理なら無理で結構ですので不可能だと回答下さい。

あるテーブル内の一部のみ線を点線にしたり、線幅を細くする方法があれば教えてほしいのですが・・・可能でしょうか?

イメージはエクセルのように一部の罫線だけを変更したいのです。宜しく御願いします。

1つのテーブルで実現不能ならば、複数のテーブルを自由に結合する方法とかないでしょうか?

むちゃくちゃ言って申し訳ありませんが、どなたか救いの手をお願いします。

ちなみにブラウザはIE5.0か6.0だと思います。

Aベストアンサー

スタイルシートを用いることで可能です。
以下の例ではタグに直接style属性を埋め込んでいますが、
先にstyle指定をしておくと楽かもしれません。
<table border="1" bordercolor="black">
<tr>
<td style="border-top-style:dashed;border-left:3px solid red;border-bottom-width:2px;border-right-color:blue;">あああ</td>
</tr>
</table>
詳しくは、スタイルシート、CSSなどで調べてみてください。

Q 内のテーブルを上寄せにするには?

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
</td>
</tr>
</table>
</td>

<td width="800" height="1200" border="1">

</td>
</tr>
</table>

すみません教えていただけますか?
初心者です。
このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。
上寄せにしたいのですが、どのようにすればよいでしょうか?

よろしくお願いします。

<table width="960" border="1">
<tr>
<td width="160">

<!-- TABLE A -->
<table width="160" border="1">
<tr>
<td>
<a href="" ><img src="subMenu.gif" /></a>
...続きを読む

Aベストアンサー

TABLE Aを入れているtdに対してvalign="top"を入れると
解決しますよ。

Qテーブル内の文字列を改行させたい

<TABLE border="1">
<tr> <TD>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</TD>
</tr>
</TABLE>

これを、ある一定の幅を指定して改行させたいのですが、
CSSを使おうが使わず指定しようが、反映されません。
全角文字だと反映されます。

IE6、IE7で対応させたいと思っています。

CSSでも何でも良いので、どうすれば対応出来るのか
ご教示下さい。

Aベストアンサー

英数半角文字だと、続けて入力した場合、一つの単語とみなして禁則処理をしてしまうんだと思います。
なので、<br>で改行するのがいいのかと思いますが、
IEで対応したいということなので、IE7で動作するかはわかりませんが、
word-break:break-all;
の指示で単語の切れ目を無視して改行してくれると思います。

参考URL:http://www.htmq.com/style/word-break.shtml

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブルの行の高さを指定する時全てのtdタグに?

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた)<br>

<table border=1>
<tr><td class="test">1</td><td class="test">2</td></tr>
<tr><td class="test">3</td><td class="test">4</td></tr>
</table>

<br><br>

2の例<br>(一番左の列だけclass="test"をいれた)<br>

<table border=1>
<tr><td class="test">1</td><td>2</td></tr>
<tr><td class="test">3</td><td>4</td></tr>
</table>

<br><br>

3の例<br>(スタイルシートは何も指定していない)<br>

<table border=1>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>

スタイルシートでテーブルの行の高さを指定する時は、
全てのtdタグにスタイルシートを指定するべきか、
1つだけ(一番左だけ)指定すればいいのかわからないので押してください。


全てのtdタグに指定しても、一つのtdタグに指定しても、結局はその行の高さは指定した高さになります。

コードを書く上でどちらが適切か教えてください。
--------------------------------------------------


<style type="text/css">

td.test {height: 50px;}

</style>

<body>

1の例<br>(2列ともclass="test"を入れた...続きを読む

Aベストアンサー

テーブルの行の高さ、なので <tr> タグに指定するのが素直でしょうか。

<style>
table tr { height:1em; } /* 全ての行に適用 */
table tr.test { height:3em; } /* 特定の行のみ適用 */
</style>

<table border>
<tbody>
<tr> <td> 1 <td> 2
<tr> <td> 3 <td> 4
<tr class=test> <td> 5 <td> 6
</table>

Qテーブルで列の幅を指定する

HTMLタグでWEBサイトを作成していますが、テーブルの幅を指定しても実際ページを開けると、同じ数値入れても同じ幅にならなかったり、全ての幅指定してもその通りになりません。またウィンドウを大きくしたり小さくしたりすると、特定の列のみ幅が狭くなったり広くなったりします。どうすれば幅を指定した数値どおりに固定できますでしょうか。

Aベストアンサー

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかかかか</td>
<td width="80">ききききききききききききききききききききききききき</td>
<td>くくくくくくくくくくくくくくくくくくくくくくくくくくくくくく</td>
<td>けけけけけけけけけけ</td>
</tr>
</table>
</body>
</html>

 style="table-layout: fixed;" で、指定すると良いようです。↓

<html><head>
</head>
<body>
<table border=1 style="table-layout: fixed;">
<tr height="50">
<td width="160" colspan="2">あああああああああああああああああああああああああ</td>
<td width="80">いいいいいいいいいいいいいいいいいいいいいいいいい</td>
<td width="160">ううううううううううううううううううううううううう</td>
</tr>
<tr height="50">
<td width="80">かかかかかかかかかかかかかかかかかかかかかかか...続きを読む

Qテーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。

テーブルのhrタグに下線を引くためのスタイルシートですがうまくいきません。
なぜでしょうか?

<style="text/csss">
<!--

hr.kasen {
border-bottom-style: double;
}

-->
</style>

<table>
<tr class="kasen">
<td>あ</td>
</tr>
</table>

Aベストアンサー

hrはtrの間違いとして・・・

trにborderを付けても反映されないブラウザがあるはずです。
(何がダメで何がOKかは忘れましたが)
私は

tr.kasen td{
border-bottom-style: double;
}

としてます。
separateでセル間≠0の場合は切れ切れになってしまいますが。

Qdivタグ内のコンテンツが重なって表示されてしまう。

下記のようなHTMLを表示させるときに
IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。
どうしたら、上下に並べて表示させられますか?

<div id="a">
<div id="b">
<ul>
<li>重なってしまう文字列</li>
<li>重なってしまう文字列</li>
</ul>
</div>
</div>
<table>
<!-- このテーブルタグの上に重なって表示されてしまう -->
</table>

Aベストアンサー

CSSのどの部分かよくわからないなら
タグで指定したstyle属性の方が優先するはずだから
style="position:relative;clear: both;"
で直接打ち変えてしまえば。


人気Q&Aランキング

おすすめ情報