ショボ短歌会

テーブルの線を立体じゃなく普通の線にしたい

解決済

  • 質問者：82w82
  • 質問日時：
  • 回答数：6件

普通にテーブルで表を作ると線が立体的になってしまいますよね。
これを、特定のテーブルだけを普通の罫線だけで作られたような表にしたいと思っています。

テーブルを立体でなく罫線にするには、

【例1】
<STYLE type="text/css">
<!--
td{border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #000000;}
--></STYLE>
というスタイルシートを<head>内に書く。

【例2】
<table bgcolor="#000000" border="0" cellspacing="0" cellpadding="0">
<tr><td>
<table border="0" cellspacing="1" cellpadding="0">
<tr><td bgcolor="#ffffff">セル１</td><td bgcolor="#ffffff">セル２</td></tr>
<tr><td bgcolor="#ffffff">セル３</td><td bgcolor="#ffffff">セル４</td></tr>
</table>
</td></tr>
</table>
という入れ子状態にする。

概ねこの２種類の方法が一般的だと思います。
が、【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。
【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。

これを、個々のテーブルに対して例1のようなスタイルシートを使用して作れないものでしょうか？
<span>を使って出来そうな気がするのですが、いろいろ試すもののどうもうまくいきません。こういう場合の合理的な方法をご存知でしたら教えていただけますか。

通報する

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

質問の本文を隠す

A 回答 (6件)

No.3ベストアンサー

  • 回答者： asahina02
  • 回答日時：

＃１です



先ほどの回答はid属性でやりましたが、class属性でも同じようにできますよ

定義：
.mytable td { 。。。
本文
<table class="mytable">
    • good
    • 0
    • 件
通報する
この回答へのお礼

度々ありがとうございます。
class属性を使った方法でもこうやるとTD全てに結果が反映されるのですね。知りませんでした。
この方法も他にもいろいろと応用できそうですね。覚えておきます。

#2の方に少々失礼なコメントを書いてしまってお恥ずかしい・・・

通報する
お礼日時：2006/11/17 15:26

No.6

  • 回答者： yambejp
  • 回答日時：

えーと・・・・



collapseを使います。IE6やFirefoxで問題ないので、これで十分でしょう。

<style type="text/css">
table#hoge {
border-collapse: collapse;
}
table#hoge td{
border:solid 1pt;
border-color: #000000;
}
</style>
<table id="hoge">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</table>
    • good
    • 0
    • 件
通報する
この回答へのお礼

へえ～、こんなやり方もあるのですね。ホントいろいろあるもんですね。
スタイルシートって正直あんまりよく分かってなかったので、これを機にしっかり勉強します。
ありがとうございました。参考にさせていただきます。

通報する
お礼日時：2006/11/17 18:57

No.5

  • 回答者： goldfox
  • 回答日時：

スタイルシートを使った【例1】（回答例）の方がよいのを前提として、


＞【例2】は小さい表にはいいですが、セルが大量にある表に使うのは無駄が多く、タグが複雑になるので修正時も面倒です。
確かにこの例では無駄がありすぎますが、「入れ子にしない」「tbodyを使う」をすれば、無駄は省けます。
お試しください。
<table border="0" bgcolor="#000000" cellspacing="1" cellpadding="0">
<tbody bgcolor="#ffffff">
<tr><td>セル１</td><td>セル２</td></tr>
<tr><td>セル３</td><td>セル４</td></tr>
</tbody>
</table>
    • good
    • 0
    • 件
通報する
この回答へのお礼

こんな方法もあるんですね！tbodyですか、これも初めて知りました。
これは非常にシンプルで分かりやすいですね。
各々のテーブルを別々に指定したいときはスタイルシートを使うまでもなく、ダイレクトに指定できるこの方法がより無駄がないかもしれません。
ありがとうございました。

通報する
お礼日時：2006/11/17 15:41

No.4

>【例1】の方法は作るテーブル全てがこのスタイルになってしまいます。



class名を指定すれば指定したクラスにだけスタイルが適用されます。
また、全てのTDタグにclass属性をつけるのは面倒なので、
テーブルにクラス属性を付け、その中のTDタグのスタイルをまとめて指定する方が楽です。

<style type="text/css">
<!--
TABLE.flat TD{
border-style:solid; border-width:1pt 1pt 1pt 1pt;border-color: #000000;
}
-->
</style>

スタイルを上記の様にし、テーブルタグにclass属性を指定する。

<table class="flat">

すると、そのテーブル内の全てのTDタグに上記のスタイルが適用されます。

この回答への補足

↓すいません、#4の方じゃなくて“#3の方と”同じですね。お礼書いた後で気づきました。

補足日時：2006/11/17 16:17
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

#4の方にアドバイス頂いたのと同じですね。
便利でよく使うと思いますのでしっかり覚えておきます。

通報する
お礼日時：2006/11/17 15:28

No.2

  • 回答者： _hayate_
  • 回答日時：

class属性はどうでしょう？(自信ナシ^^;)


例)
<style type="text/css">
<!--
.Class1{border-width : 1px 1px 1px 1px;border-style : solid;border-color : black;}
.Class2{border-width : 1px 1px 1px 1px;border-style : solid;border-color : red;}
.Class3{border-width : 1px 1px 1px 1px;border-style : solid;border-color : green;}
-->
</style>

<head></head>内に書く

3*3のテーブルとして黒、赤、緑を指定してあります。
<table border="0">
<tbody>
<tr>
<td class="Class1">黒</td>
<td class="Class1"></td>
<td class="Class1"></td>
</tr>
<tr>
<td class="Class2">赤</td>
<td class="Class2"></td>
<td class="Class2"></td>
</tr>
<tr>
<td class="Class3">緑</td>
<td class="Class3"></td>
<td class="Class3"></td>
</tr>
</tbody>
</table>

2*2のテーブルだけどそれぞれ罫線の色が違う場合はこんな感じで。
<table border="0">
<tbody>
<tr>
<td class="Class1">黒</td>
<td class="Class2">赤</td>
</tr>
<tr>
<td class="Class3">緑</td>
<td class="Class1">黒</td>
</tr>
</tbody>
</table>

この回答への補足

他の方のアドバイスで、classを使うのも有効であることがわかりました。
よく知らない立場でありながら偉そうなことを書きまして失礼いたしました。自分の無知がお恥ずかしい限りです・・・
（↓お礼の後で書きました）

補足日時：2006/11/17 19:00
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

classを設定しても結局TDひとつひとつに全てclass属性を付けないといけないので、bgcolorを記入するのとあまり変わりません。TDの線の設定はまとめて変えられるのでその点はメリットがありますが・・・
（でもそれぐらいならテキストエディターの一括置換でもできるし・・・）
classの使い方はすでに知っていましたので試してみたところ、あまり合理的でなかったので、他の方法を探していました。
せっかく書いていただいたのに、説明不足ですみませんでした。

通報する
お礼日時：2006/11/17 14:16

No.1

  • 回答者： asahina02
  • 回答日時：

例１の応用で


td { 。。。
と書くのではなく、
#mytd td { 。。。
と書き、

適用したいtableタグに以下のように書けば良いです
<table id="mytd">
    • good
    • 0
    • 件
通報する
この回答へのお礼

id=""というタグがあるのですね。これは便利そうです。
早速やってみたところ、見事にできました。
便利なタグなのでいろいろな使い方ができそうです。ありがとうございました。

通報する
お礼日時：2006/11/17 14:08

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報