盒子模型之表格细线边框

最新推荐文章于 2023-01-17 14:45:48 发布
最新推荐文章于 2023-01-17 14:45:48 发布
阅读量108 收藏
点赞数
分类专栏： html+css 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/L1585931143/article/details/127524339
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>细线表格今日小说排行榜案例1</title>
    <style>
        table {
            width: 500px;
            height: 249px;
        }

        th {
            height: 35px;
        }

        table,
        td,
        th {
            border: 1px solid pink;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 15px;
            text-align: center;
            ;
        }
    </style>
</head>

<body>
    <!-- <table border="1" align="center" cellspacing="0" width="500px"> -->
    <table align="center">
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>进入搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.png" alt="下" title="下" /></td>
            <td>456</td>
            <td>123</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>盗墓笔记</td>
            <td><img src="images/down.png" alt="下" title="下" /></td>
            <td>124</td>
            <td>675432</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td><img src="images/up.png" alt="上" title="上" /></td>
            <td>212</td>
            <td>7654</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td><img src="images/up.png" alt="上" title="上" /></td>
            <td>23</td>
            <td>75645</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td><img src="images/down.png" alt="下" title="下" /></td>
            <td>121</td>
            <td>7676</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td><img src="images/up.png" alt="上" title="上" /></td>
            <td>576576</td>
            <td>1231421</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td><img src="images/up.png" alt="上" title="上" /></td>
            <td>234</td>
            <td>7686</td>
            <td>
                <a href="#">贴吧</a>
                <a href="#">图片</a>
                <a href="#">百科</a>
            </td>
        </tr>
    </table>
</body>

</html>

 

 

