|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
《零基础入门学习web开发》第14讲 数据就应该整整齐齐(下) | 学习笔记
· 程序(表格):
- <!DOCTYPE html>
- <html>
- <head>
- <title>鱼C学编程 - 第011课 - abbr元素展示</title>
- <meta charset="UTF-8"/>
- <style>
- table {
- border: 1px solid black;
- border-collapse: collapse;
- padding: 5px;
- }
- th {
- border: 1px solid black;
- padding: 5px;
-
- }
- thead th {
- background: grey;
- color: white;
- }
- tbody th {
- background: lightgrey;
- color: white;
- }
- td {
- border: 1px solid black;
- padding: 5px;
- }
- caption {
- color: green;
- padding: 10px;
- }
- </style>
- </head>
- <body>
- <table>
- <colgroup>
-
- <caption>以下全部都是假的<caption>
- <thead>
- <tr><th></th><th>姓名</th> <th>年龄</th> <th>随便说句话</th> <th>图片</th></tr>
- </thead>
- <tbody>
- <tr><th rowspan="2">鱼C</th><th>小甲鱼</th> <td>18</td> <td>让编程改变世界</td> <td><img src="https://ilovefishc.com/html5/html5/lesson13/test3/img/CaptainAmerica.jpg" alt="美国队长" width="300"></td></tr>
- <tr><th>不二如是</th> <td>28</td> <td>热爱编程等人,运气总不会太差,何况你还热爱鱼C!</td> <td><img src="https://ilovefishc.com/html5/html5/lesson13/test3/img/IronMan.jpg" alt="钢铁侠" width="300"></td></tr>
- </tbody>
- <tfoot><tr><td colspan="5" >上面的东西都是假的,请勿当真 ^_^ :-) </td></tr></tfoot>
- </table>
- <br><br>
- <table>
- <col style="background: red">
- <col span="2" style="background: green">
- <tr><td>1</td><td>2</td><td>3</td></tr>
- <tr><td>4</td><td>5</td><td>6</td></tr>
- <tr><td>7</td><td>8</td><td>9</td></tr>
- </table>
- </body>
- </html>
复制代码
· 运行效果:
|
评分
-
查看全部评分
|