<!- -table的屬性,cellspacing設(shè)置單元格與單元格之前的距離,cellpadding設(shè)置單元格內(nèi)容與單元格邊框的距離,align設(shè)置表格的顯示位置- ->
實(shí)現(xiàn)細(xì)線表格
- 之前在table中設(shè)置單元格與單元格之間合并使用的cellspacing,但是它是有缺陷的。他沒有讓邊框完全合并只是拼到一起,所以你會發(fā)現(xiàn)這樣設(shè)置后,表格的線會很粗(實(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í),會優(yōu)先加載這兩個(gè)標(biāo)簽里面的數(shù)據(jù),而table標(biāo)簽的屬性樣式等會后加載,在很多網(wǎng)站表格是不顯示邊框的所以先顯示數(shù)據(jù)的話,會讓用戶感覺打開速度更快 - ->
<thead>
<tr>
<!- -th是表頭標(biāo)簽,會自動加粗垂直居中- ->
<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è)置寬度或者高度,不然就會自適應(yīng)看不出是合并過的。- ->
</tr>
<tr>
<td>張學(xué)友</td> <td>56</td>
</tr>
<tr>
<td>王祖賢</td> <td colspan="2">美女</td>
<!- -colspan的作用是跨列合并,即把同一行兩列的單元格合并起來- ->
</tr>
</tbody>
</table>