忍者ブログ

技術メモ

Home > ブログ > > [PR] Home > ブログ > HTML > 【テーブルに枠を設定する】

【テーブルに枠を設定する】

1.イメージを作成
  添付のイメージ(左上・左・左下・右上・右・右下・上・下)を作成
  ※サーバーにUpされているものを利用

2.CSSを作成
  以下のCSSを作成する
------------------------------------------------------------------------------------
/*-- フレーム左上隅 --*/
TD.frameLT
{
 MARGIN: 0 0 0 0;
 padding:0;
 background-image:url(image/2frame_LT.gif);
 width:7px; height:7px;
}
/*-- フレーム右上隅 --*/
TD.frameRT
{
 MARGIN: 0 0 0 0;
 padding:0;
 background-image:url(image/2frame_RT.gif);
 width:7px; height:7px;
}
/*-- フレーム左下隅 --*/
TD.frameLB
{
 MARGIN: 0 0 0 0;
 padding:0;
 background-image:url(image/2frame_LB.gif);
 width:7px; height:7px;
}
/*-- フレーム右下隅 --*/
TD.frameRB
{
 MARGIN: 0 0 0 0;
 padding:0;
 background-image:url(image/2frame_RB.gif);
 width:7px; height:7px;
}
/*-- フレーム上枠 --*/
TD.frameT
{
 MARGIN: 0 0 0 0;
 padding:0
 background-image:url(image/2frame_T.gif);
 background-repeat:repeat-x;
 height:7px;
}
/*-- フレーム下枠 --*/
TD.frameB
{
 MARGIN: 0 0 0 0;
 background-image:url(image/2frame_B.gif);
 background-repeat:repeat-x;
 height:7px;
}
/*-- フレーム左枠 --*/
TD.frameL
{
 background-image:url(image/2frame_L.gif);
 background-repeat:repeat-y;
 width:7px;
}
/*-- フレーム右枠 --*/
TD.frameR
{
 background-image:url(image/2frame_R.gif);background-repeat:repeat-y;
 width:7px;
}
------------------------------------------------------------------------------------


3.Tableを作成
  以下のTableを作成する
  ※CSS作成時に、top/bottomのwidthを100%に設定すると右線が消えるので注意
    (上下セル以外のセル幅の設定にもよるかもしれません)
------------------------------------------------------------------------------------
    <table>
      <tr>
        <td class="frameLT"></td>
        <td class="frameT"></td>
        <td class="frameRT"></td>
      </tr>
      <tr>
        <td class="frameL"></td>
        <td></td>
        <td class="frameR"></td>
      </tr>
      <tr>
        <td class="frameLB"></td>
        <td class="frameB"></td>
        <td class="frameRB"></td>
      </tr>
    </table>
------------------------------------------------------------------------------------
 

PR

Comment0 Comment

Comment Form

  • お名前name
  • タイトルtitle
  • メールアドレスmail address
  • URLurl
  • コメントcomment
  • パスワードpassword

PAGE TOP