首页 > 代码库 > col标签的相关实验
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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。