再来学一遍前端-HTML table详解

159 阅读1分钟

最近闲来无事,在各种技术网站翻看前端内容。有一部视频教程的标题让我绕有兴趣!《字节前端工程呕心沥血大作 价值3w教程…》!于是我赶紧满怀热情投入学习中。但看到其中一段教程后,瞬间理解了master影片中那句台词:“他们不教真的啊”?这就给了我写这篇文章的动力。

HTML标签里的<table>标签组,这里将其称之为标签组,是因为只要有<table>标签,必定就要有<tr><td>

其基本格式为: 这样的结构基本上可以满足表格的使用了,也可以说浏览器用来渲染出一个表格足够了。(已经能够满足需求了)但对于人来说,其实还是多少有些欠缺的。也为了浏览器更好的渲染<table>表格标签。我们还需要加上如下的标签。

可以分为释义和结构两部分

一、释义

<caption>表格的名称,顾名思义就是给表格取个名字,一个表格只能取一个名字

<caption>main_table</caption>

二、结构

<colgroup>用于对表格的列进行分组 <col width="100px">每一个col标签就代表一列,可以在上面设置该列的宽度。最后一列如不设置则占有<table>表格剩余的宽度

<colgroup><col width="100px" /><colgroup>

<thead>表格的头部区域,一般用于放置表格的列标题

<thead></thead>

<tbody>表格的主体,就像一个html页面的body一样,放主要展现的内容

<tbody></table>

<tfoot>表格的页脚

<tfoot></tfoot>

接下来说一下<th>为每一列的列标题,最好包含在<thead>

<th></th>

最后总结一下,一个基本完整的<table>表格应该长这个样子