在 HTML 中创建表格

htmlweb developmentfront end technology更新于 2024/7/28 7:40:17

在 HTML 中定义表格时使用 <table> 标签。该标签包含定义表格结构的其他标签。表格中的每一行都用 <tr> 标签定义，它包含开始和结束标签，例如 <tr> </tr>

表格标题可以用 <th> 标签表示，它也包含开始和结束标签 <th> </th>。每个单元格中的数据用 <td> 标签定义，它包含开始和结束标签，例如 <td> </td>

以下是 − 的属性

属性	值	说明
abbr	缩写文本	已弃用 - 指定单元格内容的缩写版本。
align	对齐右对齐、左对齐、居中对齐、字符对齐	已弃用 - 视觉对齐
bgcolor	rgb(x,x,x)#十六进制颜色名称	已弃用 - 指定表格的背景颜色。
border	像素	已弃用 - 指定边框宽度。值为"0"表示无边框。
cellpadding	像素或百分比	已弃用 - 指定单元格边框与其内容之间的间距。
cellspacing	像素或百分比	已弃用 - 指定单元格之间的间距。
rules	无分组行列全部	已弃用 - 与 border 属性结合使用，指定表格单元格之间显示的规则。
summary	文本	已弃用 - 指定内容摘要。
width	像素或百分比 %	已弃用 - 指定表格的宽度。

示例

您可以尝试运行以下代码以在 HTML 中创建表格 -

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Table</title>
   <style>
      table {
         font-family: arial, sans-serif;
         border-collapse: collapse;
         width: 100%;
      }

      td,
      th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
      }
   </style>
</head>
<body>
   <table>
      <!-- Defines a table -->
      <tr>
         <!-- Defines a row in a tabel -->
         <th>Fruits</th>
         <!-- Defines a heading in a table -->
         <th>Orange</th>
         <th>Apple</th>
         <th>Mango</th>
      </tr>
      <tr>
         <th>Price</th>
         <td>Rs.100</td>
         <!-- Defines a data cell in a table-->
         <td>Rs.50</td>
         <td>Rs.20</td>
      </tr>
      <tr>
         <th>Shipping Weight</th>
         <td>1 KG</td>
         <td>0.5 KG</td>
         <td>0.2 KG</td>
      </tr>
   </table>
</body>
</html>

示例

下面的程序演示了如何创建具有 4 行 4 列的表格 −

<!DOCTYPE html>
<html>
<head>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
         width: 100px;
         height: 50px;
      }
   </style>
</head>
<body>
   <h3>Table with 4rows and 4Colums</h3>
   <table>
      <tr>
         <th></th>
         <th></th>
         <th></th>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <th></th>
         <th></th>
         <th></th>
      </tr>
   </table>
</body>
</html>

圆角表格

将 CSS 属性应用于表格:圆角表格借助 border-radius 属性，我们可以为表格中的每个单元格应用圆角。我们还可以跳过或删除表格周围的边框，只需在 CSS 选择器中省略 table 即可。

示例

以下示例创建了一个带有圆角边框的表格−

<!DOCTYPE html>
<html>
<style>
   table,
   th,
   td {
      border: 1px solid black;
      border-radius: 10px;
   }

   th,
   td {
      background-color: pink;
   }
</style>
<body>
   <h2>HTML table with rounded border</h2>
   <table style="width:100%">
      <tr>
         <th>Roll No</th>
         <th>Student Name</th>
         <th>Address</th>
      </tr>
      <tr>
         <td>101</td>
         <td>Bob</td>
         <td>Hyderabad</td>
      </tr>
      <tr>
         <td>102</td>
         <td>Hari</td>
         <td>Bombay</td>
      </tr>
   </table>
</body>
</html>