質問投稿でgooポイントが当たるキャンペーン実施中!!>>

テーブルなどを作成してボーダー1に設定すると、とても線が太い気がするのですが。
他のサイトなどと見比べても明らかに太く見えます。
ラインを細くするにはどうすればよいのでしょうか?

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

A 回答 (3件)

ボーダーを0にするか


あるいはテーブルを入れ子にして枠線風に見せてはどうでしょう

<table border="0" cellpadding="0">
<tr>
<td bgcolor="#FF0000">
  <table border="0" cellpadding="5" cellspacing="1">
    <tr bgcolor="#FFFFFF">
    <td>1</td>
    <td>2</td>
    </tr>
  </table>
</td>
</tr>
</table>
    • good
    • 0

結果は同じですが、#2さんのスタイルはもう少しシンプルに書けます。



また、背景色と線の色のコントラストを弱める(線の色を灰色にするとか)ことで視覚効果としてさらに細く感じさせる事もできるかもしれません。


<style type="text/css">
<!--
.tblbd{
border-collapse:collapse;/* 隣接するborderを重ねる*/
border:#ccc solid 1px;
}
.tblbd td {border:#ccc solid 1px;}
//-->
</style>
<table class="tblbd">
<tr><td>セル1-1</td><td>セル1-2</td><td>セル1-3</td></tr>
<tr><td>セル2-1</td><td>セル2-2</td><td>セル2-3</td></tr>
<tr><td>セル3-1</td><td>セル3-2</td><td>セル3-3</td></tr>
</table>

参考URL:http://www.htmq.com/style/border-collapse.shtml
    • good
    • 0

<TABLE>タグのBorderは1、CellSpacingを0にすると少し細く見えます。



それ以上に細くする場合、スタイルシートを使うしかありません。
例)
<style><!--
.tblbd{border-color:#000000;border-style:solid;border-width:1px 0px 0px 1px;}
.tdbd {border-color:#000000;border-style:solid;border-width:0px 1px 1px 0px;}
//-->
</style>
<table border="0" cellspacing="0" class="tblbd">
<tr><td class="tdbd">セル1-1</td><td class="tdbd">セル1-2</td><td class="tdbd">セル1-3</td></tr>
<tr><td class="tdbd">セル2-1</td><td class="tdbd">セル2-2</td><td class="tdbd">セル2-3</td></tr>
<tr><td class="tdbd">セル3-1</td><td class="tdbd">セル3-2</td><td class="tdbd">セル3-3</td></tr>
</table>
    • good
    • 0

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

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

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

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

Q線が一番細いテーブル

テーブルタグありますよね?

あれで、テーブルの線を一番細くしたいんですが、どうすればいいんでしょう?

Aベストアンサー

その他、<table>を2重にして細い線を出す場合もあります。

<table border=0 cellpadding=0 cellspacing=0>
<tr>
<td bgcolor=#909090>
<table border=0 cellpadding=5 cellspacing=1>
<tr>
<td bgcolor=#f0f0f0>項目1</td>
<td bgcolor=#ffffff>ああああああ</td>
</tr>
<tr>
<td bgcolor=#f0f0f0>項目2</td>
<td bgcolor=#ffffff>いいいいいい</td>
</tr>
</table>
</td>
</tr>
</table>

Qスタイルシートで罫線をもっと細くしたい

IE6.0です、

テーブルの罫線をもっと細くしたいのですが、
border-widthは1pxが一番細いのでしょうか?
この教えてgooくらい細くしたいのですが
他にやり方があれば教えてください。

TABLE {
border-color: #8b4513;
padding: 1px 1px 1px 1px;
margin: 1px 1px 1px 1px;
border-style: solid;
border-width: 1px 1px 1px 1px;
}

宜しくお願いします、

Aベストアンサー

要は教えてgooと同じようなデザインをcssで実現したいのですよね。
THとTDのborder-styleをnoneに変更、TABLEにborder-collapse: collapse;を追加。
これで近くなるのでは。

TABLE {
margin: 0px;
border: 1px solid #8b4513;
border-collapse: collapse;
}

TH {
background-color: #ffa500;
font-size: x-small;
color: black;
font-family:Times New Roman;
padding: 0px;
border-style: none;
}

TD {
height: 20px;
font-size: x-small;
color: black;
font-family:Times New Roman;
padding: 0px;
border-style: none;
}

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)はこれら以外にも
いろいろな設定方法があります。

QIE6からHTML罫線ができるだけ細く印刷されるようCSSで指定したい

HTMLファイルをIE6で表示してIE6で印刷する際、テーブルの罫線の
太さを、できるだけ細く刷られるようにする単位はありませんか。

例えば、CSSで border: solid 1px #000000;
のようにし、
「1px」を「0.2cm」や「0.1cm」にしてもまったく変化ありません
でした。

プリンタドライバにも依存するのかもしれませんが、何かよい方法が
ありましたらご教示ください。

Aベストアンサー

小数点はおおむね有効です。実際の画面やプリンタでどのような値に計算されるかの保障はありませんが 0.01pt とか にしてみてはどうでしょうか?

http://oshiete1.goo.ne.jp/kotaeru.php3?q=1947216
あと、こちらも参考に。

Qテーブルとテーブルの間隔について

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

Aベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

Qtableにul,または,olを入れられますか?

<table>
 <tbody>
  <th>くだもの</th>
   <td><ul><li>りんご</li><li>みかん</li><li>すいか</li></td>
   …etcとして
くだもの
・りんご
・みかん
・すいか
としたいのですが、
<table>の<tbody>の<td>の中に<ul>の<li>を入れる方法は
HTMLの仕様に反していますでしょうか?

Aベストアンサー

きちんとネストされていれば構いません。
ただ、書かれた例だと
・テーブルを構成する<THEAD>, <TR>タグが無い
・<UL>が閉じていない
というエラーがあるので、それを直せばいいでしょう。

<table>
 <thead>
  <tr><th>くだもの</th></tr>
 </thead>
 <tbody>
   <tr><td><ul><li>りんご</li><li>みかん</li><li>すいか</li></ul></td></tr>
   :
   :
 </tbody>
</table>

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

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プルダウンリストの背景色の指定

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、
上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。

IEとおなじ動きになるようにするには、どうしたらよいでしょうか。
ちなみに、

<select style="background-color: #FF0000">

にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。
と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。

簡単に解決できる方法などございますでしょうか。
もしくは、javascriptで解決できますでしょうか。

どうぞ宜しくお願いいたします。

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され...続きを読む

Aベストアンサー

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background-color: #00FF00;
}

.color03 {
background-color: #0000FF;
}

.color04 {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<form name="f1" action="./DB.cgi" method="POST">
<div>
<select id="key" name="key" onchange="chBackGround(this)">
<option class="color01">
サンプル1
</option>
<option class="color02">
サンプル2
</option>
<option class="color03">
サンプル3
</option>
<option class="color04">
サンプル4
</option>
</select>
</div>
<input id="submit" type="submit" value="表示">
<input type="hidden" name="mode" value="display">
</form>
</body>
</html>

「スタイルシートのクラス名」

<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background...続きを読む


人気Q&Aランキング