定义

<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	¥109.50

定义

属性

实例

headers属性：

colspan属性：

rowspan属性：

视频讲解