col标签的相关实验
col上有width属性，如果对应值没有单位，默认是像素
<!DOCTYPE html>
<html>
<head>
<title>col相关实验</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head> <body >
<table border="1" width="100%">
<col width="20"></col>
<col width="50"></col>
<col width="80"></col> <tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>col相关实验</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head> <body >
<table border="1" width="100%">
<col width="20%"></col>
<col width="20%"></col>
<col width="30%"></col> <tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
只有IE67才认align
<!DOCTYPE html>
<html>
<head>
<title>col相关实验</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head> <body >
<table border="1" width="100%">
<col align="left" width="20%"></col>
<col align="right" width="20%"></col>
<col align="center" width="30%"></col> <tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
IE, chrome, safari能认bgcolor，firefox不认。
<!DOCTYPE html>
<html>
<head>
<title>col相关实验</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head> <body >
<table border="1" width="100%">
<col bgcolor="red" width="20%"/>
<col bgcolor="blue" width="20%"/>
<col bgcolor="yellow" width="30%" align="center"/>
<col bgcolor="green" width="30%"/>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
我们可以使用style，全部浏览器都认
<!DOCTYPE html>
<html>
<head>
<title>col相关实验</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head> <body >
<table border="1" width="100%">
<col style="background: #2FECDC" width="20%"/>
<col style="background: #FF77F1" width="20%"/>
<col style="background: gold;text-align: center" width="30%" />
<col style="background: greenyellow" width="30%"/>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
还可以用类名
<!DOCTYPE html>
<html>
<head>
<title>col相关实验</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
.ccc{
background: gold;
text-align: center;
font-weight: bold;
width:40%;
}
</style>
</head> <body >
<table border="1" width="100%">
<col style="background: #2FECDC" width="20%"/>
<col style="background: #FF77F1" width="20%"/>
<col class="ccc" />
<col style="background: greenyellow"/>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
根据W3C规范，col只能设置border,background,width,visibility这四种样式。
col标签的相关实验的更多相关文章
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（五）
对li标签的相关操作——has与find的差异性 demo代码: <ul> <li><p>1</p></li> <li>2< ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（四）
对li标签的相关操作——五种方式给奇数项li标签设置样式 demo演示: 1 2 3 4 5 6 7 // 详解: 通常我们为多个li添加样式时常用的是使用filter,但我们在第三节中可以看到fil ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（三）
对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（二）
对li标签的相关操作——8种方式获取li标签的第一个元素的内容 1.alert($("ul>li").first().html());2.alert($('ul>li' ...
- 前端学习笔记(zepto或jquery)——对li标签的相关操作（一）
对li标签的相关操作——点击li标签进行样式切换的两种方式 Demo演示: 1 2 3 4 // 详解: 第一种方式(以ul为基础): $("ul").bind("cli ...
- tomcat相关实验
tomcat相关实验 1.实现LNT 同主机实现 1.安装并启动tomcat 1)OpenJDK的安装 yum install java-1.8.0-openjdk-devel.x86_64 确定JD ...
- MIT Molecular Biology 笔记4 DNA相关实验
视频 https://www.bilibili.com/video/av7973580?from=search&seid=16993146754254492690 教材 Molecular ...
- html - body标签中相关标签
body标签中相关标签 今日内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup> ...
- nginx介绍及相关实验
一.nginx介绍 1.nginx简介 Nginx是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP 服务.Nginx 是由伊戈尔·赛索耶夫为俄罗斯访问量第二的 R ...
随机推荐
- 【git】提交到github不显示贡献小绿点问题的解决
问题描述: 最近一直在用github来写博客,但是今天发现github上的contributions记录并没有我的提交记录. 经过一番百度和自行捣鼓发现了问题所在. 原因: 最近实习,公司给配电脑.原 ...
- 使用Pandas: str.replace() 进行文本清洗
前段时间参加了Kaggle上的Mercari Price Suggestion Challenge比赛,收获良多,过些时候准备进行一些全面的总结,本篇文章先谈一个比赛中用到的小技巧. 这个比赛数据中有 ...
- 第12课：HTML基础之DOM操作1
DOM(Document Object Model):文本对象模型 dom对象实际上是html页面转成成的文本对象,可以通过dom对象中js提供的方法找到htm中的各个标签. 练习URL:http:/ ...
- 实现斐波拉契数列的四种方式python代码
斐波那契数列 1. 斐波拉契数列简介 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引 ...
- Centos7环境下安装python3.6.4 并与python2共存
最近安装了新系统centos7,本身自带python2.7,但是由于需要使用python3 来运行一些应用,所以想到在centos环境下安装python3,并保证其和python2 可以共存. 步骤如 ...
- Element-ui实现loading的局部刷新
后台管理系统loading的局部刷新 在一次vue+element-ui后台管理系统的项目中,遇到这样一个问题,引入element-ui加载框后,loading会占满整个屏幕,虽然通过改变路由实现了局 ...
- threading模块创建线程
什么是线程 (thread) 线程也是一种多任务编程方式,可以使用计算机的多核资源.线程被称为轻量级的进程. 线程特征 *线程计算机多核分配的最小单位 *一个进程可以包含多个线程 *线程也是一个运行的 ...
- .NET/C# 使用反射调用含 ref 或 out 参数的方法
使用反射,我们可以很容易地在运行时调用一些编译时无法确定的属性.方法等.然而,如果方法的参数中包含 ref 或 out 关键字的时候,又该怎么调用呢? 本文将介绍如何反射调用含 ref 或 out 关 ...
- 《DSP using MATLAB》 示例 Example 9.16
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- 10013: 以一种访问权限不允许的方式做了一个访问套接字的尝试【WCF异常】
错误代码:10013 异常描述:侦听 IP 终结点=0.0.0.0:6666 时出现 TCP 错误(10013: 以一种访问权限不允许的方式做了一个访问套接字的尝试.). 解决方式:由于端口6666被 ...