スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランク - FC2 Blog Rankingブログ村
--.--.-- [--] - --:-- | スポンサー広告

自動改行でテーブルを使う時の注意点

テーブルを使ったら段落がたくさん出来ちゃって記事がアウアウなことになってるブログをよく見かける。特にまっぴぃのところで。というか、まっぴぃのところでw
大体HTMLでテーブルを書く時は↓こんなかんじで書くわな。

<table summary="表のサンプル" cellspacing="0" cellpadding="0" border="1" width="200px">
<caption>表のサンプル</caption>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>

これを実際に表示させたらこう↓

表のサンプル
AB
CD


なるはずなんだけど、自動改行にチェック入れてるとこうなる↓











表のサンプル
A B
C D


で、なんでやねん。ってなるわけだが、それは自動改行だからだ。
自動改行ってのは、
こうやって管理画面で文章を書いている時に
ENTERを押せば勝手に改行してくれているわけで、
実際のHTMLでは以下のようになっている。

で、なんでやねん。ってなるわけだが、それは自動改行だからだ。<br />
自動改行ってのは、<br />
こうやって管理画面で書いている時に<br />
ENTER押せば勝手に改行してくれているわけで、<br />
実際のHTMLでは以下のようになっている。<br />


すなわち、さっきのテーブルタグを自動改行のまま書いてしまうと上のように段落がたくさん出来てしまうわけで、そのHTMLは以下のようになっている。

<table summary="表のサンプル" cellspacing="0" cellpadding="0" border="1" width="200px"><br />
<caption>表のサンプル</caption><br />
<tr><br />
<td>A</td><br />
<td>B</td><br />
</tr><br />
<tr><br />
<td>C</td><br />
<td>D</td><br />
</tr><br />
</table>

じゃあ、どうすればいいのか。
答えは簡単、詰めればいいのさ~ららる~。

<table summary="表のサンプル" cellspacing="0" cellpadding="0" border="1" width="200px"><caption>表のサンプル</caption><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>

応用編 : スタイルシートで「幅」と「枠」と「枠と文字のスペース」と「背景」を変えてみる。
一本でもにんじん
0円でも(・∀・)イキロ
一本でもにんじん
二足でもサンダル
三艘でもヨット
四粒でもごま塩
五台でもロケット
六羽でも七面鳥
七匹でも
八頭でもくじら
九杯でもジュース
十個でもいちご

HTML (オレンジ文字がスタイル指定してある部分)

<table summary="一本でもにんじん" class="e-table" cellspacing="0" cellpadding="0">
<caption>一本でもにんじん</caption>
<th>0円でも</th>
<th>(・∀・)イキロ</th>
<tr>
<td>一本でも</td>
<td>にんじん</td>
</tr>
<tr>
<td class="blue">二足でも</td>
<td>サンダル</td>
</tr>
<tr>
<td class="ore">三艘でも</td>
<td class="blue">ヨット</td>
</tr>
<tr>
<td>四粒でも</td>
<td>ごま塩</td>
</tr>
<tr class="gre">
<td>五台でも</td>
<td>ロケット</td>
</tr>
<tr class="yell">
<td>六羽でも</td>
<td>七面鳥</td>
</tr>
<tr class="ore">
<td>七匹でも</td>
<td>蜂</td>
</tr>
<tr class="pink">
<td>八頭でも</td>
<td>くじら</td>
</tr>
<tr class="pur">
<td>九杯でも</td>
<td>ジュース</td>
</tr>
<tr class="blue">
<td>十個でも</td>
<td>いちご</td>
</tr>
</table>

CSS

/* テーブル */
table.e-table {
width: 90%;/* 幅 */
border-collapse: collapse;/* 隣接するセルのボーダーを重ねて表示 */
font: nomal 12px Georgia,Arial, Helvetica, sans-serif;/* フォントの種類 */
font-family: Georgia;/* フォントの種類 */
margin: 0 auto;/* テーブルの周りの空間 */
border: 1px solid #cfcfcf;/* 枠の太さ、形状、色 */
voice-family: "¥"}¥"";/* ハック */
voice-family: inherit;/* ハック */
font-size: 12px;/* フォントの大きさ */
}

html>table.e-table {font-size: 12px;}/* フォントの大きさ */

table.e-table caption {
padding: 0;/* 表題の周りの空間 */
line-height: 2.5;/* 表題の上下文字幅 */
font-weight: bold;/* 表題の文字の太さ */
}

table.e-table th {
padding: 0 5px;/* セルと文字のスペース */
border: 1px solid #cfcfcf;/* セルの枠の太さ、形状、色 */
}

table.e-table td {
padding: 0 5px;/* セルと文字のスペース */
border: 1px solid #cfcfcf;/* セルの枠の太さ、形状、色 */
}

td.blue { background: #dfefff;}/* セルの背景色(水色) */
td.ore { background: #ffefdf;}/* セルの背景色(オレンジ) */

tr.blue { background: #dfefff;}/* セルの背景色(水色) */
tr.pink { background: #ffeeee;}/* セルの背景色(ピンク) */
tr.yell { background: #ffffde;}/* セルの背景色(黄色) */
tr.gre { background: #efffde;}/* セルの背景色(緑) */
tr.pur { background: #ffefff;}/* セルの背景色(青みのあるピンク) */
tr.ore { background: #ffefdf;}/* セルの背景色(オレンジ) */

実際表示されているのと、HTMLとCSSを見比べればなんとなくわかってくるはず!
ブログランク - FC2 Blog Rankingブログ村
2007.11.03 [Sat] - 16:26 | FC2 | TB(0) | CO(2) - Open&Close
<< 何回Bダッシュで死ねば気がすむの?HOME特攻野郎Aチーム >>

コメント

Re:  --- posted-by, まっぴぃ

なるほどねーようやく理解したw
ありがとw

ってことでブログもなおせましたw

Re:  --- posted-by, ピーチ

よかったw
今度からは大丈夫だね!

コメントの投稿

>> 禁止ワード <<
管理者のみ表示

トラックバック

http://castleofpeach.blog57.fc2.com/tb.php/902-ff2b0f4b
この記事にトラックバックする(FC2ブログユーザー)

最近の更新記事

カレンダー

09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

過去の記事

全ての記事を表示する

管理人@ピーチ

マビノギ樽鯖8ch在住 : 神出鬼没
ゲームキャラ * 中の人

このサイトについて

ピーチのお城へようこそです。
このサイトは管理人ピーチの自己満足なサイトです。宣伝や荒しなどのコメントやトラックバック、非人道的なコメントや他の閲覧者の気分を害するようなコメントなどは、管理人の自己判断で消すことがあります。ご了承ください。なお、当ブログはフィクションです。それではごゆっくりとどうぞ。

携帯から読む

QRコード

訪問ありがとう

ついったー

FC2Ad

  .

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。