<!- -table的屬性，cellspacing設(shè)置單元格與單元格之前的距離，cellpadding設(shè)置單元格內(nèi)容與單元格邊框的距離，align設(shè)置表格的顯示位置- ->

實(shí)現(xiàn)細(xì)線表格

• 之前在table中設(shè)置單元格與單元格之間合并使用的cellspacing，但是它是有缺陷的。他沒有讓邊框完全合并只是拼到一起，所以你會(huì)發(fā)現(xiàn)這樣設(shè)置后，表格的線會(huì)很粗（實(shí)際上是設(shè)置邊框線寬度的兩倍）。
• 這個(gè)時(shí)候就可以通過css設(shè)置來讓它們完全合并，實(shí)現(xiàn)細(xì)表格線的效果。

  • border-collapse:collapse 讓單元格與邊框線完全合并

  • border-spacing:0 讓單元格與單元格邊框線距離為0，也就是完全合并

    <table border="1" cellspacing="0" cellpadding="3" width="300" height="120" align="center">
    <!- -caption是表格的標(biāo)題標(biāo)簽，只能寫在tabel里面，是表格專屬的標(biāo)簽 - ->
    <caption>我最喜歡的明星</caption>
    <!- -thead和tbody的作用在預(yù)加載，當(dāng)瀏覽器加載表格時(shí)，會(huì)優(yōu)先加載這兩個(gè)標(biāo)簽里面的數(shù)據(jù)，而table標(biāo)簽的屬性樣式等會(huì)后加載，在很多網(wǎng)站表格是不顯示邊框的所以先顯示數(shù)據(jù)的話，會(huì)讓用戶感覺打開速度更快 - ->
    <thead>
<tr>
    <!- -th是表頭標(biāo)簽，會(huì)自動(dòng)加粗垂直居中- ->
    <th>姓名</th> <th>年齡</th> <th>性別</th>
</tr>
</thead>
<tbody>
<tr>
<td>劉德華</td> <td>55</td> <td>男</td>
</tr>
<tr>
<td>林青霞</td> <td>50</td> <td rowspan="2">男/女</td>
    <!- -rowspan的作用是跨行合并，即把同一列兩行的單元格合并起來
    注意：如果是整列或者整行合并，一定要設(shè)置寬度或者高度，不然就會(huì)自適應(yīng)看不出是合并過的。- ->
    </tr>
<tr>
<td>張學(xué)友</td> <td>56</td>
</tr>
<tr>
<td>王祖賢</td> <td colspan="2">美女</td>
    <!- -colspan的作用是跨列合并，即把同一行兩列的單元格合并起來- ->
    </tr>
</tbody>
</table>