HTML表格

table标签 -- 代表HTML表格

• table标签是成对出现的,以<table>开始,以</table>结束
• 属性
  • Common -- 一般属性
  • summary -- 代表表格的摘要说明
  • width -- 代表表格的宽度
  • border -- 代表表格边框(此属性应该使用CSS实现)
  • cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
  • cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
• table，中文"表格"的意思

示例

<table width="80%" border="1">
    <tr>
        <th>种类</th>
        <th>数量</th>
        <th>售价</th>
        <th>净赚</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>1000</td>
        <td>5</td>
        <td>3</td>
    </tr>
    <tr>
        <td>香蕉</td>
        <td>500</td>
        <td>5</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>桃子</td>
        <td>7000</td>
        <td>8</td>
        <td>6</td>
    </tr>
</table>

HTML tr 标签

tr标签 -- 代表HTML表格中的一行

• tr标签是成对出现的,以<tr>开始,</tr>结束
• 属性
  • Common -- 一般属性
  • align -- 代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify(两端对齐))(此属性应该使用CSS实现)
  • valign -- 代表行的垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
• tr，是"table row"的缩写，中文"表行"

HTML th 标签

th标签 -- 代表HTML表格中的表头

• th标签是成对出现的,以<th>开始,</th>结束
• 属性
  • Common -- 一般属性
  • abbr -- 代表表头的简写
  • axis -- 对单元格在概念上分类
  • colspan -- 一行跨越多列
  • headers -- 连接表格的数据与表头
  • rowspan -- 一列跨越多行
  • scope -- 定义行或列的表头
  • align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify(两端对齐))(此属性应该使用CSS实现)
  • valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
• th，是"table header cell"的缩写，中文"表头单元格"

HTML td 标签

td标签 -- 代表HTML表格中的一个单元格

• td标签是成对出现的,以<td>开始,</td>结束
• 属性
  • Common -- 一般属性
  • abbr -- 代表表头的简写
  • axis -- 对单元格在概念上分类
  • colspan -- 一行跨越多列
  • headers -- 连接表格的数据与表头
  • rowspan -- 一列跨越多行
  • scope -- 定义行或列的表头
  • align -- 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify(两端对齐))(此属性应该使用CSS实现)
  • valign -- 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐))(此属性应该使用CSS实现)
• td，是"table data cell"的缩写，中文"表中的数据单元"

HTML cellpadding与cellspacing属性

先介绍一些概念

• 单元格(cell) -- 表格的内容
• 单元格边距(表格填充)(cellpadding) -- 代表单元格外面的一个距离,用于隔开单元格与单元格空间
• 单元格间距(表格间距)(cellspacing) -- 代表表格边框与单元格补白的距离,也是单元格补白之间的距离
• 引用网址:http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspacing/

上图说明了表格的几个属性,其中黑色部分就是单元格(cell)，白色的区域是单元格边距(表格填充)，灰色的区域是单元格间距(表格间距)。

 HTML rowspan 属性

rowspan可以实现HTML表格中一列跨越多行

• rowspan通常使用在td与th标签中
• row:行,span:跨度,跨距,范围

 HTML colspan 属性

colspan 属性 -- 可以实现HTML表格中一行跨越多列

• colspan通常使用在td与th标签中
• col:列,span:跨度,跨距,范围

自定义列样式

表格一般都是一行一行的存在的,通过使用colgroup,col与css,可以个性化的显示一个列.

HTML colgroup 标签

colgroup 标签 -- 表示对HTML表格进行结构化的分区,在此分区中可以通过使用col定义每列表格的样式

• colgroup标签是成对出现的,以<colgroup>开始,以</colgroup>结束
• 属性
  • Common -- 一般属性
  • span -- 定义一个colgroup跨越的列数,默认值为1

 

HTML col 标签

col标签 -- 可以对HTML表格结构化分区后的一个或几个区域使用同样的样式行

• col标签是单独出现的,<col />
• 属性
  • Common -- 一般属性
  • span -- 定义一个col跨越的列数,默认值为1

示例

<table border="1">
    <colgroup>
        <col />
        <col class="yellow" />
        <col />
        <col span="2" class="blue" />
    </colgroup>

 <tr>
        <th>种类</th>
        <th>数量</th>
        <th>售价</th>
        <th>净赚</th>
    </tr>
    <tr>
        <td>苹果</td>
        <td>1000</td>
        <td>5</td>
        <td>3</td>
    </tr>

 </table>

表格躯干

表格可以分为表头thead,表体tbody和表脚tfoot,一般我们不用这种定义方式,因为这样会使问题变的很复杂,而且现在已经很少使用了

 HTML thead 标签

thead标签 -- 表示HTML表头

表格的头部thead,可以使用单独的样式定义表头,并且在打印时可以在分页的上部打印表头.

HTML tbody 标签

tbody 标签 -- 表示HTML表体

浏览器显示表格时,通常是完全下载表格后,再全部显示,所以当表格很长时,可以使用tbody分段显示.

HTML tfoot 标签

tfoot 标签 -- 表示HTML表脚

表格的表脚tfoot,可以使用单独的样式定义表脚,并且在打印时可以在分页的下部打印表脚.