HTML中的表格

2022-12-16 133

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： HTML中的表格

一.基本表格

来看下基本表盒中要用到的标签吧：

<tablle></table>代表整个表格。

在table标签中可以使用border标签设置表格的边框的宽度，width设置宽度，height设置高度。

align="center"可以使我们的整个表格居中，也可以使我们表格中的某个特定行里的内容都居中，也可以单独使某一行中的某一列的一个元素单独居中

width后面可以赋值多少像素，也可以写成百分比形式，高度也是如此。

<tr></tr>代表行，<td></td>代表列

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML表格</title>
  </head>
  <body>
    <!-- 3行3列的table -->
    <!-- border用来设置边框的宽度，1px表示1像素 -->
    <!-- <table border="1px" width="300px" height="200px"> -->
    <!-- 还可以写成百分比的方式。 -->
    <!-- 整个表格居中可以用align="center" -->
    <table border="1px" width="50%" height="200px" align="center">
      <!-- 第一行 -->
      <tr>
        <!-- 第一个单元格 -->
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <!-- 第二行 -->
      <!-- 第二行中的数字居中 -->
      <tr align="center">
        <!-- 第二个单元格 -->
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <!-- 单独一个数字居中 -->
        <td align="center">3</td>
      </tr>
    </table>
  </body>
</html>

运行结果为：

二.单元格合并

行合并：rowspan

列合并：colspan

下面来看代码示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表格单元格的合并</title>
  </head>
  <body>
    <table width="50%" border="1px">
      <tr>
        <td>1</td>
        <!-- colspan表示列合并，合并2个。 -->
        <td colspan="2">xy</td>
        <!-- <td>y</td> -->
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <!-- rowspan表示行合并，2表示合并两个。 -->
        <td rowspan="2">KINGford</td>
      </tr>
      <tr>
        <td>1</td>
        <td>1</td>
        <!-- <td>ford</td> -->
      </tr>
    </table>
  </body>
</html>

运行结果：

三.th标签

使用了th标签后，th可以代替td做单元格，th中的内容会自动加粗，会自动居中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>th标签</title>
  </head>
  <body>
    <table border="1px" width="50%">
      <tr>
        <!-- <td>员工编号</td>
        <td>员工姓名</td>
        <td>员工薪资</td> -->
        <!-- th可以代替td做单元格，th中的内容会自动加粗，会自动居中。 -->
        <th>员工编号</th>
        <th>员工姓名</th>
        <th>员工薪资</th>
      </tr>
      <tr>
        <td>7369</td>
        <td>SMITH</td>
        <td>800.0</td>
      </tr>
      <tr>
        <td>7370</td>
        <td>KING</td>
        <td>8000.0</td>
      </tr>
    </table>
  </body>
</html>

运行结果：

可以看到员工编号那一行th中的内容会自动加粗，会自动居中。

四.thead tbody tfoot标签

一个table可以被thead tbody tfoot分隔为三部分.

这个语法主要是为了后期javascript提供方便.

代码如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>thead tbody tfoot</title>
  </head>
  <body>
    <!-- 一个table可以被thead tbody tfoot分隔为三部分。 -->
    <!-- 这个语法主要是为了后期javascript提供方便。 -->
    <table border="1px" width="50%">
      <thead>
        <tr>
          <th>员工编号</th>
          <th>员工姓名</th>
          <th>员工薪资</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>7369</td>
          <td>SMITH</td>
          <td>800.0</td>
        </tr>
        <tr>
          <td>7370</td>
          <td>KING</td>
          <td>8000.0</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>x</td>
          <td>y</td>
          <td>z</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>