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

htmlweb developmentfront end technology更新于 2024/8/10 5:32:17

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

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

HTML 中的表格单元格

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

它支持以下属性 -

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

为了更好地理解，我们来看以下示例。

示例

在下面的示例中，我们将创建一个由表格单元格组成的表格。

<!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> 元素中定义的标题所属的单元格由此 counted 属性指定。要指定作为标题的行或列，请仅将此属性与 <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>

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