HTML5基础语法与标签(五)

整体介绍

表格的基本使用 1)表格标签 复杂表格 1)单元格的合并 2)表格其他特性

表格标签

认识表格

<table>、<tr>和<td>标签

<table>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
    </tr>
    <tr>
        <td>I</td>
        <td>J</td>
        <td>K</td>
        <td>L</td>
    </tr>
</table>

<table>的border属性

为了让表格能够显示边框，<table>标签通常有border属性

<table border=“1”>…</table>

其中1代表边框宽1像素

<table>的caption属性

<caption>是表格的标题，它常常作为<table>的第一个子元素(即所有tr之前)出现

th标签

<th>是”标题小格”，可以替代<td>的作用，表示标题小格

<tr>
  <th>第一季度</th>
  <th>第二季度</th>
  <th>第三季度</th>
  <th>第四季度</th>
</tr>

td、th是同一级别，可嵌套在tr中

单元格的合并

colspan属性

colspan属性用来设置td或者th的列跨度

<table border="1">
    <tr>
        <td colspan="2">A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td colspan="3">E</td>
    </tr>
    <tr>
        <td>F</td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
    </tr>
</table>

rowspan属性

rowspan属性用来设置td或者th的行跨度

<table border="1">
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td rowspan="2">F</td>
        <td>G</td>
        <td rowspan="3">H</td>
    </tr>
    <tr>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td>K</td>
        <td>L</td>
        <td>M</td>
    </tr>
</table>

表格的其它特性

<thead>、<tbody>、<tfoot>标签

1. <thead>标签定义表头
2. <tbody>标签定义表核心内容
3. <tfoot>标签定义表脚，通常是汇总行

thead可以包括多个tr,tr包括th

<table border="1"  width="400">
        <thead>
            <tr>
               <th></th>
               <th colspan="2">第一季度</th>
               <th colspan="2">第二季度</th>
               <th colspan="2">第三季度</th>
               <th colspan="2">第四季度</th>
           </tr>
           <tr>
               <th></th>
               <th>国内</th>
               <th>国外</th>
               <th>国内</th>
               <th>国外</th>
               <th>国内</th>
               <th>国外</th>
               <th>国内</th>
               <th>国外</th>
           </tr>
       <thead>
       <tbody>
          <tr>
              <th>手机</th>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
          </tr>
          <tr>
              <th>农产品</th>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
         </tr>
          <tr>
              <th>水产品</th>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
              <td>123</td>
         </tr>
      </tbody>
      <tfoot>
          <tr>
              <th>汇总</th>
              <td>369</td>
              <td>369</td>
              <td>369</td>
              <td>369</td>
              <td>369</td>
              <td>369</td>
              <td>369</td>
              <td>369</td>
         </tr>
      </tfoot>
    </table>
</body>

cellspacing、cellpadding属性

1. cellpadding属性定义了表格单元的内容和边框之间的空间 已经废弃，使用CSS替代它
2. cellspacing属性（使用百分比或像素）定义了两个单元格 之间空间的大小，已经废弃，使用CSS替代它 说明：虽然被废弃了，但是也生效，实际开发中也可以使用