如何在 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 属性将表格扩展至浏览器标签页大小。

示例

以下是使用 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>

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/