HTMLのtableタグをCSS(borderやbackground)で装飾するサンプル

HTMLに直接スタイルを記述しているtableタグをHTMLとCSSに分離する具体例です。HTMLコードがシンプルになり、CSSによる装飾を一度に変更でき、いいことばかりです。

概要

  1. tableclassを追加し、そのclassがついたtableにはすべて同じスタイルが適用されるようにします。

  2. classごとにスタイルを使い分けられるようになります。tableのデフォルト設定を変更する必要はありません。

メリット

  1. HTMLコードがシンプルになります。

  2. tableの装飾を変更したくなれば、CSSを編集することで同じclassがついたtableを一度に変更できます。メンテナンス効率が向上します。

テンプレートのHTMLを編集

  1. 変更のHTMLコードは次のとおりです。2668文字です。参考:マクロミルの詳細情報 | おウチで稼ぐお小遣い

    <table cellspacing="4" cellpadding="6" bgcolor="#ffe4e1" align="center" style="border-bottom: lightpink 3px double; border-left: lightpink 1px solid; border-top: lightpink 1px solid; border-right: lightpink 3px double"><tbody><tr align="center">
    <td colspan="2" color="white" style="border-bottom: lightpink 3px dotted; border-left: lightpink 3px dotted; border-top: lightpink 3px dotted; border-right: lightpink 3px dotted"><br />
    <span style="font-size:large;"><b>マクロミルの詳細</b></span></td></tr>
    <tr align="center" bgcolor="#ffffff"><td colspan="2"><a href="http://monitor.macromill.com/int/?entry_kbn=240&int_id=Z7088572A" target="_blank" title="マクロミルへ登録"><img src="http://monitor.macromill.com/int/img/banner468_60.gif" border="0" alt="マクロミルリンクバナー" width="468" height="60" title="マクロミルへ登録" /></a></td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">交換可能</td><td style="border:3px solid #FFCCCC">現金・Amazonギフト券・図書カード・VJAギフトカード</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">ポイント移行取引サイト</td><td style="border:3px solid #FFCCCC">PeX・Gポイント・Yahoo!ポイント・SBI証券SBIポイント(移行時の手数料無料)</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">主な換金取引銀行</td><td style="border:3px solid #FFCCCC">楽天銀行・ジャパンネット銀行・ゆうちょ銀行・他金融機関</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">手数料最安換金先</td><td style="border:3px solid #FFCCCC">三菱東京UFJ銀行・みずほ銀行・三井住友銀行</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">レート</td><td style="border:3px solid #FFCCCC">1pt=1円</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">最低換金額</td><td style="border:3px solid #FFCCCC">500pt(500円)~</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">ポイント有効期限</td><td style="border:3px solid #FFCCCC">1年  但し登録情報更新手続きをすると延長されるので実質期限なし</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">紹介制度</td><td style="border:3px solid #FFCCCC">詳細は続きページ参照(<b>上バナーから登録</b>で<b><span style="color:#FF0000">20ptプレゼント</span></b>・条件付)</td></tr>
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">携帯端末対応機種</td><td style="border:3px solid #FFCCCC">スマホ対応アンケートあり  対応機種は下記リンク参照</td></tr>
    
    <tr bgcolor="#ffffff"><td style="border:3px solid #FFCCCC" align="center">その他</td><td style="border:3px solid #FFCCCC">PC向けスマホ向け両方のアンケートが届きます。<br />
    ※推奨環境はコチラ→<a href="http://research-panel.jp/specs/" target="_blank" title="PC推奨環境">確認する</a>
    ※スマホ推奨環境はコチラ→<a href="https://www.pa-engine.net/macromill/web/faq/detail.asp?Option=0&FAQID=479&baID=3&NodeID=156&DispNodeID=1&CID=0&Text=&Attrs=&Field=1&KW=0&KWAnd=1&AspPage=LST&strkind=9&Page=0&Rows=10&NB=&SearchID=&Bind=FALSE" target="_blank" title="スマホ推奨環境">確認する</a>
    </td></tr>
    </tbody></table>
  2. 変更のHTMLコードは次のとおりです。1429文字です。文字数が概算で54%に減りました。HTMLに直接書かれていたスタイルを省き、class3ヶ所に追加しました。また、いくつかのタグを変更したり追加/割愛しました。

    <table class="table-type1" cellspacing="4" cellpadding="6" summary="マクロミルでポイント換金詳細">
    <tr><td class="table-type1-title" colspan="2">マクロミルの詳細</td></tr>
    <tr><td class="table-type1-ad" colspan="2"><a href="http://monitor.macromill.com/int/?entry_kbn=240&int_id=Z7088572A" target="_blank" title="マクロミルへ登録"><img src="http://monitor.macromill.com/int/img/banner468_60.gif" alt="マクロミルリンクバナー" width="468" height="60" title="マクロミルへ登録" /></a></td></tr>
    <tr><td>交換可能</td><td>現金・Amazonギフト券・図書カード・VJAギフトカード</td></tr>
    <tr><td>ポイント移行取引サイト</td><td>PeX・Gポイント・Yahoo!ポイント・SBI証券SBIポイント(移行時の手数料無料)</td></tr>
    <tr><td>主な換金取引銀行</td><td>楽天銀行・ジャパンネット銀行・ゆうちょ銀行・他金融機関</td></tr>
    <tr><td>手数料最安換金先</td><td>三菱東京UFJ銀行・みずほ銀行・三井住友銀行</td></tr>
    <tr><td>レート</td><td>1pt=1円</td></tr>
    <tr><td>最低換金額</td><td>500pt(500円)~</td></tr>
    <tr><td>ポイント有効期限</td><td>1年  但し登録情報更新手続きをすると延長されるので実質期限なし</td></tr>
    <tr><td>紹介制度</td><td>詳細は続きページ参照(<em>上バナーから登録</em>で<em style="color:#f00">20ptプレゼント</em>・条件付)</td></tr>
    <tr><td>携帯端末対応機種</td><td>スマホ対応アンケートあり  対応機種は下記リンク参照</td></tr>
    <tr><td>その他</td><td>PC向けスマホ向け両方のアンケートが届きます。
    <ul>
    <li>推奨環境はコチラ→<a href="http://research-panel.jp/specs/" target="_blank" title="PC推奨環境">確認する</a></li>
    <li>スマホ推奨環境はコチラ→<a href="https://www.pa-engine.net/macromill/web/faq/detail.asp?Option=0&FAQID=479&baID=3&NodeID=156&DispNodeID=1&CID=0&Text=&Attrs=&Field=1&KW=0&KWAnd=1&AspPage=LST&strkind=9&Page=0&Rows=10&NB=&SearchID=&Bind=FALSE" target="_blank" title="スマホ推奨環境">確認する</a></li>
    </ul>
    </td></tr>
    </table>
    
  3. 新設するclass適用なしで、変更後のtableを表示すると次のとおりです。

    マクロミルの詳細
    マクロミルリンクバナー
    交換可能現金・Amazonギフト券・図書カード・VJAギフトカード
    ポイント移行取引サイトPeX・Gポイント・Yahoo!ポイント・SBI証券SBIポイント(移行時の手数料無料)
    主な換金取引銀行楽天銀行・ジャパンネット銀行・ゆうちょ銀行・他金融機関
    手数料最安換金先三菱東京UFJ銀行・みずほ銀行・三井住友銀行
    レート1pt=1円
    最低換金額500pt(500円)~
    ポイント有効期限1年  但し登録情報更新手続きをすると延長されるので実質期限なし
    紹介制度詳細は続きページ参照(上バナーから登録20ptプレゼント・条件付)
    携帯端末対応機種スマホ対応アンケートあり  対応機種は下記リンク参照
    その他PC向けスマホ向け両方のアンケートが届きます。

