如何在 HTML 中显示表格单元格？

在本文中，我们将学习如何在 HTML 中显示表格单元格。在进入文章之前，让我们先了解一下 HTML 表格。

当您想要组织看起来最适合电子表格的数据时，HTML 中的表格非常有用。表格是数据行和列的视觉表示。您可以使用表格将照片、文本、链接等数据组织到 HTML 中的单元格行和列中。

HTML 中的表格单元格

表格单元格可以跨越多列和多行，并且包含标题信息以及数据。在 HTML 4 表格模式下，每个单元格都带有标签，非视觉用户代理可以更有效地向用户传达信息。<td> HTML 元素定义了一个包含数据的表格单元格。

它支持以下属性：

属性 值 描述
abbr abbreviated_text 已弃用 − 指定单元格中内容的缩写版本。
align right left center justify char 已弃用 − 视觉对齐方式。
axis 名称 已弃用 − 为该 td 指定一个类别。这可能用于对表格数据执行查询，并且在语音浏览器的上下文中可能很有用
bgcolor rgb(x,x,x) #hexcode 颜色名称 已弃用 − 指定表格单元格的背景颜色。
char 字符 已弃用 − 指定要对齐文本的字符。在 align = "char" 时使用。
charoff 像素或 % 已弃用 − 指定相对于使用 char 属性指定的第一个字符的对齐偏移量（以像素或百分比值表示）。在 align = "char" 时使用。
colspan 数字 指定当前单元格跨越的列数。
header ID 指定包含有关此单元格信息的标题单元格的空格分隔列表。该值需要与标题单元格的 id 相对应（使用 id 属性设置）。此属性对于非视觉浏览器很有用。
height 像素 已弃用 − 指定表格单元格的高度。
nowrap nowrap 已弃用 − 防止文本自动换行。
rowspan 数字 指定当前单元格跨越的行数。
scope col colgroup row rowgroup 已弃用 − 此属性用于标题单元格，并指定将使用此标题信息的单元格。
valign top middle bottom baseline 已弃用 − 垂直对齐方式。
width 像素或 % 已弃用 − 指定表格单元格的宽度

让我们看看以下示例以获得更好的理解。

示例

在以下示例中，我们创建一个包含表格单元格的表格。

<!DOCTYPE html>
<html>
   <style>
      table {
         border:2px solid #F39C12;
      }
      th{
         border:2px solid #D1F2EB;
      }
      td{
         border:2px solid #D1F2EB;
      }
   </style>
<body>
   <table style="width:50%">
      <tr>
         <th>NAME</th>
         <th>COMPANY</th>
      </tr>
      <tr>
         <td>Varma</td>
         <td>Google</td>
      </tr>
      <tr>
         <td>Nikhil</td>
         <td>Infosys</td>
      </tr>
   </table>
</body>
</html>

运行上述脚本后，输出窗口弹出，在网页上显示包含上述脚本中使用的数据的表格。

使用 Scope

此计数属性指定了在 <th> 元素中定义的标题所涉及的单元格。要指定它是哪一行的标题或哪一列的标题，请仅与 <th> 元素结合使用此属性。

示例

考虑到以下示例，我们使用 scope 创建表格单元格。

<!DOCTYPE html>
<html>
   <style>
      td,th {
         border: 2px solid #ABEBC6 ;
         padding: 10px;
      }
      th[scope="col"] {
         background-color:#5DADE2;
         color: #fff;
      }
      th[scope="row"] {
         background-color: #d7d9f2;
      }
      table {
         border-collapse: collapse;
         letter-spacing: 1px;
         font-family: sans-serif;
         font-size: .8rem;
      }
   </style>
<body>
   <table>
      <caption>PLAYERS AND THEIR TEAM</caption>
      <tr>
         <th scope="col">PLAYERS</th>
         <th scope="col"> IPL TEAM</th>
      </tr>
      <tr>
         <th scope="row">DHONI</th>
         <td>CSK</td>
      </tr>
      <tr>
         <th scope="row">RISHAB PANT</th>
         <td>DELHI CAPTIALS</td>
      </tr>
      <tr>
         <th scope="row">JOS BUTTLER</th>
         <td>RAJASTHAN ROYALS</td>
      </tr>
   </table>
</body>
</html>

当脚本执行时，它将生成一个输出，该输出包含一个表格，其中包含单元格以及我们在脚本中提到的网页上的数据。

更新于： 2022-12-15

483 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告