（一）表格：
1.语法：
1.table>tr>th*5 + 回车/tab
2.tr>td*5 + 回车/tab
2.居中（放在head中的style里面）：
在head中
<style>
h2{
text-align: center;
}
</style>
2.表格加边框(放在里面即可)：
table,th,td{
border:1px solid #000;
}
1px是边框的宽度，#000是边框的颜色
3合并边框（放在head的style中） （1）
table{
border-collapse: collapse;
}
（2）两种合并方式： 在 HTML 和 CSS 里，border-spacing: 0;与border-collapse: collapse;都和表格边框样式相关，不过它们的作用有所不同。
- border-spacing: 0; border-spacing属性规定的是相邻单元格边框之间的间距。其默认值由浏览器决定，一般为2px。当你把border-spacing设成0时，相邻单元格边框之间就没有间距了。 要注意的是，border-spacing属性只有在border-collapse属性值为separate（默认值）时才会生效。以下是示例代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-spacing: 0;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在这个示例中，表格的相邻单元格边框之间没有间距。
- border-collapse: collapse; border-collapse属性用于定义表格边框的合并方式。它有两个常用值：separate和collapse。 separate：默认值，相邻单元格边框会分开显示。 collapse：相邻单元格边框会合并成一个单一的边框。 以下是示例代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
</body>
</html>
在这个示例中，相邻单元格的边框合并成了一个单一的边框。 总结 border-spacing: 0;是在相邻单元格边框分开显示时，让它们之间没有间距。 border-collapse: collapse;则是把相邻单元格的边框合并成一个单一的边框。 如果你希望表格边框之间没有间距，并且看起来像是一个整体，使用border-collapse: collapse;会更合适。
经过测试下来：使用table border-spacing: 0;会让边框更粗应为是重合不是合并
4.表格高度： 表格最低高度为刚好容纳文字的高度，即使参数（px）设置再小也是刚好容纳文字的高度
table{
border-collapse: collapse;
height: 80px;
}
综合实战1——渲染表格
（一）表格的固定内容
<!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>
/* 标题设置 */
h2{
/* 标题h2居中 */
text-align: center;
}
/* 调节边框的颜色和宽度 */
table,th,td{
border: 1px solid #000;
}
table{
/* 合并边框 */
border-collapse: collapse;
/* 表格的高度和宽度 */
height: 80px;
width: 600px;
/* 表格居中 */
margin: 0 auto;
text-align: center;
}
th{
padding:5px 30px;
I
</style>
</head>
<body>
<h2>订单确认</h2>
<!-- 显示表格 -->
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版plus</td>
<td>1999元</td>
<td>10</td>
<td>19990</td>
<td>武汉黑马1</td>
</tr>
</table>
</body>
</html>
（二）交互效果（使用js）（js写在body的
1.用户输入
<script>
/* 1.用户输入 */
let price = prompt("请输入商品价格");
let num = prompt("请输入商品数量");
let address = prompt("请输入收货地址");
/* 2.计算总额 */
let total = price*num;
/* 3.页面打开 */
</script>
此时price是字符型，因为要计算所以转换为整形
let price = +prompt//此时price是 整形
<!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>
/* 标题设置 */
h2{
/* 标题h2居中 */
text-align: center;
}
/* 调节边框的颜色和宽度 */
table,th,td{
border: 1px solid #000;
}
table{
/* 合并边框 */
border-collapse: collapse;
/* 表格的高度和宽度 */
height: 80px;
width: 600px;
/* 表格居中 */
margin: 0 auto;
text-align: center;
}
th{
padding:5px 30px;
I
</style>
</head>
<body>
<h2>订单确认</h2>
<!-- 显示表格 -->
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th> z
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版plus</td>
<td>1999元</td>
<td>10</td>
<td>19990</td>
<td>武汉黑马1</td>
</tr>
</table>
<script>
/* 1.用户输入 */
let price = +prompt("请输入商品价格");
let num = +prompt("请输入商品数量");
let address = prompt("请输入收货地址");
/* 2.计算总额 */
let total = price * num;
/* 3.页面打印渲染 */
</script>
</body>
</html>
2.渲染
（1）需求：打印表格并将数据打入表格中 （2）页面打印 ·语法：
document.write (` `);//反引号是模板字符串：这个可有可不有。但反引号支持换行，模板字符串支持换行
因为要打印，所以需要将表格代码放入
然后需要将固定值换成输入的变量
（三）成品
<!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>
/* 标题设置 */
h2{
/* 标题h2居中 */
text-align: center;
}
/* 调节边框的颜色和宽度 */
table,th,td{
border: 1px solid #000;
}
table{
/* 合并边框 */
border-collapse: collapse;
/* 表格的高度和宽度 */
height: 80px;
width: 600px;
/* 表格居中 */
margin: 0 auto;
text-align: center;
}
th{
padding:5px 30px;
I
</style>
</head>
<body>
<h2>订单确认</h2>
<!-- 显示表格 -->
<script>
/* 1.用户输入 */
let price = +prompt('请输入商品价格')
let num = +prompt('请输入商品数量')
let address = prompt('请输入收货地址')
/* 2.计算总额 */
let total = price * num
/* 3.页面打印渲染 */
/* 打印表格 */
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>总价</th> z
<th>收货地址</th>
</tr>
<tr>
<td>小米青春版plus</td>
<td>${price}元</td>
<td>${num}个</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
