天天看點
傳回

HTML中CSS 添加左縮進和表格邊框說明（去掉左右下邊框）

1、在HTML中加自定義的格式

（第一段代碼）

<!doctype html>

<html >

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>*****表</title>

  <STYLE>

      BODY  {  background-color : #FFFFFF;  font-family : Verdana;  font-size : 10pt;color : Black;}

      TR,TD{  font-family : Verdana;  font-size : 10pt;  color : Black;}

 #noborder{border:0;} 

 #topborder{border-left:none;border-right:none; border-bottom:none;}

 leftindent2{margin-left:2em;}

 leftindent5{margin-left:5em;}

  </STYLE>                   

 </head>

其中，<style></style>标簽中自定義了BODY，TR,TD格式，以及自定義noborder（沒有周圍邊框），topborder（隻有頂邊框），leftindent2（左縮進兩個字元），leftindent5（左縮進5個字元），另外在引用時，body，TR,TD，leftindent2，leftindent5直接以對應标簽來引用（<body></body>    <tr></tr>   <td></td>   <leftindent2></leftindent2>   <leftindent5></leftindent5>），标簽當中的内容會以标簽設定好的格式顯示。

2、引用設定好的标簽

（第二段代碼）

<body>  

  <H1 align=center><font size="5">*******表</font></h1>

  <P>***元</P>  

  <table width="100%" style="BORDER-COLLAPSE: collapse" bordercolorlight="#000000" bordercolordark="#000000" id="noborder">      

///注：首先表是分外面大表的邊框和各個單元格的邊框。當時，大表和裡面各個單元格的邊框都顯示；時，大表和裡面各個單元格的邊框都不顯示；border>"1"時，隻有外面大表的邊框變粗，單元格邊框不變。style="BORDER-COLLAPSE: collapse"意思是各個單元格邊框與外面邊框和其他單元格邊框進行覆寫（即隻顯示一條線（兩個邊框線顯示一條，一條與無邊框顯示一條，無邊框與無邊框顯示無邊框）），而如果是把style="BORDER-COLLAPSE: collapse"換成cellspacing="0"，那麼是相鄰邊框進行重疊（兩個邊框線顯示一條加粗線，一條與無邊框顯示一條，無邊框與無邊框顯示無邊框）。id="noborder"，這裡是引用上面定義好的無邊框線，因為是在table标簽中出現，這樣的話就會把大表的外邊框去掉，但單元格邊框是不變的，這樣由于有style="BORDER-COLLAPSE: collapse"照樣會顯示線條的（但其實已經把外邊框去掉了），另外當定義那裡用的是#noborder則引用時寫id="noborder"；而當 定義那裡用的是 .noborder則引用時寫calss="noborder"；當沒有點和#号時，用<noborder>内容</noborder>。/

<tr>

  <td align="center">列1</td>

  <td align="center">列2</td>

  <td align="center">列3</td>

  <td align="center">列4</td>

  <td align="center">列5</td>

  </tr>

  <tr>

  <td align="left">一、*******行</td>

  <td align="center">1</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td align="left">二、*******行</td>

  <td align="center">2</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td align="left">三、*******行</td>

  <td align="center">3</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>1.*******二行</leftindent2></td>     ///注：在這裡縮進用的是<leftindent2></leftindent2>，因為前面定義的是沒有加點和#号，如果加的話後面即使用id， class調用好像也不行，不知道為什麼///

  <td align="center">4</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>2.*******二行</leftindent2></td>

  <td align="center">5</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>3.*******二行</leftindent2></td>

  <td align="center">6</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>4.*******二行</leftindent2></td>

  <td align="center">7</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>*******二行</leftindent2></td>

  <td align="center">8</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent5>*******三行</leftindent5></td>

  <td align="center">9</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td align="left">四、*******行</td>

  <td align="center">10</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>1.*******二行</leftindent2></td>

  <td align="center">11</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>2.*******二行</leftindent2></td>

  <td align="center">12</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>3.*******二行</leftindent2></td>

  <td align="center">13</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td><leftindent2>4.*******二行</leftindent2></td>

  <td align="center">14</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td align="left">五、*******行</td>

  <td align="center">15</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td align="left">六、*******行</td>

  <td align="center">16</td>

  <td align="center"></td>

  <td align="center"></td>

  <td align="center"></td>

  </tr>

  <tr>

  <td colspan="5" align="left" id="topborder">補充說明：</td>    ///注：隻保留上邊框

  </tr>

  <tr>

  <td colspan="5" align="left" id="noborder">1.末尾行</td>      ///注：去掉所有邊框

  </tr>

  <tr>

  <td colspan="5" align="left" id="noborder">2.末尾行</td>     ///注：去掉所有邊框

  </tr>

  </table>

 </body>

</html>

3、結果：

圖檔

HTML中CSS 添加左縮進和表格邊框說明（去掉左右下邊框）
html css
上一篇: css3 下邊框緩緩劃過_CSS3 邊框
下一篇: CSS表格設定CSS表格設定

繼續閱讀