PHP前端开发

如何在HTML中创建表格的行和列?

百变鹏仔 3个月前 (09-21) #HTML
文章标签 表格

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

我们使用

标签,在HTML中创建表格。一个表格由行和列组成。可以使用一个或多个和 标签定义。对于表行和列,我们分别在
元素来设置表头、行和列以及表格数据。

表格行由

标签内使用 、
标签。

示例

以下是创建表格行和列的示例程序。

立即学习“前端免费学习笔记(深入)”;

<!DOCTYPE html><html>   <style>      table {         border:1px solid black;         padding: 10px;      }      th, td{         border:1px solid black;         padding: 20px;      }   </style><body>   <h2>Tables in HTML</h2>   <table style="width: 100%">      <tr>         <th></th>         <th></th>         <th></th>      </tr>      <tr>         <td></td>         <td></td>         <td></td>      </tr>      <tr>         <td></td>         <td></td>         <td></td>      </tr>   </table></body></html>

示例

以下是另一个创建表格行和列的示例程序。

<!DOCTYPE html><html><head>   <style>      table, th, td {         border: 1px solid green;      }   </style></head><body>   <h2>Adding table rows and colomns in HTML</h2>   <table>      <tr>         <th>S.no</th>         <th>Name</th>         <th>Age</th>         <th>Country</th>      </tr>      <tr>         <td>1</td>         <td>Kohli</td>         <td>34</td>         <td>India</td>      </tr>      <tr>         <td>2</td>         <td>Rabada</td>         <td>29</td>         <td>South Africa</td>      </tr>      <tr>         <td>3</td>         <td>Starc</td>         <td>33</td>         <td>Australia</td>      </tr>   </table></body></html>

示例

下面是另一个用于创建表行和列的示例程序。

<!DOCTYPE html><html><head>   <style>      table, th, td {         border: 1px solid green;      }   </style></head><body>   <h2>Adding table rows and colomns in HTML</h2>   <table style="width:80%">      <caption>Cricketers...</caption>      <tr style="background-color: Mediumseagreen">         <th>S.no</th>         <th>Name</th>         <th>Age</th>         <th>Country</th>      </tr>      <tr>         <td>1</td>         <td>Kohli</td>         <td>34</td>         <td>India</td>      </tr>      <tr>         <td>2</td>         <td>Rabada</td>         <td>29</td>         <td>South Africa</td>      </tr>      <tr style="background-color: Mediumseagreen">         <td>3</td>         <td>Starc</td>         <td>33</td>         <td>Australia</td>      </tr>   </table></body></html>