在 HTML 中，咱们应用 <table> 标签来定义表格。HTML 中的表格和 Excel 中的表格是相似的，都包含行、列、单元格、表头等元素。然而 HTML 表格在性能方面远没有 Excel 表格弱小，HTML 表格不反对排序、求和、方差等数学计算，它个别用来展现数据。

在学习表格之前，咱们无妨先来看一段简略的 HTML 代码：

1.  <table border="1">2.  <tr>3.  <th>名称</th>4.  <th>官网</th>5.  <th>性质</th>6.  </tr>7.  <tr>8.  <td>C语言中文网</td>9.  <td>http://c.biancheng.net/</td>10.  <td>教育</td>11.  </tr>12.  <tr>13.  <td>百度</td>14.  <td>http://www.baidu.com/</td>15.  <td>搜寻</td>16.  </tr>17.  <tr>18.  <td>当当</td>19.  <td>http://www.dangdang.com/</td>20.  <td>图书</td>21.  </tr>22.  </table>

运行成果如下图：

这是一个 4 行 3 列的表格。第一行为表头，其余三行为内容。

在上述代码中，咱们应用了<table>、<tr>、<td> 及 <th> 四个标签：

  • 示意表格，表格的所有内容须要写在
    和
    之间。
  • <tr> 是 table row 的简称，示意表格的行。表格中有多少个 <tr> 标签就示意有多少行数据。
  • <td> 是 table datacell 的简称，示意表格的单元格，这才是真正寄存表格数据的标签。单元格的数据能够是文本、图片、列表、段落、表单、水平线、表格等多种形式。
  • <th> 是 table heading 的简称，示意表格的表头。<th> 其实是 <td> 单元格的一种变体，实质上还是一种单元格。<th> 个别位于第一行，充当每一列的题目。大多数的浏览器会把表头显示为粗体居中的文本。

    • 默认状况下，表格是没有边框的。然而咱们能够应用 <table> 标签中的 border 属性来设置表格的边框宽度，单位是像素（px）。本例中咱们将表格的边框宽度设置为 1px。留神，px 是默认的单位，不必显式指明。

    1. 表格的边框合并：

    仔细的读者可能曾经发现了，网页中常见的表格款式大多为单层边框，上例中展现的表格为双层边框。为了防止这种状况，咱们能够利用 CSS 中的 border-collapse 属性来设置表格的边框。border-collapse 是“边框塌陷”的意思，当属性值为 collapse 时，能够使表格的双边框变为单边框。

    示例代码如下：

    1.  <table border="1" style="border-collapse: collapse;">2.  <tr>3.  <th>名称</th>4.  <th>官网</th>5.  <th>性质</th>6.  </tr>7.  <tr>8.  <td>C语言中文网</td>9.  <td>http://c.biancheng.net/</td>10.  <td>教育</td>11.  </tr>12.  <tr>13.  <td>百度</td>14.  <td>http://www.baidu.com/</td>15.  <td>搜寻</td>16.  </tr>17.  <tr>18.  <td>当当</td>19.  <td>http://www.dangdang.com/</td>20.  <td>图书</td>21.  </tr>22.  </table>

    运行成果如下图所示：

    2. 表格的题目

    HTML 容许应用 <caption> 标签来为表格设置题目，题目用来形容表格的内容。

    咱们常见的表格个别都有题目，表格的题目应用 <caption> 标签来示意。默认状况下，表格的题目位于整个表格的第一行并且居中显示。一个表格只能有一个题目，也就是说 <table> 标签中只能有一个 <caption> 标签。

    请看上面的例子：

    1.  <table border="1" style="border-collapse: collapse;">2.  <caption>这是表格的题目</caption>3.  <tr>4.  <th>名称</th>5.  <th>官网</th>6.  <th>性质</th>7.  </tr>8.  <tr>9.  <td>C语言中文网</td>10.  <td>http://c.biancheng.net/</td>11.  <td>教育</td>12.  </tr>13.  <tr>14.  <td></td>15.  <td>http://www.baidu.com/</td>16.  <td>搜寻</td>17.  </tr>18.  <tr>19.  <td>当当</td>20.  <td>http://www.dangdang.com/</td>21.  <td>图书</td>22.  </tr>23.  </table>

    浏览器运行后果如图：

    3. 单元格的合并

    和 Excel 相似，HTML 也反对单元格的合并，包含跨行合并和跨列合并两种。

    • rowspan：示意跨行合并。在 HTML 代码中，容许咱们应用 rowspan 个性来表明单元格所要逾越的行数。
    • colspan：示意跨列合并。同样的，在 HTML 中，容许咱们应用 colspan 个性来表明单元格所要逾越的列数。

    具体格局如下：

    <td rowspan="n">单元格内容</td><td colspan="n">单元格内容</td>

    n 是一个整数，示意要合并的行数或者列数。

    此处需注意，不论是 rowspan 还是 colspan 都是 <td> 标签的属性。

    上面的例子中，咱们将表格第 1 列的第 3、4 行单元格合并（跨行合并），将第 4 行的第 2、3 列合并（跨列合并）。具体代码如下：

    1.  <table border="1" style="border-collapse: collapse;">2.  <tr>3.  <th>名称</th>4.  <th>官网</th>5.  <th>性质</th>6.  </tr>7.  <tr>8.  <td>C语言中文网</td>9.  <td>http://c.biancheng.net/</td>10.  <td>教育</td>11.  </tr>12.  <tr>13.  <td rowspan="2">百度</td>14.  <td>http://www.baidu.com/</td>15.  <td>搜寻</td>16.  </tr>17.  <tr>18.  <td colspan="2">http://www.dangdang.com/</td>19.  </tr>20.  </table>

    运行成果如图：

    通过运行后果能够发现：

    • rowspan 属性示意向下合并单元格，colspan 属性示意向右合并单元格。
    • 每次合并 n 个单元格都要少写 n-1 个<td>标签。

    提醒：即便一个单元格中没有任何内容，咱们仍需应用 <td> 或 <th> 元素来示意一个空单元格的存在，倡议在 <td> 或 <th> 中退出  （空格），否则低版本的 IE 可能无奈显示出这个单元格的边框。