table添加正確的樣式

以前在做表格的時候，會在表格<table>標簽中添加一些屬性，來改變表格的樣式，經常用到的有這幾個

width 表格的寬度
border 表格邊框的寬度
cellpadding  單元邊沿與其內容之間的空白
cellspacing  單元格之間的空白

1、其中如果只設置了border="1"是這樣的  <table border="1"> 

 我相信沒有人用這么丑的表格。

2、如果設置了cellspacing="0" cellpadding="0"表格是這樣的 <table border="1" cellspacing="0" cellpadding="0">

好像好看了許多

但是很少人這么寫了，表格的樣式應該交給css，那么如果做一個帶邊線的表格要怎么做呢，首先給table加border樣式。會變成這樣

table {
    border: 1px solid #ccc;
}

那么cellpadding=“0”：單元格邊距等於0，其默認值為1px，其等同於css中的：{padding：0;}

cellspacing="0"：單元格間距等於0，其默認值為2px，其等同於css中的：border-collapse: collapse（邊框合並）

那么我們可以這樣寫，但這樣需要加<table border="1"> 

table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border:1px solid #ccc; border-collapse: collapse;} 

如果不想加<table border="1"> 需要設置table tr th和table tr td

table tr th, table tr td { border:1px solid #ccc; }
    table { width: 200px; text-align: center; border-collapse: collapse;} 

效果同上。這種比較推薦，畢竟結構樣式分離，控制起來比較好控制