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