一、表格标签
1、表格简介
表格由 table
标签来定义。每个表格均有若干行(由tr
标签定义),每行被分割为若干单元格(由td
标签定义)。 类比:excel表格&网页中的表格
2、表格的作用
之前,web开发人员过去也常常使用表格来完成整个网页布局,结构嵌套复杂修改维护困难,现在已经被DIV+CSS布局所取代。
现在,用于显示、展示数据。(能够简捷迅速地查找或呈现不同类型的数据及它们之间的关系)
注意:现在HTML表格应该用于展现表格数据,而不是用来实现网页布局!
3、表格基本标签
-
table
-
语法: <table></table>
-
作用:定义表格
-
-
tr
-
语法: <tr></tr>
-
作用:定义表格中的行
-
-
td
-
语法: <td></td>
-
作用:定义表格数据(table data) 单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
-
默认样式:内容水平居左,垂直居中
-
-
th
-
语法:<th></th>
-
作用:表示表头单元格,通常在行或列的开始处,定义行或列包含的数据类型
-
默认样式:字体加粗,内容水平居中,垂直居中
-
4.Type属性
-
width\height
-
作用:定义表格的宽或高
-
注:省略单位 默认px
-
-
border
-
作用:使用表格的边框属性可以显示一个带有边框的表格。
-
注意:如果不定义边框属性,表格将不显示边框。
-
-
cellpadding
-
作用:定义单元格中内容和边框之间的间距
-
-
cellspacing
-
作用:单元格和单元格之间的间距
-
th/td属性
-
width\height
-
作用:定义单元格宽度、高度
-
注意:省略单位 默认px
-
-
align
-
作用:单元格水平方向的对齐方式
-
取值
-
left左对齐
-
center 居中对齐
-
right 右对齐
-
-
-
valign
-
作用:单元格垂直方向的对齐方式
-
取值
-
top顶对齐
-
middle居中对齐
-
bottom底部对齐
-
-
5. 表格结构标签
-
caption
-
语法:<caption></caption>
-
作用:定义表格的标题
-
默认样式:居中于表格之上
-
注意: caption 标签必须紧随 table 标签之后
-
-
thead
-
语法:<thead></thead>
-
作用:用于组合 HTML 表格的表头内容
-
-
tbody
-
语法:<thead></thead>
-
作用:用于组合 HTML 表格的主体内容
-
提示:一个表格允许包含多个<tbody>
-
-
tfoot
-
语法:<tfoot></tfoot>
-
作用:用于组合 HTML 表格的页脚内容
-
-
总结
-
每个表格只能定义一个标题<caption>
-
thead,tbody,tfoot通常配合适用,用于划分表格语义,实现长表格分步加载,或通过改变结构顺序,优先加载tbody
-
6. 合并单元格
-
rowspan
-
作用:跨行合并
-
colspan
-
作用:跨列合并
-
-
操作步骤
-
确定是合并行还是合并列
-
找到目标单元格,添加合并属性如:<td rowspan="2"> 电话 </td>
-
删除多余单元格
-
7. 表格总结
-
未定宽度的表格、单元格适应内容
-
同一行只识别一个高,取最大值
-
同一列只识别一个宽,取最大值
-
表格可以包含其他HTML标签以及表格