Web速查-索引

th

定义

<th> 标签用于定义表格内的表头单元格。

th 元素内部的文本通常会呈现为居中的粗体文本

属性

属性 描述
scope col、colgroup、row、rowgroup 规定表头单元格是否是行、列、行组或列组的头部。
headers header_id 规定与表头单元格相关联的一个或多个表头单元格。
colspan number 规定表头单元格可横跨的列数。
rowspan number 规定表头单元格可横跨的行数。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
table, th, td {
border: 1px solid black;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company</th>
<th>Email</th>
</tr>
<tr>
<td>NTHOME</td>
<td>1294353916@qq.com</td>
</tr>
</table>
</body>
</html>
Company Email
NTHOME 1294353916@qq.com

scope属性:

规定表头单元格是否是行、列、行组或列组的头部。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
table, th, td {
border: 1px solid black;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th></th>
<th scope="col">课名</th>
<th scope="col">价格</th>
</tr>
<tr>
<td>1</td>
<td>《零基础入门学习Mide+》</td>
<td>¥49.50</td>
</tr>
<tr>
<td>2</td>
<td>《零基础入门学习易语言》</td>
<td>¥60</td>
</tr>
</table>
</body>
</html>
课名 价格
1 《零基础入门学习Mide+》 ¥49.50
2 《零基础入门学习易语言》 ¥60

headers属性:

headers属性在普通的浏览器中没有视觉效果,但可以通过屏幕阅读器使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
table, th, td {
border: 1px solid black;
}
table{
border-collapse: collapse;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name" colspan="2">NTHOME教材</th>
</tr>
<tr>
<th headers="name">课名</th>
<th headers="name">价格</th>
</tr>
</table>
</body>
</html>
NTHOME教材
课名 价格

colspan属性:

规定表头单元格可横跨的列数。

见headers属性演示

rowspan属性:

规定表头单元格可横跨的行数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NTHOME-零基础入门学习Web(HTML5+CSS3)</title>
<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>课名</th>
<th>价格</th>
<th rowspan="3">NTHOME教材</th>
</tr>
<tr>
<td>《零基础入门学习Mide+》</td>
<td>¥49.50</td>
</tr>
<tr>
<td>《零基础入门学习易语言》</td>
<td>¥60</td>
</tr>
</table>
</body>
</html>
课名 价格 NTHOME教材
《零基础入门学习Mide+》 ¥49.50
《零基础入门学习易语言》 ¥60

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

Safari Chrome FireFox IE
1.0 1.0 1.0 1.0