Investigator Veritatis

21-表格的嵌套使用

2 min read

1 单元格内可以放任意内容

td 本质上就是一个容器，内部不只能放文字，任何 HTML 标签都可以嵌套进去，包括图片、列表、链接等。

2 常见嵌套场景

2.1 td 内嵌 img

直接在 td 里放 img 标签，常用于展示头像、照片列：

<td>
    <img src="./img1.jpg" width="200" />
</td>

2.2 td 内嵌 ul

在 td 里放无序列表，适合展示多个条目的数据（如爱好、标签）：

<td>
    <ul>
        <li>唱</li>
        <li>跳</li>
        <li>rap</li>
    </ul>
</td>

2.3 td 内嵌 a

在 td 里放链接，href="#" 表示暂时没有目标地址的占位写法：

<td>
    <a href="#">百度</a>
</td>

2.4 a 内嵌 img — 图片链接

a 标签内可以嵌套 img，点击图片即可跳转，是常见的图片链接写法：

<a href="http://www.baidu.com" target="_blank">
    <img src="./img1.jpg" alt="" width="50px">
</a>

3 完整代码

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<body>
    <table border="1px" width="800px" height="300px" align="center">
        <caption>用户信息</caption>
 
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>照片</th>
                <th>爱好</th>
                <th>人个主页</th>
            </tr>
        </thead>
 
        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>
                    <img src="./img1.jpg" width="200" />
                </td>
                <td>
                    <ul>
                        <li>唱</li>
                        <li>跳</li>
                        <li>rap</li>
                    </ul>
                </td>
                <td>
                    <a href="#">百度</a>
                </td>
            </tr>
 
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>
                    <img src="./1.gif" width="200" />
                </td>
                <td>
                    <ul>
                        <li>唱</li>
                        <li>跳</li>
                        <li>rap</li>
                    </ul>
                </td>
                <td>
                    <a href="#">百度</a>
                </td>
            </tr>
 
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>
                    <img src="./img2.jpg" width="200" />
                </td>
                <td>
                    <ul>
                        <li>读书</li>
                        <li>打游戏</li>
                        <li>睡觉</li>
                    </ul>
                </td>
                <td>
                    <a href="http://www.baidu.com" target="_blank">
                        <img src="./img1.jpg" alt="" width="50px">
                    </a>
                </td>
            </tr>
        </tbody>
    </table>
</body>
 
</html>

Recent Notes

Graph View