Html中正确设置表格边线解析
2023-06-07 本文已影响0人
CarlosLynn
-
默认表格边框
我们给table表格添加边框后，代码如下：
<!DOCTYPE html>
<html>
<head>
<title>表格</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
table {
width: 400px;
}
table,
table td,
table th {
border: 1px solid #000000;
}
</style>
</head>
<body>
<body>
<table align="center" width="400" >
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 第1行 -->
<tr>
<td>小王</td>
<td>高数</td>
<td>98</td>
<td>
<a href="javascrpit:;">删除</a>
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>小深</td>
<td>高数</td>
<td>86</td>
<td> <a href="javascrpit:;">删除</a></td>
</tr>
<!-- 第2行 -->
<tr>
<td>小濛</td>
<td>高数</td>
<td>65</td>
<td><a href="javascript">删除</a></td>
</tr>
</tbody>
</table>
</body>
</body>
</html>
它的默认效果如下：
image.png
-
实现单边框方法一
核心思想：
1、设置BORDER=0 ；
2、再通过CSS，给Table加上1px的border-top,border-left；
3、然后再设置所有的td或者th的border-right,border-bottom；
代码:
<!DOCTYPE html>
<html>
<head>
<title>表格01</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
table {
margin-top: 100px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
text-align: center;
}
table th {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
}
table td {
border-left: 1px solid #000000;
border-top: 1px solid #000000;
}
</style>
</head>
<body>
<table align="center" width="400" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 第1行 -->
<tr>
<td>小王</td>
<td>高数</td>
<td>98</td>
<td>
<a href="javascrpit:;">删除</a>
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>小深</td>
<td>高数</td>
<td>86</td>
<td> <a href="javascrpit:;">删除</a></td>
</tr>
<!-- 第2行 -->
<tr>
<td>小濛</td>
<td>高数</td>
<td>65</td>
<td><a href="javascript">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
效果如下：
image.png
-
实现单边框方法二
核心思想：
1、给table设置css为border-collapse: collapse
2、设置所有td及th的css为border: 1px solid #000000;
代码：
<!DOCTYPE html>
<html>
<head>
<title>表格02</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
table {
margin-top: 100px;
width: 800px;
border: 1px solid #000000;
border-collapse: collapse;
text-align: center;
margin-left: auto;
margin-right: auto;
}
th,
td {
border: 1px solid #000000;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 第1行 -->
<tr>
<td>小王</td>
<td>高数</td>
<td>98</td>
<td>
<a href="javascrpit:;">删除</a>
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>小深</td>
<td>高数</td>
<td>86</td>
<td> <a href="javascrpit:;">删除</a></td>
</tr>
<!-- 第2行 -->
<tr>
<td>小濛</td>
<td>高数</td>
<td>65</td>
<td><a href="javascript">删除</a></td>
</tr>
<!-- 第3行 -->
<tr>
<td>小张</td>
<td>高数</td>
<td>69</td>
<td><a href="javascript">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
image.png
-
实现单边框方法三
核心思想：
1、将table的属性设置为：BORDER=0 、cellspacing=1 ；
2、设置table的背景色为即你要设置的table的边框颜色；
3、设置所有td背景色为#ffffff白色；
代码：
<!DOCTYPE html>
<html>
<head>
<title>表格03</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
table {
margin-top: 100px;
background-color: black;
text-align: center;
margin-left: auto;
margin-right: auto;
}
table th {
background-color: #ffffff;
}
table td {
background-color: #ffffff;
}
</style>
</head>
<body>
<table width="400" cellspacing="1" border="0">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 第1行 -->
<tr>
<td>小中</td>
<td>高数</td>
<td>98</td>
<td>
<a href="javascrpit:;">删除</a>
</td>
</tr>
<!-- 第2行 -->
<tr>
<td>小朱</td>
<td>高数</td>
<td>86</td>
<td> <a href="javascrpit:;">删除</a></td>
</tr>
<!-- 第2行 -->
<tr>
<td>小刘</td>
<td>高数</td>
<td>80</td>
<td><a href="javascript">删除</a></td>
</tr>
<!-- 第4行 -->
<tr>
<td>小健</td>
<td>高数</td>
<td>88</td>
<td><a href="javascript">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>
效果图：
image.png
