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; 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这四种样式。