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