使用表格标签及其属性设计表格

我们在本文中将执行的任务是使用<table>标签及其属性设计表格。为了创建表格的结构，我们使用<table>，然后使用属性来设计表格。

让我们深入本文，了解更多关于使用<table>标签及其属性创建表格的信息。我们使用<table>标签构建表格，并使用其属性来设计表格。单元格间距、单元格填充、边框、背景颜色和其他属性将用于设计表格。

HTML <table> 标签

有时我们需要在我们的网站或 Web 应用程序中以表格格式显示我们的数据。为此，HTML 中有一个表格标签，由<table>标签定义，并包含其他各种标签，如<tr>、<td>、<th>和<caption>，这些标签对于在我们的网页上完成表格中的数据是必要的。

表格经常用于数据分析，以比较两个或多个数据集，并将文本信息与相应的数值数据一起传达。

语法

以下是 HTML <table> 标签的语法。

<table>…</table>

现在，让我们看看下面的示例，以了解更多关于使用表格标签及其属性创建表格的信息。

示例

以下示例中，我们将使用<table>标签以及border属性来构建表格。

Open Compiler
<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6;">
   <table border="2">
      <tr>
         <th>Name</th>
         <th>Ipl_Team</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>Dhoni</td>
         <td>CSK</td>
         <td>India</td>
      </tr>
      <tr>
         <td>Butler</td>
         <td>RR</td>
         <td>England</td>
      </tr>
      <tr>
         <td>Williamson</td>
         <td>GT</td>
         <td>NewZealand</td>
      </tr>
      <tr>
         <td>Pooran</td>
         <td>LSG</td>
         <td>West-Indies</td>
      </tr>
   </table>
</body>
</html>

运行以上代码后，输出窗口将弹出，显示表格以及填充在表格中的数据，并在网页上应用边框。

示例

考虑以下情况，我们将使用colspan使单元格跨越多个列。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      th,
      td {
         border: 3px solid #D2B4DE;
         border-collapse: collapse;
      }
      th,
      td {
         padding: 3px;
         text-align: left;
      }
   </style>
</head>
<body>
   <table style="width:100%">
      <tr>
         <th>Employee</th>
         <th colspan="2">Address</th>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>Current:Hyderabad</td>
         <td>Permanent:Delhi</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Current:Vizag</td>
         <td>Permanent:Hyderabad</td>
      </tr>
      <tr>
         <td>Raj</td>
         <td>Current:Nellore</td>
         <td>Permanent:Vijayawada</td>
      </tr>
   </table>
</body>
</html>

当以上程序执行时，它将生成一个输出，其中包含一个使用colspan的表格，并应用了CSS，显示在网页上。

示例

让我们看看下面的示例，我们将在这个表格中使用标题。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      th,
      td {
         border: 2px solid #DFFF00;
         border-collapse: collapse;
      }
      th,
      td {
         padding: 11px;
      }
   </style>
</head>
<body>
   <table>
      <caption>Employee Details</caption>
      <tr>
         <th>Name</th>
         <th>Department</th>
         <th>Age</th>
      </tr>
      <tr>
         <td>Kamal</td>
         <td>IT</td>
         <td>24</td>
      </tr>
      <tr>
         <td>Raj</td>
         <td>BPO</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>DEVELOPMENT</td>
         <td>26</td>
      </tr>
      <tr>
         <td>Sana</td>
         <td>ASSOCIATE</td>
         <td>27</td>
      </tr>
   </table>
</body>
</html>

运行以上程序后，它将显示一个输出，其中包含一个在网页上创建的表格，以及应用的CSS和将在网页上显示的标题。

示例

在下面的示例中，我们将向我们将创建的表格添加背景颜色。

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      th,
      td {
         border: 2px solid #7D3C98;
      }
   </style>
</head>
<body>
   <table style="background-color:#ABEBC6 ">
      <tr>
         <th>Name</th>
         <th>Country</th>
         <th>Hobby</th>
      </tr>
      <tr>
         <td>Mani</td>
         <td>India</td>
         <td>Playing Cricket</td>
      </tr>
      <tr>
         <td>Mamboo</td>
         <td>Nigeria</td>
         <td>Listening Music</td>
      </tr>
      <tr>
         <td>Black-Widow</td>
         <td>Marvel</td>
         <td>Avengers Wars</td>
      </tr>
   </table>
</body>
</html>

当以上代码执行时，它将生成一个输出，其中包含应用了CSS的表格，显示在网页上。

更新于: 2023年9月8日

135 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告