辐_射
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML表格（三）--小说排行榜
qq_46150052的博客
10-25 904
效果图： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
盒子模型----边框
xunmengyinjia的博客
08-25 1157
(3)、border-xxx-color 特指top right bottom left某一边颜色。（3）、border-xxx-width 特指top right bottom left某一边宽度。边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子的外部。3个 上 左右 下。设置边框必须指定三个样式 分别是颜色，大小，样式。border-bottom:颜色，大小，样式;border-right:颜色，大小，样式;border-left:颜色，大小，样式;...
设置细线表格
weixin_43837268的博客
09-28 274
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>今日.
表格细线边框的做法
johncools的博客
06-22 3272
方法1：把表格的cellspacing设置为1，cellpadding和border均为0，分别填充表格的背景色和单元格的背景色。举例如下： ＜tablewidth="550"border="0"cellspacing="1"cellpadding="0"bgcolor="#666666"＞ ＜trbgcolor="#FFFFFF"＞ ＜td＞＜/td＞ ＜/tr＞ ＜trbg
表格细线边框
weixin_51061595的博客
09-14 154
效果图 HTML部分 <body> <table cellspacing="0" align="center"> <thead> <tr> <th>交易日期</th> <th>市场类别</th> <th>本日融资余额(元)</th> <th>本日融资买入额(元)</th>
表格的细线边框
Liyunhao_haoge的博客
10-06 420
表格的细线边框 table {border-collapse:collapse;} collapse是合并的意思，即将边框合并在一起； 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&g...
CSS篇十六——盒子模型之边框
Regina_Cai的博客
11-16 3799
* border-style 边框样式 solid实线边框 dashed虚线边框 dotted点线边框 */所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。边框有三部分组成：边框宽度、边框样式以及边框颜色。/* border-width 边框的粗细，一般情况下都用 px *//* 利用层叠性，上述写法可以实现但过于麻烦 *//* border-color 边框颜色 *//* 边框的复合写法 简写： *//* 注意 不能颠倒顺序 *//* 合并相邻的边框 */
（二）盒子模型之边框border
weixin_47481102的博客
05-05 910
1.边框的组成及用法 border可以设置元素的边框，边框有三部分组成：边框宽度（粗细）、边框样式、边框颜色。 语法： border：border-width | border-style | border-color 属性 作用 border-width 定义边框粗细，单位是px border-style 边框样式 border-color 边框颜色 1.1 边框语法练习 <!DOCTYPE html> <html lang="
CSS的三大特性（层叠性，继承性，优先级），CSS盒子模型（边框（边框复合写法，边框分开写发，表格的细线边框），内边距，外边距（外边距典型应用，外边距合并塌陷，清除内外边距））
shy的博客
03-14 213
CSS的三大特性 层叠性 相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题 层叠性原则: 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式 样式不冲突，不会层叠 继承性 CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号。恰当地使用继承可以简化代码，降低 CSS 样式的复杂性。 子元素可以继承父元素的样式： （text-，font-，line-这些元素开头的可以继承，以及color属性） 行高的继承性：
盒子模型的边框属性
persistence2020的博客
05-17 2735
一、盒子边框（border） 设置边框样式：border-style none：没有边框即忽略所有边框的宽度（默认值） solid：边框为单实线(最为常用的) dashed：边框为虚线 dotted：边框为点线 double：边框为双实线
CSS 盒子模型
酷爱前端的小陈博客
05-07 367
页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面. 1.1 看透网页布局的本质 网页布局其实就是每一个大的盒子包小的盒子，然后一点点堆积起来，最后得以将网页搭建起来。 网页布局过程： 1. 先准备好相关的网页元素，网页元素基本都是盒子 Box 。 2. 利用 CSS 设置好盒子样式，然后摆放到相应位置。 3. 往盒子里面装内容. 网页布局的核心本质： 就是利用 CSS 摆盒子。 1.2 盒子模型（Box Model）组成 .
CSS 表格的细线边框
快乐de馒头
01-19 658
表格的细线边框 以前学过的html表格边框很粗，这里只需要CSS一句话就可以美观起来。 让我们真的相信，CSS就是我们的白马王子（白雪公主）。 table{ border-collapse:collapse; } collapse 单词是合并的意思 border-collapse:collapse; 表示相邻边框合并在一起。 ...
表格的细线边框样式
fdsal的博客
09-09 179
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
设置表格样式-细线边框
点点滴滴
10-11 215
.tab1{background:red;} .tab1 td{background:#fff;} 定义上面的样式，然后在页面中的表格应用此样式会得到细线的边框表格，如红色字体部分： table { background-color:#cccccc; } tr { background-color:#ffff7f; } td { ...
表格标签-表格基本结构
wangyongqi的博客
11-29 3145
第1关：网页表格的基本概念 任务描述 本关任务：完成一组关于表格基本概念的选择题。 相关知识 为了完成本关任务，你需要掌握：1.表格的结构，2.表格的基本标签，3.表格标签的基本属性。 表格的结构 在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素。 例如下图所示的表格中，表格标题为“通讯录”，表格第一行单元格中的内容基本不变，称作项目表头，表格第二行后单元格的内容通常会动态改变，称作数据资料。 基本表格 表格的基本标签 HTML表格由table标签以及一个或多个tr、th或td标签组
HTML小说排行榜案例
qq_47804149的博客
09-01 1558
【代码】纯HTML小说排行榜案例。
Web基础(从零开始)——HTML表格(实现小说排行榜)
qq_57633498的博客
11-05 756
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
表格（小说排行榜）
weixin_50930483的博客
11-22 505
表格（小说排行榜）
【web前端】小说排行榜
最新发布
m0_62608983的博客
01-17 159
1.效果图 2.源程序 主要程序 3.讲解 （1）图片位置 同级 （图片网上随便找的） （2）表头 th 单元格元素 td 表格内可以放图片 文本 超链接 （3）表格属性写在table标签内 （4）先把大的框架列好，再去补充细节
HTML技巧：创建双细线边框表格
由于表格边框和单元格边框各自都是1像素宽，如果设置了非零的间距`cellspacing`，它们之间就不会完全重叠，从而呈现出双细线边框的效果。这种技术常用于创建具有一定视觉风格的网页元素。 HTML，全称HyperText ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值