重生之半夜 重新学习table+javascript渲染表格-Day1

好好好，真就是🐟的记忆，table已经还给老师了！！

关于怎么去掉table间的缝隙（在table上，boder-collapse：collapse；即可），抓耳挠腮了半天 ，终于！！（是我的网抽搐了 ）

今天做一个渲染表格案例：

三步走战略：1.先写好固定的html表格 css样式（结构忘记截了 🈳️）

h1 {
            font-size: 16px;
            text-align: center;
        }

        table {
            margin: 0 auto;
            border-collapse: collapse;
        }

        tr>td {
            width: 200px;
            height: 50px;
            padding: 5px 20px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #555;

        }

2.声明我们要填写的相关数据 +是为了隐性转换数字类型

let name = prompt('请输入商品')
        let price = +prompt('请输入商品价格')
        let num = +prompt('请输入数量')
        let adr = prompt('请输入地址')
        let total = price * num

3.页面渲染出来（将我们写好的html插入进去，记得$变量写法 不用再+`号 ） 

 document.write(`
            <h1>订单确认</h1>
        <table>
            <tr>
                <td>商品名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>总价</td>
                <td>收货地址</td>
            </tr>

            <tr>
                <td> ${name} </td>
                <td>${price}元</td>
                <td>${num}</td>
                <td>${total}元</td>
                <td> ${adr}</td>
            </tr>
        </table>
    `
        )

最终展示效果：样式不完美，留着再复盘