表格细线边款(HTML、CSS)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格细线边款</title><style>table {width: 500px;height: 249px;}th {height: 40px;}table,td,th {border: 1px solid red;border-collapse: collapse;/*  设置为单边框（合并相邻的边款） */font-size: 14px;text-align: center;}</style>
</head><body><table align="center"><thead><tr><th>排名</th> <!-- th为表头部分  加粗效果 --><th>关键词</th><th>趋势</th><th>搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><!-- tr为行  td是将内容放于里边 都在tr行里 --><td>1</td><td>鬼吹灯</td><td><img src="down.jpg" width="20" height="20" /></td><td>42442</td><td>1236466</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td><tr><td>2</td><td>盗墓笔记</td><td><img src="down.jpg" width="20" height="20" /></td><td>4545</td><td>998654</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>3</td><td>西游记</td><td><img src="up.jpg" width="20" height="20" /></td><td>24686</td><td>845412</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>4</td><td>圣墟</td><td><img src="down.jpg" width="20" height="20" /></td><td>65335</td><td>793265</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>5</td><td>火煌</td><td><img src="up.jpg" width="20" height="20" /></td><td>8684</td><td>454656</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>6</td><td>水浒传</td><td><img src="up.jpg" width="20" height="20" /></td><td>3463</td><td>323656</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>7</td><td>三国演义</td><td><img src="up.jpg" width="20" height="20" /></td><td>3446</td><td>125633</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr></tbody></table></body></html>

表格细线边款(HTML、CSS)相关推荐

Table表格横竖线实现Css
Table表格横竖线实现Css .tablel { border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */ b ...
html设置边框dw,Dreamweaver表格边框设置的css语法大全
Dreamweaver表格边框设置的css语法大全具体内容包括:上边框宽度.右边框宽度.下边框宽度.左边框宽度.边框宽度.边框颜色.边框样式.上边框.下边框.左边框.右边框.边框.宽度.高度.有关标 ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式第6章 CSS设置表格与表单样式学习目标什么是表格模型对数据表格应用样式. 创建简单和复杂的表单布局对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
html写表格标记,HTML表格标记教程(48):CSS修饰表格
HTML表格标记教程(48):CSS修饰表格互联网发布时间:2008-10-17 18:56:54 作者:佚名我要评论现在我们来看看怎样巧妙运用css语法美化表格. 注:除非特殊声 ...
表格（HTML和CSS属性）
表格作用:用来显示数据,整理数据表格格式:<table><caption></caption><thead><tr> th <td& ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
html css 表格自动高度,HTML/CSS - 具有固定高度的容器中表格单元格的高度不一致...
我有一个使用HTML/CSS设置的表格,它位于正在变成手风琴的UL的LI元素中.问题是,当LI元素动画到特定高度时,它会改变表格单元格的高度,使最后一个元素隐藏起来.HTML/CSS - 具有固定高度 ...
html表格列平分行,CSS布局问题 , 如何实现一行多列div,类似于表格
水平拆分方案A:百分比宽度+float 可以全浏览器兼容,但是需要用到一些hack解决float定位的问题,同时需要考虑清除浮动. 在很多比例(1/3.2/3是最常见的情形)不能整除的情况下,在一些情 ...

表格细线边款(HTML、CSS)

表格细线边款(HTML、CSS)

表格细线边款(HTML、CSS)相关推荐

最新文章

热门文章