HTML表格

来源：互联网发布：日本电子行业知乎编辑：程序博客网时间：2024/04/29 00:57

表格由 <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 属性 -- 规定单元格可横跨的列数。
示例: