テーブルタグをCSSにしたい

質問

Abi-Station式更新履歴管理のテーブルタグをCSSにして表示させたいと思っているのですが、
結構複雑でうまくCSSで表示出来ません。
【テーブルタグ表示サンプル】
http://ani.omegumi.com/whatnew.html
このようなテーブルタグをCSSにするにはどうしたらいいでしょうか？

また、どこかに変換してくれるソフトみたいなのはないでしょうか？

回答No.4

ORUKA1951 · ベストアンサー

面白そうなので・・・腕試しを兼ねて
・単なる順不同リストを、噴出しにデザインする。
・スタイルシートをはずしても良いように、文書構造は正しく作る。
・枠線は、スタイルシートにすべて記入することも可能だが、冗長になるためHTMLに記述する。
　印刷用スタイルシートや携帯端末用スタイルシートではdisp;ay: noneとして隠すことを前提とする。
[HTML]
<div id="message">
　　<p class="fig"
　　　　<img src="http://ani.omegumi.com/headline/image/osy.gif" width="82" height="78" alt="" class="" />
　　</p>
　　<ul id="message">
　　　　<li id="topLine">１行目の記事</li>
　　　　<li id="bottomLine">２行目の記事</li>
　　</ul>
　　<p>
　　　　<img src="http://ani.omegumi.com/headline/image/fukidashi_lt.gif" width="10" height="10" alt="" class="border left top" />
　　　　<img src="http://ani.omegumi.com/headline/image/fukidashi_rt.gif" width="10" height="10" alt="" class="border right top" />
　　　　<img src="http://ani.omegumi.com/headline/image/yaji2.gif" width="30" height="23" alt="" class="border right center" />
　　　　<img src="http://ani.omegumi.com/headline/image/fukidashi_lb.gif" width="10" height="10" alt="" class="border left bottom" />
　　　　<img src="http://ani.omegumi.com/headline/image/fukidashi_rb.gif" width="10" height="10" alt="" class="border right bottom" />
　　</p></div>

[CSS]
div#message{
　　display:block;
　　position: relative;
　　border: solid 1px rgb(100,100,100);
　　margin: 10px 160px 10px 20px;
}
div#message p.fig{
　　position: absolute;
　　right: -100px;
　　margin: 0px;
}
div#message p img.border{
　　position: absolute;
　　background-color: white;
}
div#message p img.left{
　　left: -1px;
}
div#message p img.right{
　　right: -1px;
}
div#message p img.top{
　　top: -1px;
}
div#message p img.bottom{
　　bottom: -1px;
}
div#message p img.center{
　　top: 20px;
　　right: -30px
}
div#message ul{
　　display: block;
　　margin: 10px;
　　padding-left: 0px;
}
div#message ul li{
　　display: block;
　　margin-left: 0px;
　　padding-left: 20px;
　　text-align: right;
}
div#message ul > li:first-child {
　　border-bottom: 1px rgb(100,100,100) solid;
　　text-align: left;
}

補足

ありがとうございます。
【テーブルタグ表示サンプル】と同じURLへテスト的に表示して見ました。
左上の角丸表示部分はＯＫでしたが、
右上・左下・右下の角丸画像と、
噴出し画像の位置がずれてしまいました。
いろいろ数値等変えてやって見たいと思います。

回答No.6

nori_007

>更新履歴管理の表示部分はテーブルタグを使用しているので、
>なんとかあの表示方法をテーブルタグを使わずに表示させたいと思っています。

たぶん定義リストを利用すれば出来ると思います。

ですが、下記のサイトは参考にならないでしょうか。
http://c-brains.jp/blog/wsg/08/06/09-174329.php

上記のサイトは、CSS に関して色々なテクニックを紹介されています。参考になると思います。

個人的には、更新履歴ならテーブルでも問題は無いと思います。

ご確認ください。

回答No.5

ORUKA1951

え～とですね。
インデントを分かりやすくするために行頭に全角スペースがあります。
それをタブに変換してください。
HTML/CSSエディタで全角と半角のスペースが区別できるようにしておいたら分かりやすいです。

回答No.3

koke29

もしや…CSSに<table></table>とかも全て埋め込んだclassの指定で
テーブルを作りたいということでしょうか…？？

補足

そう言う事になりますかね・・・
やりたい事はフルCSSを目指しており、
テーブル表示をなくそうと思ったのですが、
更新履歴管理の表示部分はテーブルタグを使用しているので、
なんとかあの表示方法をテーブルタグを使わずに表示させたいと思っています。

回答No.2

noname#77303

こんにちは。

CSSに関する少しの知識があれば、テーブルをCSSで装飾する事自体は難しいことでは無いと思います。
出来れば、何をどのように装飾したいのか、具体的に教えていただけませんか。（例えば、枠を黒くして点線にしたい・・・など。）

もし、答えるのが面倒と言う場合でも、参考URLだけでも目を通して理解していただければ、きっと成功するはずです。

参考URL：

http://park16.wakwak.com/~html-css/css/

補足

ありがとうございます。
参考にさせて頂きます。
やりたい事はフルCSSを目指しており、
テーブル表示をなくそうと思ったのですが、
更新履歴管理の表示部分はテーブルタグを使用しているので、
なんとかあの表示方法をテーブルタグを使わずに表示させたいと思っています。

回答No.1

kura07

角丸テーブルを作りたいのですか？
私は作ったとこがないのでわかりませんが、
参考URLに載っていると思いますので、参考にしてください。

参考URL：

http://heo.jp/tag/kowaza/omoshiro/10.html

補足

ありがとうございます。
ですが、角丸テーブルを作りたいわけではありません。
テーブルタグを全て排除したい為、
CSSでレイアウトしたいのです。