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这四种样式。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
