表格中的colspan colspan

Posted xuman0927

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表格中的colspan colspan相关的知识,希望对你有一定的参考价值。

colspan  属性规定单元格可横跨的列数 colspan="2"

rowspan 属性规定单元格可横跨的行数 rowspan="2"

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Demo</title>
 9 </head>
10 
11 <body>
12   
13     <section>
14         <h1>表格</h1>
15         <table border="1">
16             <thead>
17                 <tr>
18                     <th>表头1</th>
19                     <th>表头2</th>
20                     <th>表头3</th>
21                 </tr>
22             </thead>
23             <tbody>
24                 <tr>
25                     <td>数据1</td>
26                     <td>数据2</td>
27                     <td>数据3</td>
28                 </tr>
29                 <tr>
30                     <td colspan="2">数据colspan可横跨的列数1</td>
31                     <td>数据3</td>
32                 </tr>
33                 <tr>
34                     <td rowspan="2">数据rowspan可横跨的行数1</td>
35                     <td>数据2</td>
36                     <td>数据3</td>
37                 </tr>
38                 <tr>
39                     <td>数据2</td>
40                     <td>数据3</td>
41                 </tr>
42             </tbody>
43         </table>
44     </section>
45    
46 </body>
47 
48 </html>

技术图片

 

以上是关于表格中的colspan colspan的主要内容,如果未能解决你的问题,请参考以下文章

清除响应表中的 colspan

如何在 HTML 表格中使用 colspan 和 rowspan?

html电子邮件中的rowspan和colspan

如何根据媒体查询使用 colspan/rowspan 创建不同的类似表格的布局?

自动表格布局和 colspan

html如何对表格的一行中的几列进行合并的代码