HTML 制作表格案例

1. 运行要求

在这里插入图片描述

2. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阅读排名</title>
</head>
<body>
    <table align="center" border="1" cellspacing = "0">
        <tr><th>排名</th> <th>趋势</th> <th>关键词</th> <th>今日搜索</th> <th>最近七日</th><th>相关链接</th> </tr>
        <tr><td>1</td> <td><img src="images/up.jpg"></td> <td>西游记</td> <td>12</td>      <td>452</td>  <td><a href="https://baike.baidu.com/" target="_blank">百度百科</a> <a href="https://www.qq.com/?fromdefault" target="_blank">qq</a>  <a href="https://mail.163.com/" target="_blank">网易邮箱</a>    </td> </tr>
        <tr><td>2</td> <td><img src="images/down.jpg"></td><td>浣溪沙</td><td>1253</td>    <td>4563</td> <td><a href="https://baike.baidu.com/" target="_blank">百度百科</a> <a href="https://www.qq.com/?fromdefault" target="_blank">qq</a>  <a href="https://mail.163.com/" target="_blank">网易邮箱</a>    </td> </tr>
        <tr><td>3</td> <td><img src="images/up.jpg"></td> <td>水浒传</td> <td>452</td>     <td>785</td>  <td><a href="https://baike.baidu.com/" target="_blank">百度百科</a> <a href="https://www.qq.com/?fromdefault" target="_blank">qq</a>  <a href="https://mail.163.com/" target="_blank">网易邮箱</a>    </td> </tr>
    </table>
</body>
</html>
<!-- 注意制作表格 三级 table tr (th(加粗表头) td) -->
<!-- table 添加属性 align border cellspacing -->
<!-- 插图图片 使用<img> src 属性 找到图片存放的位置 -->
<!-- 在表格的一个单元格中添加相关链接 使用外部链接 <a> 添加 href(url) target(在新的网页中打开) -->

3. 结果展示

在这里插入图片描述

posted @   YIMENG-0  阅读(397)  评论(0)  编辑  收藏  举报
相关博文：
· HTML 表格标签之表格属性
· HTML 有序列表 自定义列表
· HTML教程练习
· HTML表格标签
· html练习记录
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示