td

定义

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

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

属性

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

实例

<!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>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

headers属性：

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

<!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 id="name">课名</th>
            <th id="email">作者</th>
            <th id="phone">价格</th>
        </tr>
        <tr>
            <td headers="name">《零基础入门学习Web》（HTML5 & CSS3）</td>
            <td headers="email">Nature</td>
            <td headers="phone">¥99.99</td>
        </tr>
    </table>
</body>
</html>

课名	作者	价格
《零基础入门学习Web》（HTML5 & CSS3）	Nature	¥99.99

colspan属性：

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

<!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>
        </tr>
        <tr>
            <td>《零基础入门学习Mind+》</td>
            <td>¥49.50</td>
        </tr>
        <tr>
            <td>《零基础入门学习易语言》</td>
            <td>¥60</td>
        </tr>
        <tr>
            <td colspan="2">总计：¥109.50</td>
        </tr>
    </table>
</body>
</html>

课名	价格
《零基础入门学习Mind+》	¥49.50
《零基础入门学习易语言》	¥60
总计：¥109.50

rowspan属性：

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>总计</th>
        </tr>
        <tr>
            <td>《零基础入门学习Mind+》</td>
            <td>¥49.50</td>
            <td rowspan="2">¥109.50</td>
        </tr>
        <tr>
            <td>《零基础入门学习易语言》</td>
            <td>¥60</td>
        </tr>
    </table>
</body>
</html>

课名	价格	总计
《零基础入门学习Mind+》	¥49.50	¥109.50
《零基础入门学习易语言》	¥60	¥109.50

浏览器支持

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

Safari	Chrome	FireFox	IE
1.0	1.0	1.0	1.0