HTML中的table標簽是制作表格的標簽,而table格線的設置是表格外觀中最容易被忽略的重要設置之一。在HTML中,table格線有兩種設置方式:
1. 使用border 屬性
table標簽可以通過設置border屬性來控制格線的寬度,例如:
<table border="1"> <tr> <td>單元格1</td> <td>單元格2</td> </tr> </table>上述代碼中border屬性被設置為1,表示表格的邊框寬度為1像素。如下圖所示: ![border屬性設置](https://i.imgur.com/jaDWA5X.png) 不設置border屬性,表格則不會出現格線。 2. 使用CSS樣式 除了上述方式,我們還可以使用CSS樣式表對表格的格線進行控制。通過設置border-collapse屬性,可以控制表格的邊框是否合并為單一邊框。將border-collapse屬性值設置為collapse,則表格的邊框將會合并,如下代碼:
<style type="text/css"> table{ border-collapse: collapse; } td{ border: 1px solid #000; } </style> <table> <tr> <td>單元格1</td> <td>單元格2</td> </tr> </table>上述代碼中,通過設置table的border-collapse屬性為collapse來合并表格邊框為單一邊框,同時設置td標簽的邊框為1像素實現表格的格線,如下圖所示: ![CSS樣式設置](https://i.imgur.com/1gsBpYG.png) 總結 通過上面兩種方式,我們可以對HTML中的table標簽進行格線設置。除此之外,我們還可以使用CSS中的border、outline、box-shadow等屬性對格線進行更為精細的控制。需要注意的是,表格的格線不僅僅是協助我們更好地查看表格數據的輔助線條,也是表格樣式中必不可少的元素之一。