表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
属性:
summary -- 代表表格的摘要说明
width -- 代表表格的宽度
border -- 代表表格边框(此属性应该使用CSS实现)
cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
示例:
<table border="1" width="200">
<tr><th>姓名<th><th>性别<th><th>年龄<th></tr>
<tr><td>张三<td><td>女 <td><td>20 <td></tr>
<tr><td>李四<td><td>男 <td><td>21 <td></tr>
<tr><td>王二<td><td>男 <td><td>22 <td></tr>
</table>
width -- 是表格的宽度,可以使用象素px或者百分比
border -- 是表格的边框的宽度,使用px表示,此属性应该使用CSS实现
tr -- 代表一行
th -- 代表表格头
td -- 代表一个单元格
HTML的tr标签
tr,是"table row"的缩写,中文"表行",tr标签代表HTML表格中的一行
属性 :
align -- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现)
valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
HTML的th标签
th,是"table header cell"的缩写,中文"表头单元格"
属性
abbr -- 代表表头的简写
axis -- 对单元格在概念上分类
colspan -- 一行跨越多列
headers -- 连接表格的数据与表头
rowspan -- 一列跨越多行
scope -- 定义行或列的表头
align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
HTML的td标签
td,是"table data cell"的缩写,中文"表中的数据单元"
属性
abbr -- 代表表头的简写
axis -- 对单元格在概念上分类
colspan -- 一行跨越多列
headers -- 连接表格的数据与表头
rowspan -- 一列跨越多行
scope -- 定义行或列的表头
align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现)
valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
HTML的cellspacing和cellpadding标签
单元格(cell) -- 表格的内容
单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
上图说明了表格的几个属性,其中黑色部分就是单元格(cell),白色的区域是单元格边距(表格填充),灰色的区域是单元格间距(表格间距)。
HTML rowspan 属性
rowspan 属性 --规定单元格可横跨的行数。
HTML colspan 属性
rowspan 属性 -- 规定单元格可横跨的列数。
示例:
<table border="1" width="350">
<tr><th>姓名</th><th colspan="2">性别</th></tr>
<tr><td>张三</td><td >女</td><td>20</td></tr>
<tr><td rowspan="2" >李四</td><td>男</td><td>21</td></tr>
<tr><td>男</td><td>22</td></tr>
</table>