实现细线表格的两种方法
方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
/*用于让表格边框合并为一条实线 */
border-collapse: collapse;
}
table,
th,
td {
/* 定义单元格边框的样式，这里设置为1像素的黑色实线 */
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
</body>
</html>
方法二
cellspacing=“1px” 将单元格之间的距离设置为1px
bgcolor=“black” 将表格的背景设置为黑色
bgcolor=“white” 将单元格的颜色设置为白色
从而达到细线表格的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
text-align: center;
}
</style>
</head>
<body>
<table align="center" bgcolor="black" width="400px" height="300px" cellspacing="1px">
<tr bgcolor="white">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr bgcolor="white">
<td>张三</td>
<td>男</td>
<td>11</td>
</tr>
</table>
</body>
</html>
787
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
