1.在 html 中使用一个表格代码如下:
<table>
<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>
显示的效果:
2.并没有表格的边框线,我们 需要加上这样一个代码:
<table border="1">
<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>
显示效果:
3.双边框用css显示
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{border:1px solid red;}
td{border:1px solid red;}
</style>
</head>
<body>
<table>
<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>
</body>
</html>
显示效果:
4.合并表格的双边框线
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
table{border:1px solid red; border-collapse:collapse;}
td{border:1px solid red;}
</style>
</head>
<body>
<table>
<tr><td>第一行第一列</td><td>第一行第二列</td></tr>
<tr><td>第二行第一列</td><td>第二行第二列</td></tr>
</table>
</body>
</html>
显示效果: