HTML - <table> 标签

HTML <table> 标签用于构建 HTML 表格。表格数据默认左对齐。HTML 表格提供了一种机制，可以根据单元格的行和列来定义或导出数据，包括文本、照片、链接和其他类型的数据。

HTML <table> 元素与一个或多个 <tr>、<th> 和 <td> 元素一起构成 HTML 表格。<tr> 元素定义表格行，<th> 元素定义表格表头，<td> 元素定义表格单元格。用于控制页面布局，例如标题部分、导航栏、正文和页脚部分。

语法

<table>
  .....
</table>

属性

HTML 表格标签支持全局和事件 HTML 属性。以下提到的属性已弃用，因此应使用 CSS 属性而不是这些属性。

属性	值	描述
align	left right center justify	指定文本内容的对齐方式（已弃用）。
bgcolor	color	指定每列单元格的背景颜色（已弃用）。
border	像素	指定表格周围的边框。（已弃用）。
cellpadding	像素	单元格内容与其边框之间的间距（已弃用）。
cellspacing	像素	指定两个单元格之间的间距。（已弃用）。
frame	void above below hsides vsides lhs rhs box border	指定必须显示的表格周围框架的侧面（已弃用）。
rules	none groups cols all	定义在表格中显示规则（边框）的位置（已弃用）。
summary	text	指定总结表格内容的替代文本（已弃用）。
width	像素	指定表格的宽度（已弃用）。

HTML 表格标签示例

下面的例子将说明表格标签的使用。在哪里、何时以及如何使用表格标签以及如何设置表格样式。

创建简单的表格

让我们考虑以下示例，我们将构建一个简单的表格。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #6C3483;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Employee</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>32k</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>25k</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>20k</td>
      </tr>
   </table>
</body>
</html>

表格内填充

考虑另一种情况，我们将向表格添加填充。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #82E0AA;
      }
      th,
      td {
         padding: 11px;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Cars</th>
         <th>Owners</th>
      </tr>
      <tr>
         <td>BMW</td>
         <td>Raju</td>
      </tr>
      <tr>
         <td>RS7</td>
         <td>Ravi</td>
      </tr>
      <tr>
         <td>Audi</td>
         <td>Maya</td>
      </tr>
   </table>
</body>
</html>

使用 CSS 进行表格对齐

在下面的示例中，我们将使用 CSS 属性使表格右对齐。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #ABEBC6;
      }
   </style>
<body>
   <table style="float:right">
      <tr>
         <th>Team</th>
         <th>Points</th>
      </tr>
      <tr>
         <td>CSK</td>
         <td>16</td>
      </tr>
      <tr>
         <td>MI</td>
         <td>14</td>
      </tr>
      <tr>
         <td>RR</td>
         <td>14</td>
      </tr>
      <tr>
         <td>KKR</td>
         <td>12</td>
      </tr>
   </table>
   <p><br><br>
      The Indian Premier League is a men's Twenty20 cricket 
      league that is annually held in India and contested by 
      ten city-based franchise teams. The BCCI founded the 
      league in 2007.
   </p>
</body>
</html>

表格背景颜色

下面是一个示例，我们将向表格添加背景颜色。

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1px solid #6C3483;
      }
   </style>
<body>
   <table style="background-color:#ABEBC6 ">
      <tr>
         <th>Owner</th>
         <th>Pet</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Cat</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>Dog</td>
      </tr>
      <tr>
         <td>Ravi</td>
         <td>Pomeranian</td>
      </tr>
   </table>
</body>
</html>

支持的浏览器

标签
table	是	是	是	是	是

html_tags_reference.htm

打印页面