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

在本文中，我们要做的任务是使用<table>标签及其属性来设计一个表格。为了创建表格的结构，我们使用<table>标签，并使用属性来设计表格。

让我们深入阅读这篇文章，获取关于如何使用<table>标签及其属性创建表格的更多想法。我们使用<table>标签来构建一个表格，其特性将用于设计表格。边距、填充、边框、背景颜色和其他属性将用于设计表格。

HTML`<table>`标签

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

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

语法

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

<table>…</table>

现在，我们来看下面的示例，以更好地了解如何使用<table>标签及其属性来创建表格。

示例

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

<!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使单元格跨越多列。

<!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>

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

示例

让我们看一下以下示例，我们将在表格中使用标题。

<!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和标题以在网页上显示。

示例

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

<!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的表格的输出，显示在网页上。