以前表格主要是用来布局、显示数据,随着技术的更新迭代表格布局逐渐被淘汰,现多用于展示数据
表格通过 table
标签来定义,一个完整的表格包含表格的 caption
(标题)、tr
(行)、td
(列)、thead
(表头)、th
(表头单元格)、tbody
(主体内容)、tfoot
(表格页脚)
各个标签的作用
table
用于定义表格caption
定义表格的标题,属于表格的一部分,写在表格标签的内部,使用该标签时必须放在 table 标签的第一个子标签位置(紧随 table 标签),标题中的内容默认在表格中居中显示thead
用于定义表格中的表头部分th
写在表头的内部,用来定义表头单元格,主要通过数据的性质进行数据分类,写在该标签中的内容默认会加粗、居中tbody
表格的主体部分,用来包裹tr
、td
标签,该标签未设置时浏览器会默认创建tr
定义表格的行,一个表格可以有多行,每行可以有多列,只有定义了行才能定义列td
表格单元格,用来定义列,数据就是放在该标签中,数据默认左对齐tfoot
定义表格的页脚,一般放在表格的底部
表格基本结构、默认效果
<table>
<!-- 定义表格的标题 -->
<caption>表格标题</caption>
<!-- 表格的表头 -->
<thead>
<tr>
<!-- 表头单元格 -->
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<!-- 表格主体部分 -->
<tbody>
<tr>
<td>小小</td>
<td>girl</td>
<td>119</td>
</tr>
</tbody>
<!-- 表格的页脚 -->
<tfoot>
<tr>
<td>页脚</td>
<td>页脚</td>
<td>页脚</td>
</tr>
</tfoot>
</table>
各个标签常见的属性(控制样式的属性一般使用 CSS 来设置)
<table></table>
标签
width
设置表格的宽度height
设置表格的高(一般不设置)border
设置表格的边框,不包含表格的标题部分align
整个表格在网页中的对齐方式;left(左对齐)、center(居中对齐)、right(右对齐)cellpadding
用于设置单元格中的内容与单元格边沿的距离(四周)cellspacing
设置单元格之间的距离(四周)rules
设置表格的单元格边框是否可见;none (不可见)、all(显示行列之间的线条,非行列之间的线条不显示)、rows(显示行与行之间的边框)、cols(显示列于列之间的线条)bgcolor
设置整个表格的背景色(不包含表哥格标题部分)
设置了 width、border、align 后效果
<table width="500" border="1" align="center">