时间：2024-02-15 03:10:01 | 来源：网站运营
时间：2024-02-15 03:10:01 来源：网站运营
用html5网页制作表格有没有简单方法？：第6章 表格| 标签 | 说明 |
|---|---|
| table | 表格 |
| caption | 标题 |
| thead | 表头（语义划分） |
| tbody | 表身（语义划分） |
| tfoot | 表脚（语义划分） |
| tr | 行 |
| th | 表头单元格 |
| td | 表行单元格 |
在线咨询
<table> <caption>表格标题</caption> <thead> <tr> <th>表头单元格1</th> <th>表头单元格2</th> </tr> </thead> <tbody> <tr> <td>表行单元格1</td> <td>表行单元格2</td> </tr> <tr> <td>表行单元格3</td> <td>表行单元格4</td> </tr> </tbody> <tfoot> <tr> <td>表行单元格5</td> <td>表行单元格6</td> </tr> </tfoot></table> 2、合并行与合并列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .tab1 { width: 300px; height: 100px; border: 1px solid gray; /* CSS==border-callapse */ border-collapse: collapse; } .tab1 td { border: 1px solid gray; } .tab2 { width: 300px; height: 100px; border: 5px solid gray; border-collapse: collapse; } .tab2 td { border: 1px solid gray; height: 33.33%; width: 33.33% } .tab3 { border: 4px double gray; width: 300px; height: 100px; border-collapse: collapse; } .tab3 td { border: 1px solid gray; width: 33.33%; height: 33.33% } .tab4 { width: 300px; height: 100px; border-spacing: 10px; } .tab4 td { border: 1px solid gray; } .tab5 { width: 300px; height: 100px; border-spacing: 0px; border-top: 1px solid gray } .tab5 td { border-bottom: 1px solid gray; } .tab6 { width: 300px; height: 300px; border: 1px solid gray; border-spacing: 10px; padding: 10px } .tab6 td { background-color: deepskyblue; } .last { empty-cells: hide; } </style></head><body> <!-- 表格1 --> <h1>1-细线边框</h1> <table class="tab1"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>2-粗线边框</h1> <table class="tab2"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>3-双边框</h1> <table class="tab3"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>4-工资表格</h1> <table class="tab4"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>5-单线表格</h1> <table class="tab5"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> <h1>6-日历表格</h1> <table class="tab6"> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td class="last"></td> </tr> </table></body></html>关键词：简单,方法,表格
