html中table样式_table样式设置

全栈程序员站长

发布于 2022-11-05 09:02:22

5.7K00

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

如果想在网页中建一个如下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>