如何在 HTML 中创建表格？

HTML 表格 允许我们在网页上将数据排列成行和列。

我们使用 <table> 标签 在 HTML 中创建表格。表格由行和列组成。可以使用一个或多个 <th>、<tr> 和 <td> 元素来设置表格标题、行和列以及表格数据。

  • 表格行由 <tr> 标签 定义。要设置表格标题，我们使用 <th> 标签。要在表格单元格中插入数据，请使用 <td> 标签。

  • HTML 中的表格由表格单元格组成，这些单元格位于表格的行和列中。

  • 表格标题由 <th>...</th> 定义。<th> 内的数据是表格列的标题。

  • 每个表格单元格都由 <td>...</td> 标签定义。<td> 标签内的内容是表格行和列的内容。

  • 每个表格行都以 <tr> ....</tr> 标签开头。

  • 我们使用样式表为表格创建边框。

示例

以下是一个在 HTML 中创建表格的示例程序。

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid green;
      }
   </style>
<body>
   <h2>Count</h2>
   <table>
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>12</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
   </tr>
   <tr>
      <td>35</td>
      <td>21</td>
      <td>34</td>
      <td>00</td>
      <td>8</td>
      <td>75</td>
      <td>24</td>
   </tr>
</body>
</html>

示例

以下是在 HTML 中创建表格的另一个示例程序。

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table>
      <tr>
         <th>Name</th>
         <th>RollNo</th>
      </tr>
      <tr>
         <td>Jason</td>
         <td>28</td>
      </tr>
      <tr>
         <td>Yadav</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
   </table>
</body>
</html>

现在，我们尝试使用 style 属性将表格扩展到浏览器选项卡大小。

示例

以下是在 HTML 中使用 style 属性将表格扩展到浏览器选项卡大小的示例程序。

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th>Name</th>
         <th>RollNo</th>
      </tr>
      <tr>
         <td>Jason</td>
         <td>28</td>
      </tr>
      <tr>
         <td>Yadav</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
   </table>
</body>
</html>

更新于： 2023-09-06

32K+ 次查看

启动你的 职业生涯

通过完成课程获得认证

开始学习
广告