- ベストアンサー
テーブルの線の幅を一重の線にしたい
<HTML DIR=LTR> <HEAD> </HEAD> <BODY> <TABLE border=1 bordercolor="#808080"> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML> これにすると画像のように線の幅が二重線になってしまうのですが、 一重にするにはどうすればいいですか？ <TABLE border=1 を<TABLE border=0にすると、線が消えてしまいます。
- nsrvbmia
- お礼率98% (68/69)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
とっても--少なくとも15年以上前の参考書を見ているようですが・・・ tableは、配置のために使用してはなりません。あくまで表データのみです。 また、xml/xhtmlの仕様とあわせるため、要素名属性名は小文字で書くことが多いですね。 DIR=LTR（文字方向)は、通常は書きません。代わりにlang="ja"が必須です。<html lang="ja"> <table summary="test"><!-- HTML4.01ではsummaryは必須です --> <tbody><!-- tbodyも原則必須です --> <tr> <th abbr="">・・・<!-- thにはabbrが必須 --> ・・とかです。後方互換のためborder="1" のみは書いておくほうが良いでしょう。 <table summary="test" border="1"> どのように描画するかはスタイルシートで記述します。 table[summary="test"]{ /* summary属性の値がtestのtable */ border-collapse:collapse; /* 結合ボーダーモデルを指定します */ border:solid 1px red;/* tableの外枠を指定します */ } table[summary="test"] th, table[summary="test"] td{ /* セルの指定です */ border: solid blue gray; } ・・・となります。 使用されている参考書がとっても古いようです。
その他の回答 (2)
- pringlez
- ベストアンサー率36% (598/1630)
こうしたらどうでしょうか？ <TABLE border=1 cellspacing=0 bordercolor="#808080">
お礼
ありがとうございます。
- DrFell
- ベストアンサー率55% (305/551)
nsrvbmiaさんは、今からhtmlを学ばれるのでしょうか？それならweb標準と呼ばれるcss+htmlによる記述をお勧めします。 というのも、tableタグの中に罫の指定を入れる手法は、今や過去のものとなっているものなので。 現在の主流は、スタイルシートによりデザインを付けます。スタイルシートは文中、head内、別ファイルとありますが、ここではhead内への指定を示します。デザインと伝えたい本質を分離することで、制御が楽になり、端末の違いを吸収するのが楽になってきております。 <HTML DIR=LTR> <HEAD> <style type="text/css">/*●注：見た目のデザインはスタイルシートにします。●*/ table{border-collapse:collapse;}/*テーブルの罫線は1重にしてね*/ tr *{border:1px solid #808080;}/*trの子ども（th,td）の罫線の指定*/ </style> </HEAD> <BODY> <TABLE><!--●注：デザイン関する指定は、htmlには含めない--> <TR> <TH>タイトル</TH> </TR> <TD>aaa</TD> </TR> <TR> <TD>bbb</TD> </TR> <TR> <TD>ccc</TD> </TR></TABLE> </BODY> </HTML>
お礼
ありがとうございます。
関連するQ&A
- テーブルの線の色が指定できない
テーブルの線の色が指定できないうえ、最後に宣言したスタイルシートが適用されてしまいます。 理由がわかりません。 <style type="text/css"> table, td, th.bordercolor_white { border: 1px white solid; } table, td, th.bordercolor_red { border: 1px red solid; } </style> <table class="bordercolor_white"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> このような文だと、 <table class="bordercolor_white">としているのに、 なぜかテーブルの線の色は、赤になってしまいます。 table, td, th.bordercolor_red { border: 1px red solid; } table, td, th.bordercolor_white { border: 1px white solid; } のように、順番を入れ替えると、最後に宣言した白になります。 なので、<table class="bordercolor_white">の部分は無視されるようです。 二つのテーブルの線の色を用意した場合、 任意でテーブルの線の色を付ける方法をご教授ください。
- 締切済み
- CSS
- 一気に「テーブルの2列目のtdタグを右詰にする
<html> <head> <title>test</title> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td>bbb</td></tr> <tr><td>2</td><td>ccc</td></tr> </table> </body> </html> このようなテーブルで 右側の2列目のtdタグを右詰にしたいのですが、 一気に「テーブルの2列目のtdタグを右詰にする」と言う方法は有りますか? 今は <html> <head> <title>test</title> <style type="text/css"> td.example1 { text-align: right; } </style> </head> <body> <table border=1> <tr><th>No</th><th>aaaaaaa</th></tr> <tr><td>1</td><td class="example1">bbb</td></tr> <tr><td>2</td><td class="example1">ccc</td></tr> </table> </body> </html> このようにしていますが 一つ一つタグを付けるのは非効率的と思っています。
- ベストアンサー
- HTML
- テーブル列の表示／非表示機能の追加～その２
やりたい事は、AAAの列だけ常に表示させておき、BBB（つまり3列分）を表示／非表示になる・・といった事です。 下のHTMLで、変数bbbには「３」が入っているのは確認できましたが、後がさっぱり続きません。 どうぞよろしくお願いいたします。 <html> <head> <script type="text/javascript"> <!-- function hide(idName) { var aaa = document.getElementById(idName).childNodes; var bbb = aaa[0].length; alert(bbb); //--> </script> </head> <body> <button onClick="hide('list1')">隠す</button> <table border="1" cellpadding="2" cellspacing="1"> <tr> <th rowspan="3">AAA</th> <th colspan="3" id="list1">BBB</th> </tr> <tr> <th width="120">BBB1</th> <th width="120">BBB2</th> <th width="120">BBB3</th> </tr> <tr> <th>BBB11</th> <th>BBB21</th> <th>BBB31</th> </tr> <tr> <td>aaa</td> <td>aaa1</td> <td>aaa2</td> <td>aaa3</td> </tr> <tr> <td>bbb</td> <td>bbb1</td> <td>bbb2</td> <td>bbb3</td> </tr> <tr> <td>ccc</td> <td>ccc1</td> <td>ccc2</td> <td>ccc3</td> </tr> </table> </body> </html>
- ベストアンサー
- JavaScript
- 2つのテーブルの幅を一致させたい
以下のHTMLで、2つのテーブルのセル幅が一致しません。 JavaScriptではヘッダのセル幅をボディのセル幅に合わせています。 ボディ部分の文字列をすべて日本語にするとうまくいくのですが・・・ JavaScriptというよりはHtmlの問題な気がしますが、よろしくお願いします。 jqueryを使用しています。 <html> <head> <script src="js/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { headerTableWidthFit(); }); $( window ).resize(function(){ headerTableWidthFit(); }); function headerTableWidthFit() { var i = 0; $('#resultBodyTable table tbody tr:eq(0) td').each(function() { $('#resultHeaderTable table th').eq(i).width($(this).width()); i++; }); } </script> </head> <body> <div id="container"> <div id="resultHeaderTable" class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> <th>お</th> <th>か</th> <th>き</th> <th>く</th> </tr> </thead> </table> </div> <div id="resultBodyTable" class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> <td>お</td> <td>か</td> <td>き</td> <td>く</td> </tr> </tbody> </table> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの幅 余白をなくすことは可能ですか？
<html> <head> <title>test</title> </head> <style type="text/css"> table { width: 100%; } </style> <body> <table border=1> <tr><th>a</th><th>b</th></tr> <tr><td>1</td><td>2</td></tr> </table> </body> </html> のように テーブルの幅を１００％にしても 両端に余白が出来てしまいますが この余白をなくすことは可能ですか？ 添付画像はIEで表示させた状態ですが ファイアフォックスなど他のブラウザで表示させても余白が出来ます。
- ベストアンサー
- HTML
- 入れ子にしたテーブルをheight100%にする
お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
- スタイルシートをhead内で定義したい
下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>
- 締切済み
- HTML
- HTMLのテーブルについて
HTMLのテーブルについて 今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。 これを解決するにはどのように改善すればいいのでしょうか？ <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>１</td> <td>Ａ君</td> <td>(1)</td> </tr> <tr> <td>１</td> <td>Ｂ君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>１</td> <td>Ｃ君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>２</td> <td>Ｄ君</td> <td>(3)</td> </tr> <tr> <td>２</td> <td>Ｅ君</td> <td>(4)</td> </tr> <tr> <td>２</td> <td>Ｆ君</td> <td>(5)</td> </tr> </table> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- borderとcellspacingの違い
<table border=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table cellspacing=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=1 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> <table border=1 cellspacing=0 bordercolor="#ff0000"> <tr> <td>aaa</td> <td>bbb</td> </tr> </table> いろいろサンプルを作ってみたのですが、 結局borderとcellspacingは、どう違うのでしょうか？
- ベストアンサー
- HTML
- テーブル内での改行がうまくいかない
ウィンドウが小さくなると、それに合わせてテーブルも小さくなると思っていたのですが、下のソースを表示すると、テーブルが一定の大きさから小さくなりません。何が悪いのでしょうか。 --ソース-- <HTML> <HEAD></HEAD> <BODY > <TABLE border="1"> <TR> <TD>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</TD> </TR> </TABLE> </BODY> </HTML> よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます。