web前端-----细线表格（table）的制作

主要是用border属性中的 border-collapse 再加个属性值：collapse即可

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;} .tab{width: 500px;height: 249px;border-collapse: collapse;margin: 0 auto;}</style></head><body><table class="tab" <!-- align="center" border="1" width="500" height="249" cellspacing="0" -->><tr><!-- 第一行   th表头  加粗和居中--><th>排名</th><th>关键词</th><th>趋势</th><th>进入搜索</th><th>排最近七日</th><th>相关链接</th></tr><tr><!-- 第二行 --><td>1</td><td>鬼吹灯</td><td><img src="data:images/down.jpg" ></td><td>345</td><td>123</td><td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td></tr><tr><!-- 第三行 --><td>2</td><td>西游记</td><td><img src="data:images/up.jpg" ></td><td>122433</td><td>123</td><td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td></tr><tr><!-- 第四行 --><td>3</td><td>盗墓笔记</td><td><img src="data:images/down.jpg" ></td><td>34</td><td>12233</td><td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td></tr><tr><!-- 第五行 --><td>4</td><td>东游记</td><td><img src="data:images/up.jpg" ></td><td>34235</td><td>6123</td><td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td></tr><tr><!-- 第六行 --><td>5</td><td>甄嬛传</td><td><img src="data:images/up.jpg" ></td><td>34512</td><td>12323</td><td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td></tr><tr><!-- 第七行 --><td>6</td><td>水浒传</td><td><img src="data:images/down.jpg" ></td><td>34235</td><td>12563</td><td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td></tr><tr><!-- 第八行 --><td>7</td><td>三国演义</td><td><img src="data:images/up.jpg" ></td><td>34235</td><td>1263</td><td><a href="#">百度</a>&nbsp;<a href="#">贴吧</a>&nbsp;<a href="#">图片</a></td></tr></table></body>
</html>

对比：

web前端-----细线表格（table）的制作相关推荐

Web前端开发入门之网页制作三要素！
Web前端开发是由网页制作演变而来的,主要由HTML.CSS.JavaScript三大要素组成.专业的Web前端开发入门知识也一定会包含这些内容,今天小千就给大家简单介绍一下. HTML,超文本标记语 ...
web前端 js实现频域水印制作
web前端 js实现频域水印制作傅里叶变换实现频域水印的方法源自https://github.com/zeruniverse/CryptoStego. 调用cryptostego.min.js ...
Web前端-el-table-column表格匹配字典数据
最近初步学习Vue开发web前端的table表格时,想通过字典中数据进行匹配展示,如下 <el-table v-loading="loading" :data="p ...
web前端期末大作业——网页制作基础大二dw作业——动画漫展学习资料电影模板(6页)
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
html5表格在线生成,专业的Web报表工具——表格在线生成制作工具
Smartbi报表工具是新一代的在线Web报表工具,它具有丰富的帮助提示与向导指引,支持字段拖拽报表制作,并提供方便的快捷菜单和报表功能,旨在让报表制作工作变得更轻松! 丰富的帮助提示与向导指引在w ...
web前端数据表格有合并项的一种简单实现方法
今天一个同学在QQ里问,如何实现前端数据表中有合并项的效果, 在QQ里打字说不清楚,于是写了一个简单的例子说明问题, 现在记录下来,以备后用: 先写一个基本的html页面: <!DOCTYPE ...
html前端开发------表格table
文章目录前言一.思维导图二.案例前言哈喽同学们大家好,本节我们开始学习html5基础部分------表格相关练习,本节内容作了解即可,实际应用较少.下面有具体案例和素材同学们自行取用一.思 ...
Web前端 | HTML | 表格 | 表单
目录--今日任务表格关卡2 表单关卡3 表格表格由 <table> 标签来定义: 每个表格均有若干行,由 <tr> 标签定义: 每行被分割为若干单元格,由 <td ...
纯css打造漂亮的html表格,table CSS制作好看的网页表格
幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1.summary 和 caption 第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素, ...
web前端编程实战实例：制作静态京东首页
<!DOCTYPE html> <html> <head><title>京东_曾柯伟</title><link rel="s ...

web前端-----细线表格（table）的制作

web前端-----细线表格（table）的制作相关推荐

最新文章

热门文章