| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Document</title> | |
| <style> | |
| table | |
| { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| table tr | |
| { | |
| height: 50px; | |
| text-align: center; | |
| } | |
| table td,table th | |
| { | |
| border: 1px solid black; | |
| border-collapse: collapse; | |
| } | |
| caption h1 | |
| { | |
| text-align: center; | |
| font-size: 24px; | |
| } | |
| thead | |
| { | |
| background: #49638C; | |
| color: white; | |
| } | |
| td[colspan="3"] | |
| { | |
| text-align: right; | |
| } | |
| tfoot | |
| { | |
| background: #8895ab; | |
| color: white; | |
| } | |
| tbody tr:nth-child(odd) | |
| { | |
| background: #c8cace; | |
| } | |
| tbody tr:hover | |
| { | |
| background:#C7C2F5; | |
| } | |
| tbody tr:nth-child(2n) td:first-child | |
| { | |
| color: aqua; | |
| } | |
| tbody tr:nth-child(2n+1) td:first-child | |
| { | |
| color: cornflowerblue; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <table> | |
| <caption> | |
| <h1>lorem4</h1> | |
| </caption> | |
| <thead> | |
| <tr> | |
| <th>Lorem.</th> | |
| <th>Quibusdam!</th> | |
| <th>Repellat.</th> | |
| <th>Accusamus.</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Lorem.</td> | |
| <td>Similique.</td> | |
| <td>Excepturi!</td> | |
| <td>Ipsa!</td> | |
| </tr> | |
| <tr> | |
| <td>Laborum!</td> | |
| <td>Iure.</td> | |
| <td>Quia.</td> | |
| <td>Debitis.</td> | |
| </tr> | |
| <tr> | |
| <td>Nam?</td> | |
| <td>Natus.</td> | |
| <td>Omnis?</td> | |
| <td>Sunt!</td> | |
| </tr> | |
| <tr> | |
| <td>Praesentium?</td> | |
| <td>Quasi.</td> | |
| <td>Explicabo?</td> | |
| <td>Laudantium?</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <td colspan="3">Lorem.</td> | |
| <td>Possimus.</td> | |
| </tr> | |
| <tr> | |
| <td colspan="3">Eos.</td> | |
| <td>Laudantium?</td> | |
| </tr> | |
| </tfoot> | |
| </table> | |
| </body> | |
| </html> |
初学者表格代码
猜你喜欢
转载自www.cnblogs.com/2018-11-4/p/9905713.html
今日推荐
周排行