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

在这篇文章中，我们将学习如何在 HTML 中显示表格单元格。在深入了解文章之前，让我们先看看 HTML 表格。

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

HTML 中的表格单元格

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

它支持以下属性：

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

让我们看看以下示例以更好地理解。

示例

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

<!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 次查看

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告