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 ...
随机推荐
- android中LayoutInflater.from(context).inflate的分析
在应用中自定义一个view,需要获取这个view的布局,需要用到 (LinearLayout) LayoutInflater.from(context).inflate(R.layout.conten ...
- Eclipse Oxygen SVN Connector Setup
新版的Eclipse(Oxygen)安装完Subversive后,现时无法自动安装SVN Connector,无论选择哪个都会自动关闭. 解决方法: Help -> Install New So ...
- 别名的使用注意，""真坑。
我们使用别名都是使用as关键字. 大多数时候我们都会省略as关键字,然后后面直接加别名就好了.我的习惯是别名用双引号括起来. 今天因为这个习惯坑了我一大波 首先oracle的别名的规则: AS 别名 ...
- Jenkins部署war包到tomcat7，报错
1.部署tomcat7,报错,信息如下: [JENKINS] Archiving /opt/.jenkins/jobs/qxpt_jx-deploy/workspace/pom.xml to com. ...
- 用 PHPMailer 发送邮件
REFs http://gohom.win/2015/07/02/PHPmailer/ http://blog.wpjam.com/m/phpmailer/ https://www.kancloud. ...
- Sql 基础问题
Ref Projection and Selection 联结查询的原理(笛卡尔积) 设计 MySQL 数据表的时候一般都有一列为自增 ID,这样设计原因是什么,有什么好处?
- 【转】Linux下同时复制多个文件
一.命令方法 1．使用cp命令 cp /home/usr/dir/{file1,file2,file3,file4} /home/usr/destination/ 需要注意的是这几个文件之间不要有空格 ...
- python3 openpyxl基本操作
#coding:utf-8 import xlrd import xlwt # 读写2007 excel import openpyxl import sys #读取设备sn # def readSN ...
- [BZOJ5312]冒险
bzoj CSAcademy description 一个序列\(a_i\),支持区间与一个数,区间或一个数,求区间最大值. \(n,m\le2\times10^5\) sol 线段树每个节点上维护区 ...
- 【java基础】ThreadLocal的实现原理
[一]:ThreadLocal对象的大体实现原理===>当前线程对象有一个ThreadLocal.ThreadLocalMap属性.===>声明的ThreadLocal对象最终存储在当前线 ...