Web速查-索引

Alt text

定义

<td> 标签用于定义 HTML 表格中的标准单元格。

td 元素中的文本一般显示为正常字体且左对齐。

属性

属性 描述
headers header_id 规定与单元格相关联的一个或多个表头单元格。
colspan number 规定单元格可横跨的列数。
rowspan number 设置单元格可横跨的行数。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Company</th>
<th>Email</th>
</tr>
<tr>
<td>FishC, Inc.</td>
<td>fishc_service@126.com</td>
</tr>
</table>
</body>
</html>
Company Email
FishC, Inc. fishc_service@126.com

headers属性:

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style>
table{
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th id="name">书名</th>
<th id="email">作者</th>
<th id="phone">价格</th>
</tr>
<tr>
<td headers="name">《零基础入门学习Web》(HTML5 & CSS3)</td>
<td headers="email">小甲鱼 不二如是</td>
<td headers="phone">¥55</td>
</tr>
</table>
</body>
</html>
书名 作者 价格
《零基础入门学习Web》(HTML5 & CSS3) 小甲鱼 不二如是 ¥55

colspan属性:

colspan 属性定义单元格应该横跨的列数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习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>
</tr>
<tr>
<td>《零基础入门学习Python》</td>
<td>¥49.50</td>
</tr>
<tr>
<td>《零基础入门学习Scratch》</td>
<td>¥60</td>
</tr>
<tr>
<td colspan="2">总计:¥109.50</td>
</tr>
</table>
</body>
</html>
书名 价格
《零基础入门学习Python》 ¥49.50
《零基础入门学习Scratch》 ¥60
总计:¥109.50

rowspan属性:

rowspan 属性定义单元格应该横跨的行数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习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>总计</th>
</tr>
<tr>
<td>《零基础入门学习Python》</td>
<td>¥49.50</td>
<td rowspan="2">¥109.50</td>
</tr>
<tr>
<td>《零基础入门学习Scratch》</td>
<td>¥60</td>
</tr>
</table>
</body>
</html>
书名 价格 总计
《零基础入门学习Python》 ¥49.50 ¥109.50
《零基础入门学习Scratch》 ¥60

浏览器支持

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

Safari Chrome FireFox IE
1.0 1.0 1.0 1.0