テンプレートのCSSを編集

  1. テンプレートのCSS編集で次のコードを追加します。テンプレートでtableに関するコードが書かれている付近に追加すると、今後のメンテナンス時に混乱しにくいです。

    .table-type1{background:#ffe4e1;border:1px solid lightpink;border-right:3px double lightpink;border-bottom:3px double lightpink;border-collapse:separate;border-spacing:4px;}
    .table-type1 .table-type1-title{border:3px dotted lightpink;text-align:center;font-size:large;font-weight:700;padding:1em 0;background:transparent;}
    .table-type1 .table-type1-ad{text-align:center;border:0;}
    .table-type1 td{background:#fff;border:3px solid #fcc;}
    .table-type1 td:first-child{text-align:center;}
    
  2. スタイルが適用されると次のとおり意図したレイアウトになります。

    マクロミルの詳細
    マクロミルリンクバナー
    交換可能現金・Amazonギフト券・図書カード・VJAギフトカード
    ポイント移行取引サイトPeX・Gポイント・Yahoo!ポイント・SBI証券SBIポイント(移行時の手数料無料)
    主な換金取引銀行楽天銀行・ジャパンネット銀行・ゆうちょ銀行・他金融機関
    手数料最安換金先三菱東京UFJ銀行・みずほ銀行・三井住友銀行
    レート1pt=1円
    最低換金額500pt(500円)~
    ポイント有効期限1年  但し登録情報更新手続きをすると延長されるので実質期限なし
    紹介制度詳細は続きページ参照(上バナーから登録20ptプレゼント・条件付)
    携帯端末対応機種スマホ対応アンケートあり  対応機種は下記リンク参照
    その他PC向けスマホ向け両方のアンケートが届きます。
  3. クラス名は分かりやすいものならtable-type1にする必要はなく、任意で好きなものを設定できます。同じ要領でテーブルの装飾パターンをクラス分けしておけば、いろいろなスタイルのテーブルをクラス指定だけで使えるようになります。

この記事について

  1. テンプレート利用者さんからの質問の返答として作成しました。

    table に関する質問です。 
    記事で表などを作成した際に、外枠(border)の太さを設定しても表示はすべて1pxになってしまいます。最初はプラウザの関係かと思い、他のプラウザでも確認してみましたが、結果は変わりませんでした。 
    初期設定がされているのかと思い、スタイルシートを確認してみたところ、デフォルト設定で 
    
    table{border-collapse:collapse;border-spacing:0;} 
    table,td,th{border:1px solid #777;} 
    
    という場所を見つけました。 
    これが優先されているのかと考え、この2行を /* */ で囲み解除すると、記事の編集ページで指定した通りの表を表示することには成功したのですが、今度はサイトマップのページにあった表の枠線が全て消えてしまいました。 
    
    記事内で作成する表(テーブル)の外枠などの細かい設定は各記事の編集ページで任意に行うことができ、尚且つサイトマップの枠線も残すためにはどうすればいいのでしょうか? 
    
    現在のデフォルト設定は、初期の状態に以下の1行を追加して使用しています。 
    .no-border,.no-border td,.no-border th{border:0;} 
    
    お時間のあるときで結構ですので、よろしくお願いいたします。 
    2013年02月24日(日) 21:34 時間前 そら
  2. テンプレートの使用方法ではなく一般的なHTMLとCSSの解説なので、当方が返答するのは不適当です。しかし、ニーズがありそうな部分でもあるので記事にしました。

  3. 質問の読み始めから記事作成完了まで2時間15分でした。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)