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 ...
随机推荐
- C语言----------链表的简单实现与操作
链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的. 链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成. 每个结点包括两个部 ...
- halcon之屌炸天的自标定（1）
本次先对halcon的自标定做个整体介绍,了解屌炸天的自标定在实际应用中的应用与实现方法,具体的编程细节将在后续的文章中介绍. halcon提供了一种自标定的算子,它可以在不用标定板的情况下,标定 ...
- React Native入门指南
转载自:http://www.jianshu.com/p/b88944250b25 前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Go ...
- I.MX6 Manufacturing Tool V2 (MFGTool2) ucl2.xml hacking
<!-- * Copyright (C) 2010-2013, Freescale Semiconductor, Inc. All Rights Reserved. * The CFG elem ...
- 注册dll文件
1.打开"开始-运行-输入regsvr32 XXX.dll",回车即可 2.win7 64位旗舰版系统运行regsvr32.exe提示版本不兼容 在运行regsvr32.exe的时 ...
- Armadillo安装及使用
以下转载自http://www.cnblogs.com/youthlion/archive/2012/05/15/2501465.html Armadillo是一个C++开发的线性代数库,在vs201 ...
- android高速上手（三）经常使用控件使用
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangpeifeng669/article/details/26288387 完毕了android的 ...
- TimeHelp 获取时间戳转换类
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Shar ...
- elasticsearch RESTful
一 .索引(index) 1. 创建索引 (1)第一种方式 PUT twitter { "settings" : { "index" : { "num ...
- 转转转！！Spring MVC控制器用@ResponseBody声明返回json数据报406的问题
本打算今天早点下班,结果下午测试调试程序发现一个问题纠结到晚上才解决,现在写一篇博客来总结下. 是这样的,本人在Spring mvc控制层用到了@ResponseBody标注,以便返回的数据为json ...