如果想在網頁中建一個如下table表格應該怎么做呢？

首先建一個表<table>

<table>/*table標簽就是建一個表格*/
		<tr>/*tr標簽就是table row，即為表格中的一行*/
			<th>學號</th>/*th標簽即table head，就是表頭*/
			<th>姓名</th>
			<th>手機號</th>
			<th>家庭地址</th>
		</tr>
		<tr>
			<td>001</td>/*td為table data，即表中數據*/
			<td>Tom</td>
			<td>16345512349</td>
			<td>河南省鄭州市</td>
		</tr>
		<tr>
			<td>002</td>
			<td>Jim</td>
			<td>17532224349</td>
			<td>山東省青島市</td>
		</tr>
		<tr></tr>
	</table>

這樣做出的表格效果是這樣的：

那么怎么對它進行優化呢？我們對上述標簽添加樣式：

		<style>
			table{/*為頁面中所有的table標簽添加樣式*/
				width: 900px;/*設置table寬度*/
				margin: auto;/*讓表格居中顯示*/
				border: black 1px  solid;/*添加邊框*/
				border-spacing: 0px;去掉table/*標簽及其子標簽邊框之間的白色空隙*/
				border-collapse: collapse;/*去掉重合線*/
				
			}

			th{/*為頁面中所有的th標簽添加樣式*/
				border: black 1px  solid;/*添加邊框*/
			}
			td{/*為頁面中所有的td標簽添加樣式*/
				border: black 1px  solid;/*添加邊框*/
			}
			
		</style>

這樣我們就達到了想要的效果。

總結

以上是生活随笔為你收集整理的html中table样式_table样式设置(w3cschool)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。