表 作り

表組み記法のスタイルシートも訂正しますた(・∀・)

上がデフォルト。　下がスタイルシート訂正後。

div.section table　　　　　表全体
div.section table tr th　　項目部分
div.section table tr td　　項目以外の部分

を いじってあります(・ω・)
※左端の項目の文字色は、記事を書くときに付けますた。

あと、これを応用して
昨日の《街》のバッドエンドリストと、終了時点リストも
表組み記法で書きますた(*´艸`)

文字数が違うと、スペースで頭を揃えるのって難しいんだけど
表にしてしまえば、綺麗に揃いまする(*´ω｀*)

ただ、これをケータイで見ると

画面の幅のせいで文字が縦になって読みづらいけど(-∀-；)
まぁ、ケータイで見るときの事は深く考えてましぇん(｀・ω・´)

詳しい やり方。

スタイルシートに

div.table01 table {
 width: auto;
 margin: 0px 0px 0px 30px;
 padding: 0px;
 border: none;
}

div.table01 table tr td {
 border: none;
 color: #000000;
 background-color: transparent;
 text-align: left;
 padding: 5px 10px;
}

div.table02 table {
 width: auto;
 margin: 0px 0px 0px 30px;
 padding: 0px;
 border: none;
}

div.table02 table tr td {
 border: none;
 color: #CCCCCC;
 background-color: transparent;
 text-align: left;
 padding: 5px 10px;
}

div.table02 table tr td a.keyword:link,
div.table02 table tr td a.keyword:visited {
 border-bottom: 1px solid #CCCCCC;
 color: #CCCCCC;
}

div.table02 table tr td a.keyword:hover {
 text-decoration: none;
 border-bottom: none;
 color: #ce415b;
 background-color: #e5c5c9;
}

と、指定して
記事を書く時に

<div class="table01">
|りんご|赤|1|
|みかん|だいだい|2|
</div>

<div class="table02">
|りんご|赤|1|
|みかん|だいだい|2|
</div>

と、表組み記法の前後にタグを書くと

りんご	赤	1
みかん	だいだい	2

りんご	赤	1
みかん	だいだい	2

と、こんなふうに なりまする(*∩∇∩)

これで、表のパターンが好きなだけ作れますよん♪