1. 程式人生 > >table表格細邊框最簡單樣式

table表格細邊框最簡單樣式

建table是,最簡單的是:

<table border="1">
  <tr>
      <td>123abc</td>
      <td>123abc</td>
      <td>123abc</td>
  </tr>
 </table>

效果如圖:

看效果簡直醜的不行啊。

改下:

<table border="0" cellpadding="3" cellspacing="1" bgcolor="#c1c1c1">
  <tr bgcolor="#FFFFFF">
      <td>123abc</td>
      <td>123abc</td>
      <td>123abc</td>
  </tr>
 </table>

效果:

是不是好多了?

關鍵點:

cellpadding :內容中間的空隙,如果將3調整成30,看看效果


cellspacing:表格中的邊的留空,如果調成10,看效果

是不是很像很齊的div?

或者,用css:

1.

    table{ 
    border-collapse:collapse; 
    } 
    table tr td{ 
    border:1px solid red; 
    } 
2.
  table tr td{ 
		border:1px solid red; 
    } 
    table{ 
		border:1px solid red; 
		border-top-width:0px; 
    }