Html Table 合并单元格

最新推荐文章于 2025-03-21 20:45:18 发布

转载最新推荐文章于 2025-03-21 20:45:18 发布 · 636 阅读

java基础专栏收录该内容

167 篇文章

订阅专栏

本文详细介绍了HTML中表格的布局方式，包括基本表格、合并单元格、跨行与跨列等技巧，并通过实例展示了如何实现复杂的表格布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title></title>  
 </head>  
 <body>  
 <ol>  
     <li>基本表格</li>  
     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  
         <tr>  
             <td>1.1</td>  
             <td>1.2</td>  
             <td>1.3</td>  
         </tr>  
         <tr>  
             <td>2.1</td>  
             <td>2.2</td>  
             <td>2.3</td>  
         </tr>  
         <tr>  
             <td>3.1</td>  
             <td>3.2</td>  
             <td>3.3</td>  
         </tr>  
     </table>  
     <br/>  
     <li>表格合并列</li>  
     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  
         <tr>  
             <td colspan="3" >1.1</td>  
             <!--<td>1.2</td>-->  
             <!--<td>1.3</td>-->  
         </tr>  
         <tr>  
             <td>2.1</td>  
             <td>2.2</td>  
             <td>2.3</td>  
         </tr>  
         <tr>  
             <td>3.1</td>  
             <td>3.2</td>  
             <td>3.3</td>  
         </tr>  
     </table>  
     <br/>  
     <li>表格合并行</li>  
     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  
         <tr>  
             <td  rowspan="3">1.1</td>  
             <td>1.2</td>  
             <td>1.3</td>  
         </tr>  
         <tr>  
             <!--<td>2.1</td>-->  
             <td>2.2</td>  
             <td>2.3</td>  
         </tr>  
         <tr>  
             <!--<td>3.1</td>-->  
             <td>3.2</td>  
             <td>3.3</td>  
         </tr>  
     </table>  
     <br/>  
     <li>复杂表格</li>  
     <table border="2" bordercolor="black" width="300" cellspacing="0" cellpadding="5">  
         <tr>  
             <td >1.1</td>  
             <td colspan="2">1.2</td>  
             <!--<td>1.3</td>-->  
         </tr>  
         <tr>  
             <td >2.1</td>  
             <td rowspan="2">  
                 2.2  
                 <br/>  
                 3.2  
             </td>  
             <td>2.3</td>  
         </tr>  
         <tr>  
             <td>3.1</td>  
             <!--<td>3.2</td>-->  
             <td>3.3</td>  
         </tr>  
     </table>  
     <br/>  
 </ol>  
 </body>  
 </html>  