如何实现表格边框不断闪烁,要纯html代码

如何实现表格边框不断闪烁,要纯html代码,第1张

实现表格边框不断闪烁,纯html代码是实现不了的,css只能指定一种边框颜色,必须结合JS代码才能实现。

下面是一个简单的边框闪烁例子:

<div id="abc" style="width:200px;height:200px;border:5px solid #E9F47B;">这里是200200的闪烁框</div>

<script>

var i=0;

function shine(id){

var obj= documentgetElementById(id);

if(i==0){objstyleborderColor="#E9F47B";i=1;}else{objstyleborderColor="red";i=0}

}

setInterval("shine('abc')",100);//边框变化时间,100可以根据情况调整大小

</script>

试试把 <Tabel 标签里的 cellspacing 设置为1

cellspacing=1

这样可以改变边框格式

还有你里边把所有的rowcol 写成了 rewcol 了

给你改完了

<html>

<head>

<title>课程表</title>

</head>

<body>

<table border="1" bordercolor=#436EEE align=center cellspacing=1>

<caption>课程表</caption>

<tr align=center><td>项目</td><td colspan="5">上课</td><td colspan="2">休息</td></tr>

<tr align=center><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr>

<tr align=center><td rowspan="4">上午</td><td>语文</td><td>数学</td><td>英语</td><td>物理</td><td>计算机</td><td>计算机</td><td rowspan="4">休息</td></tr>

<tr align=center><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td></tr>

<tr align=center><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr>

<tr align=center><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr>

<tr align=center><td rowspan=2>下午</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td rowspan="2">休息

</td></tr>

<tr align=center><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td></tr>

</table>

</body>

</html>

在外面加个div就可以了,然后用css控制这个div:

<div style="display:block;position:absolute; z-index:999; right:0; bottom:0;">

    <!--你的表格-->

    <table style="width:200px;height:200px;" border="1">

        <tr><td>1</td><td>2</td><td>3</td></tr>

        <tr><td>1</td><td>2</td><td>3</td></tr>

    </table>

</div>

效果:

table标签定义 HTML 表格,table 由一个或多个 tr、th 或 td 元素组成,tr 元素定义表格的行,th定义表头,td定义表格单元,即展示的内容,下面介绍下如何用HTML做一个表格

01

新建一个HTML文件,命名为testTablehtml

02

增加table标签,数据展示以省份和省会为例,代码如下

03

在代码的空白出右键,选择浏览器打开,选择默认即可

04

自动跳转到浏览器,效果如下图

05

下面我们为表格增加样式,增加边框等元素,代码如下

06

刷新浏览器,最终效果如下

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/12170631.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存