にほんブログ村 ブログブログ ブログノウハウへ にほんブログ村 ニュースブログ 面白ニュースへ にほんブログ村 地域生活(街) 中部ブログ 富士宮情報へ

2013年01月10日

テーブルを使ってみましょう。(1)

テーブルを使ってみましょう。(1)

そろそろ正月ボケを払拭するために、たまには本職のカテゴリーを。(笑)

例えばこういう項目を作成するとします。

                    11月度ブログ村
                  会    場             日    時
ふじブログ村       茶工房ちゃーみぃ        13日(火) 18:30~20:30
ぬまづブログ村     イーラ・パーク運営事務局   14日(水) 18:30~20:30
いずのくにブログ村   アクアカフェ           21日(水) 12:30~14:30
ふじのみやブログ村  M-netパソコンスクール    27日(火) 18:30~20:30
すそのブログ村     cafe 楽・風            30日(水) 18:00~20:00

このように文字数がバラバラだと、なかなか縦が綺麗に揃わないんですよね。

文字それぞれの1文字分の幅も異なるため、単純にスペースを補ってもダメ。

これがあるHTMLタグを使うことによって、このように難なく揃うんです。

11月度ブログ村
 会    場日    時
ふじブログ村茶工房ちゃーみぃ13日(火) 18:30~20:30
ぬまづブログ村イーラ・パーク運営事務局14日(水) 18:30~20:30
いずのくにブログ村アクア・カフェ21日(水) 12:30~14:30
ふじのみやブログ村M-netパソコンスクール27日(火) 18:30~20:30
すそのブログ村cafe 楽・風30日(水) 18:00~20:00


ということで、しばらくこのテクニックについて詳しく書いていこうと思います。

「テーブルを使ってみましょう。(2)」につづく。


同じカテゴリー(HTML)の記事画像
表作成のジェネレーター。
罫線。(コピー用)
罫線を入れる。(6)
罫線を入れる。(5)
罫線を入れる。(4)
罫線を入れる。(3)
罫線を入れる。(2)
罫線を入れる。(1)
画像を「クリックで拡大」する方法。改良版
画像にフチと文字入れ。(使用保留)
同じカテゴリー(HTML)の記事
 表作成のジェネレーター。 (2014-10-06 08:07)
 罫線。(コピー用) (2014-06-24 07:00)
 罫線を入れる。(6) (2014-06-23 07:00)
 罫線を入れる。(5) (2014-06-22 07:00)
 罫線を入れる。(4) (2014-06-21 15:00)

Posted by SemiPro(佐野進一) at 09:31│Comments(4)HTML
この記事へのコメント
あら~楽しみです
詳しく教えてくださいね、待ってます。
ミカンの皮むき失敗だらけでしたよ・・・・
Posted by ポコ at 2013年01月10日 10:27
ポコさん
このカテゴリは以前「わかって下さい。」で書いたように
記述が非常に面倒臭いです。
毎日ちょっとずつ進めて行きます。
Posted by SemiPro(佐野進一)SemiPro(佐野進一) at 2013年01月10日 11:20
自分のページの
ユーチューブの項目に使っていますが


記事の下の方に
下がってしまいますが、
教えてもらえますか。
Posted by かめくん at 2013年01月11日 19:39
かめくんさん
ソースをチェックしましたが、特におかしいところは見当たりません。
私も編集画面ではテーブルの上部にかなりの余白が出来ていますが、記事では正常に表示されます。
スタイルシートの方で設定が必要かもしれません。

あと、強いて言うなら
<td><th>(内容)</th></td>
とする必要はないと思います。
<th>が<td>の代わりで、見出し(=強調と中央揃え)なので
<th>~</th>で挟むところは外側の<td>~</td>は不要だと思います。
Posted by SemiPro(佐野進一)SemiPro(佐野進一) at 2013年01月11日 20:08
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

削除
テーブルを使ってみましょう。(1)
    コメント(4)