HTML 制作表格案例

最新推荐文章于 2023-02-24 23:36:43 发布

CodeDoraemon

最新推荐文章于 2023-02-24 23:36:43 发布

阅读量1.6k

点赞数 2

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_40417070/article/details/113063311

版权

HTML 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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. 结果展示

在这里插入图片描述

CodeDoraemon

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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>
复制链接

扫一扫