数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 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 次查看
广告