HTML 表格标签 用于以表格形式显示数据（行 * 列）。一行中可以有多列。

我们可以使用 <table> 元素创建一个表格，通过 <tr>、<td> 和 <th> 元素来定义表格的行、表头和单元格数据。

HTML 表格用于管理页面的布局，例如页眉部分、导航栏、正文内容和页脚部分等。但建议使用 <div> 标签来管理页面的布局。

HTML 表格标签

标签描述
<table>定义一个表格。
<tr>定义表格中的一行。
<th>定义表格中的表头单元格。
<td>定义表格中的数据单元格。
<caption>定义表格的标题。
<colgroup>为表格中的一个或多个列指定样式。
<col>与 <colgroup> 元素一起使用，为每列指定列属性。
<tbody>将表格的主体内容分组。
<thead>将表格的头部内容分组。
<tfoot>将表格的页脚内容分组。

HTML 表格示例

让我们看一个 HTML 表格标签的示例。输出如上所示。

<table>
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
    <td>60</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Swati</td>
    <td>Sironi</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Chetna</td>
    <td>Singh</td>
    <td>72</td>
  </tr>
</table>

输出：

First_NameLast_NameMarks
SonooJaiswal60
JamesWilliam80
SwatiSironi82
ChetnaSingh72

在上面的 HTML 表格中，有 5 行和 3 列 = 5 * 3 = 15 个值。

带边框的 HTML 表格

有两种方法可以指定 HTML 表格的边框。

  1. 使用 HTML 表格的 border 属性
  2. 使用 CSS 的 border 属性

1) HTML 的 border 属性

你可以使用 HTML 的 border 属性指定表格的边框。border 属性定义了表格及其元素的边框。

<table border="1">
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
    <td>60</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Swati</td>
    <td>Sironi</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Chetna</td>
    <td>Singh</td>
    <td>72</td>
  </tr>
</table>

输出：

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72
该示例中的 border="1" 属性在表格中创建了一个简单的边框。 ## 2) CSS 的 border 属性 你也可以使用 CSS 的 border 属性来指定表格的边框样式。 
<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

<table>
  <tr>
    <th>First_Name</th>
    <th>Last_Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Sonoo</td>
    <td>Jaiswal</td>
    <td>60</td>
  </tr>
  <tr>
    <td>James</td>
    <td>William</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Swati</td>
    <td>Sironi</td>
    <td>82</td>
  </tr>
  <tr>
    <td>Chetna</td>
    <td>Singh</td>
    <td>72</td>
  </tr>
</table>

输出：

First_Name Last_Name Marks
Sonoo Jaiswal 60
James William 80
Swati Sironi 82
Chetna Singh 72

在上面的示例中，我们使用了 CSS 的 border 属性，并将边框样式设置为 1px solid black。此外，border-collapse: collapse 属性用于合并相邻边框，以获得更整齐的表格样式。

希望这些示例能帮助你理解 HTML 表格的基本用法和边框样式。

HTML带有单元格内边距的表格

可以通过两种方式指定HTML中表头和表数据的内边距：

  1. 使用HTML表格的cellpadding属性。
  2. 使用CSS中的padding属性。

HTML表格标签的cellpadding属性现在已经过时了，建议使用CSS来设置内边距。下面是CSS代码的示例：

<style>
  table, th, td {
    border: 1px solid pink;
    border-collapse: collapse;
  }
  th, td {
    padding: 10px;
  }
</style>

输出结果：

姓名姓氏分数
SonooJaiswal60
JamesWilliam80
SwatiSironi82
ChetnaSingh72

HTML表格宽度

我们可以使用CSS的width属性来指定HTML表格的宽度。可以使用像素或百分比来指定宽度。

根据需要调整表格的宽度。以下是显示具有宽度的表格的示例：

<style>
  table {
    width: 100%;
  }
</style>

示例：

<!DOCTYPE html>
<html>
<head>
  <title>表格</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 2px solid green;
      padding: 15px;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <th>1 标题</th>
      <th>1 标题</th>
      <th>1 标题</th>
    </tr>
    <tr>
      <td>1 数据</td>
      <td>1 数据</td>
      <td>1 数据</td>
    </tr>
    <tr>
      <td>2 数据</td>
      <td>2 数据</td>
      <td>2 数据</td>
    </tr>
    <tr>
      <td>3 数据</td>
      <td>3 数据</td>
      <td>3 数据</td>
    </tr>
  </table>
</body>
</html>

带有colspan的HTML表格

如果要使单元格跨越多列，可以使用colspan属性。

它将一个单元格/行分割成多个列，列的数量取决于colspan属性的值。

让我们看一个跨越两列的示例。

CSS代码：

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
  }
</style>

HTML代码：

<table style="width:100%">
  <tr>
    <th>姓名</th>
    <th colspan="2">联系信息</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>jane@example.com</td>
    <td>555-5678</td>
  </tr>
</table>

输出结果：

姓名联系信息
John Doejohn@example.com555-1234
Jane Smithjane@example.com555-5678

带有rowspan的HTML表格

如果要使单元格跨越多行，可以使用rowspan属性。

它将一个单元格/列分割成多个行，行的数量取决于rowspan属性的值。

让我们看一个跨越两行的示例。

CSS代码：

htmlCopy code<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
  }
</style>

HTML代码：

<table style="width:100%">
  <tr>
    <th>姓名</th>
    <th>信息</th>
  </tr>
  <tr>
    <td rowspan="2">John Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>555-1234</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>jane@example.com</td>
  </tr>
</table>

输出结果：

姓名信息
John Doejohn@example.com
555-1234
Jane Smithjane@example.com

HTML表格标题

HTML表格可以使用<caption>元素添加标题。标题位于表格上方。

以下是一个带有标题的示例。

CSS代码：

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
  th, td {
    padding: 5px;
  }
  caption {
    font-weight: bold;
    font-size: 20px;
  }
</style>

HTML代码：

<table style="width:100%">
  <caption>学生表</caption>
  <tr>
    <th>姓名</th>
    <th>分数</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>80</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>90</td>
  </tr>
</table>

注意：您还可以使用表中的不同CSS属性创建各种类型的表格。

支持的浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<table>是是是是是

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML面试题, HTML笔试题, HTML编程思想