问一个关于html的问题！

Question

代码：

 <table id="app">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>{{item.price | trueprice(item.price)}}</td>
                <td><button @click='down(index)' :disabled='item.count < 2' >-</button>
                    <p>{{item.count}}</p>
                <button @click='up(index)'  >+</button></td>
                <td><button @click='remove(index)'>移除</button></td>
            </tr>
        </tbody>
        <h2>总价格：</h2>
    </table>

请问为什么这个h2标签明明写在最下面但是会跑到整个表格的上面去呢？（本来有些vue代码和样式的太长了没全拷过来了~）

运行结果：

Answer 1

table下面的标签有限制，tbody、thead、tfoot。然后他们下面又只能有tr。

当然，table下面直接tr也是可以得，较新浏览器会理解为在tbody里面

你想要的或许是caption?<caption>我的标题</caption>

Answer 2

table 里面只允许有 tr, td, th, thead, tbody, tfoot, caption 这些标签，其它的标签非标准的，非标准的标签没有统一的处理规则，但大多数的浏览器不会报错，只会按自己的逻辑去处理，所以什么样的结果都是可能的。

你的需求首先要定义一个caption，注意要紧贴在<table>的后面

<caption>总价格：</caption>

然后如果你希望 caption 在表格的下方，需要通过css来控制

caption {
  caption-side: bottom;
}