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 ...
随机推荐
- 如何写入和读取从 Microsoft 消息队列在 Visual C#
注意:这篇文章是由无人工介入的微软自动的机器翻译软件翻译完成.微软很高兴能同时提供给您由人工翻译的和由机器翻译的文章, 以使您能使用您的语言访问所有的知识库文章.然而由机器翻译的文章并不总是完美的.它 ...
- 编译安装zabbix3.2.5
1. 配置lnmp环境 首先配置Nginx+mysql+php-fpm的系统环境,具体配置见另一篇文章 2. 编译安装zabbix 2.1 下载并解压zabbix 可以到zabbix官网下载zabbi ...
- 安装wamp后，127.0.0.1可以访问，localhost不能访问
今天安装wamp后,127.0.0.1可以访问,localhost不能访问,出现 “error You don't have permission to access”的错误, 网上查了下,很多方法都 ...
- 在ASP.NET中将GridView数据导出到Word、Excel
在ASP.NET中将GridView数据导出到Word.Excel asp.net,导出gridview数据到Word,Excel,PDF #region Export to Word, Exce ...
- L206
There are so many new books about dying that there are now special shelves set aside forthem in book ...
- React Native入门指南
转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...
- Codeforces 606-C：Sorting Railway Cars（LIS）
C. Sorting Railway Cars time limit per test 2 seconds memory limit per test 256 megabytes input stan ...
- 【转】 python 删除非空文件夹
转自:https://blog.csdn.net/xiaodongxiexie/article/details/77155864 一般删除文件时使用os库,然后利用os.remove(path)即可完 ...
- logstash使用分享
1.logstash时间处理函数 当业务场景需要自有的time字段覆盖@timestamp字段的情况下 需要使用 date { match => ["time", " ...
- 微信小程序获取用户openid，头像昵称信息，后台java代码
https://blog.csdn.net/qq_39851704/article/details/79025557