- ベストアンサー
HTMLの表の罫線に色をつける方法
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No3の方の書かれているように、スタールシートを使うのが最もよいかと思います。 ちなみに、No1,2の方が紹介されている方法は、いくつか欠点があり、そのままでやると枠線は「2重線」になります。 そうしないためには、<table>タグのなかでcellspacing="0"と指定してください。 ただし、そうすると今度は内罫の太さが変えられません。 どうしても、htmlだけで表現するというのならば、tableとtdで背景色を変えることで表現できます。 <TABLE bgcolor=枠の色にしたい色 BORDER=0 CELLSPACING=枠の太さにしたい値> <TR> <TD bgcolor=#ffffff>1</TD> <TD bgcolor=#ffffff>2</TD> </TR> <TR> <TD bgcolor=#ffffff>3</TD> <TD bgcolor=#ffffff>4</TD> </TR> </TABLE> としてみてください。 ただ面倒くさいです。
その他の回答 (3)
- elttac
- ベストアンサー率70% (592/839)
結論は，「スタイルシートを使用する」ことです。 複雑な罫線は，それなりに難しいので，参考 URL の「Let's begin CSS」の Chapter 1 を読んだ後，「Hop step CSS」の Chapter 6 を読まれればよいでしょう。 参考に，もっとも簡単な（場当たり的な）方法で，罫線を完全に青にする方法を示します。 【<HEAD>...</HEAD> に以下を追加】 <STYLE TYPE="text/css"> table, td { border: #0000FF solid 1px; } </STYLE> 【以下，実際に表示させる表】 <TABLE CELLSPACING="0" BORDER="1"> <TR> <TD>1</TD> <TD>2</TD> </TR> <TR> <TD>3</TD> <TD>4</TD> </TR> </TABLE>
お礼
有益な情報ありがとうございました。
- morizaru
- ベストアンサー率40% (2/5)
枠線に色をつけるのは <table bordercolor="色"> 線の幅(太さ)は <table border="数値"> 数値=0なら線ナシ など、下のHPを参考にいろいろ試してみるといいと思います。
お礼
ありがとうございます。 参考になりました。
- non209
- ベストアンサー率32% (92/282)
最初の<TABLE>タグの中で色々指定します。 <TABLE BORDERCOLOR=色> 枠線に指定の色をつける <TABLE BORDER=ピクセル数> 外枠の太さ <TABLE CELLSPACING=ピクセル数> 枠線の太さ とりあえずこんな感じです。 もっと細かい指定もできますが。
お礼
ありがとうございます。 参考にします。
関連するQ&A
- FC2ブログへ罫線非表示の表を挿入したい
FC2ブログへ罫線非表示の表を挿入したいと思い 下記のようなHTMLにしました（例文です） <table style="border-style:none"> <tr><td>桜の頃</td> <TD valign="top" align="right">お花見弁当</TD> </tr></table> プレビューをみると 薄茶色の罫線が表示されます。（画像添付） border-style:noneなのに どうしてでしょうか？ 罫線を非表示にする方法を教えてください。
- ベストアンサー
- ブログ
- HTMLの表で幅を指定しても折り返すことは無理なのでしょうか？
以下のHTMLの表は横幅を指定していますが、 すごく横長な表になってしまいます。セルの幅を指定してもセル内の文字を折り返す事は不可能なのでしょうか？ <html> <head> <title>table</title> </head> <body> <table width="570" border="1"> <tr><td width="130"> test1</td> <td bgcolor="#CCCCCC" width="440"> oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </td></tr></table> </body> </html>
- ベストアンサー
- HTML
- HTMLのtableタグでセル毎の幅率を指定したい
HTMLにtableタグがあると思いますが、 例えば <table> <tr> <td></td> <td></td> </tr> </table> のように左右にセルがあるだけの単純な表を作ったとします。 この場合１００ピクセルの幅にして左が７０ピクセル、右が３０ピクセルみたいに 個々の列で幅の比率を指定したりはできるのでしょうか？
- ベストアンサー
- HTML
- HTML 表の中の表
趣味でHPを作り始めたのですが表のところがよくわかりません。 大きな表（外枠）の中に2個目の表を作りたいのですが、どうしても2個目の表が大きな表（外枠）の真ん中に来てしまいます。2個目の表が大きな表の一番上にくっつくようにしたいのですがどうしたらいいのでしょうか。宜しくおねがいします。 <html> <body> <table border="1" height="500" width="300"> <tr> <td> <table border="1" width="100%"> <tr > <td colspan="3" > </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table> </body> </html>
- 締切済み
- その他（趣味・娯楽・エンターテイメント）
- 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、上のセルを２つ、下のセルを２つのテーブルを作り、 左上のセルの背景を緑にしてみましょう。 緑→自分で見つけて下さい＞
- 締切済み
- ホームページ作成ソフト
- 入れ子にしたテーブルの罫線について
htmlとcssを学習し始めた者です。 下記のような表を作りましたが 罫線が2重になってしまいます。 この罫線をダブらないようにしたいのです。 一番左の列で言えば、外枠を残し、100の上、左、右 を消し、200の左右を消し、300の左、右、下を消し 一本の線で書かれた表にしたいと考えています。 ご教示くださるようお願いいたします。 <LINK href="style.css" type="text/css" rel="stylesheet"> <table> <tr> <td> <table> <tr><td>100</td></tr> <tr><td>200</td></tr> <tr><td>300</td></tr> </table> </td> <td> <table> <tr><td>101</td></tr> <tr><td>201</td></tr> <tr><td>301</td></tr> <tr><td>401</td></tr> <tr><td>501</td></tr> </table> </td> <td>12345<br>67890 </td> <td> <table> <tr><td>102</td></tr> <tr><td>202</td></tr> <tr><td>302</td></tr> <tr><td>402</td></tr> </table> </td> </tr> </table> style.css table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; } td{ border: 1px solid #000000; padding:5px;}
- ベストアンサー
- HTML
- 表の作成ができません！（ＨＴＭＬ）
メモ帳にＨＴＭＬ記述でホームページを作っています。 表を作成したいのですが、表示されません。 <html> <head> <title>～</title> </head> <body> <table border=1> <tr> <td>AAA</td> <td> <br>aaaaaaaaaaa <br>bbbbbbbbbbb <br>ccccccccccc </td> </tr> <tr> <td>BBB</td> <td> <br>dddddddddd <br>eeeeeeeeee </td> </tr> </table> </body> </html> で作っています。 （※aaaaaaは、たとえです） 同じタグ記述で、改行のない表を作ったら、これは表示されました。 表内に改行させた場合は、エクスプローラには表示されないのでしょうか？
- 締切済み
- その他（インターネット・Webサービス）
- HTMLで書いた表の上部にはみ出た空白が出る
HTMLで書いた表の上部に空白部分が表をはみ出てきてしまいます。たとえば１１列の表を作りました。しかし行が増えるに従って、表の上部にはみ出た空欄が出て空欄の高さが長くなってきます。どういう指定をすれば表だけになって、この白い部分はなくなるか教えて下さい。あるいは最後のところのHTMLが不足しているとか。 <TABLE> <TABLE BORDER=5 WIDTH=800> 一列目 <TR bgColor=#f0ffff> <TD width=30>1</TD> <TD width=100>7/18（月）</TD> <TD width=500>成田発<BR>ミュンヘン着</TD> <TD width=300>午前<BR>午後</TD> 同じように10列の表があるとする。 最後</TABLE> 同じように1１列くらい書いていると 上部に白い空白が出来てくる。なぜでしょうか。
- ベストアンサー
- その他([技術者向] コンピューター)
- HTMLのどこを削除すれば罫線が消えますか？
添付画像の【ドリッパー＆リッド付きルシード・ドリップ・イン・マグ】の文字の下の罫線を削除したいのですが、HTMLのどこを削除すれば罫線が消えますか？ 教えて下さい。 <table width="700" cellspacing="0" cellpadding="5" style="font-size:10pt;"><tr> <td width="47" align="left" style="border-bottom:#666666 1px solid;"> <div align="left"></div></td> <td width="6" align="left" style="border-bottom:#666666 1px solid;"></div></td> <td width="601" style="border-bottom:#666666 1px solid;"><div align="left"><b>ドリッパー＆リッド付きルシード・ドリップ・イン・マグ</b></div></td> </tr> </table> <table width="700" border="0" cellspacing="0" cellpadding="10"> <tr> <td align="center"><img src="http://image.co.jp/deco/cabinet/item/04751544/imgrc0065803424.jpg" ></td> </tr> </table>
- ベストアンサー
- デザイナー・クリエイティブ職
お礼
ありがとうございますた。 参考になりました。