问一个关于html的问题！
代码：
<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代码和样式的太长了没全拷过来了~）
运行结果：
回答
table下面的标签有限制，tbody、thead、tfoot。然后他们下面又只能有tr。
当然，table下面直接tr也是可以得，较新浏览器会理解为在tbody里面
你想要的或许是caption?<caption>我的标题</caption>
table 里面只允许有 tr, td, th, thead, tbody, tfoot, caption 这些标签，其它的标签非标准的，非标准的标签没有统一的处理规则，但大多数的浏览器不会报错，只会按自己的逻辑去处理，所以什么样的结果都是可能的。
你的需求首先要定义一个caption，注意要紧贴在<table>的后面
<caption>总价格：</caption>然后如果你希望 caption 在表格的下方，需要通过css来控制
caption { caption-side: bottom;
}
以上是 问一个关于html的问题！ 的全部内容， 来源链接： utcz.com/a/27338.html
