ツボです。～立体的でない線で表を作る

100万ポイント山分け！1日5回検索で1ポイントもらえる

16110134

ホーム | 日記 | プロフィール

2008年03月30日

(4)

テーマ：私のPC生活(7578)

カテゴリ：私のツボ

　　　　　表を作る場合、皆さんはどう書いていますか？

　　　　　細い線で区切られた表を作りたいわけですが、

　　　　　表の上下左右をそれぞれ設定していくとか、

　　　　　セルを重ねて表示するとか。

　　　　　今までは、前者の方法を使っていたのですが、

　　　　　今日は、後者の方法をあれこれと試していました。

　　　　　「 style="border-collapse:collapse;"」を使うのですが、

　　　　　慣れればこの方が楽かしら？

　　　　　ただね、「table cellpadding="5" style="border:1px solid #CCCCCC"」

　　　　　いつも画像につけている枠線ですが、

　　　　　これだと、表の外枠しか表現されないんですよね？

　　　　　「table border="1" bordercolor="#CCCCCC" cellpadding="5"」

　　　　　これとの違いがいまいち理解できないんですよ…

　　　　　ほぼ一日いろいろ調べたり試していますが、

　　　　　脳みその回路が足りないようです…(-_-;)

　　　　　皆さんはどうしていますか？

なんだか、お花見どころじゃないようなお天気…
でも、お花が長持ちしてくれるかな…？

＊ももち・・・？＊

ルクシリーズ

お気に入りの記事を「いいね！」で応援しよう

最終更新日 2008年03月30日 15時47分30秒
コメント(4) | コメントを書く

■コメント

Re:ツボです。～立体的でない線で表を作る(03/30)

うららべっちさん

久々にスタイルシートを見ると、さっぱり覚えてないことに気づきました。前はそれなりに試行錯誤したのに…。
後のHTMLだけで指定するのだと、罫線が二重線になりますよね。cellspacing="0"を付けると、二重線がくっついて太線のようになります。スタイルシートでborderをsolidにしてると単線に見えます。 cellspacing="10とかにしても、単線のままで中身との余白が広がる感じです。（Win IE6.0）
わたしの場合、やってみてわからなかったら、そのデザインを避けてしまいます（汗）。だから覚えないのねぇ～。 (2008年03月30日 16時38分54秒)

返事を書く

うららべっちさんへ

そら豆さん

ありがとうございます。

一番分からなかったのは、
セルの上下左右を同時にスタイル設定する書き方だったんですが、
だいぶ分かってきました。

<table cellpadding="5" style="border:1px solid #CCCCCC" cellspacing="0"><tr><td>本文</td><td style="border-left:1px solid #CCCCCC">本文</td></tr><tr><td style="border-top:1px solid #CCCCCC">本文</td><td style="border-left:1px solid #CCCCCC;border-top:1px solid #cccccc">本文</td></tr></table>

これで、グレーの細いラインで表を書いていくことが出来ました。

;で区切って書けばいいんですよね？

<td style="border-left:1px solid #CCCCCC">は『れつせん』
;border-top:1px solid #cccccc　を『れつうえ』と単語登録して、
書いていくようにしてみたところです。
やはり、borderをdottedとか、dashedとかdoubleで変化を付けやすいし。
style="border-collapse:collapse;"　を使ってセルの線を重ねて表示するよりは、
表現しやすいかもしれませんね。
(2008年03月30日 18時57分26秒)

返事を書く

Re:ツボです。～立体的でない線で表を作る(03/30)

さくらもち市長さん

tableタグの属性は、出来ることが制限されがちなので
私もスタイルシートで細かく設定する方法を使いますね。
tableタグを使うときは、「border=0 cellspacing=0 cellpadding=0」
をまず書くのがクセみたいになってます。
border-collapseも便利ですが、対応していないブラウザも
あるようなので滅多に使いません。

一般的な表ではtableタグが便利で書きやすいのですが
大きな表になると、表示に時間がかかることもあって
複雑な表になるときは divタグを使うようにしています。
[tr]のように「行」の設定がないので
慣れるまですごくややこしく思えますが。
(2008年03月31日 00時38分17秒)

返事を書く

さくらもち市長さんへ

そら豆さん

(人´･ω･｀o)感謝♪です～。

style="border-collapse:collapse;"　だとそうなんですね～
divタグをもう少しお勉強したいと思います。
(2008年03月31日 00時50分15秒)

返事を書く