HTML表格-CSDN博客

本文链接：https://blog.csdn.net/weixin_45666821/article/details/102646136

表格

表格的标签可以生成一个二维表格，用于展示相应的信息
适用场景：XXX管理系统、购物车等

 <table border="1">  
      <thead> 
           <th></th>
      </thead>
      
      <tbody>
           <tr> 
               <td  rowspan="2" colspan="2">1</td>
               
               <td>3</td>
           </tr>
           <tr> 
              
             
               <td>3</td>
           </tr>
   
       </tbody>
 </table>

table是祖先元素，子元素是thead和tbody
thead表头 thead子元素th
tbody表格主体(不可省略，如没写浏览器会自动补充)
tbody子元素tr行 tr子元素td单元格
合并单元格 colspan合并列 rowspan合并行
border="1"设置表格边框

显示如图：
如图显示

【实例】

<!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>表格</title></head>

<body>
<table border="1">
        <caption border="1">购物车</caption>
         <thead>
                            <th>序号</th>
                            <th>产品</th>
                            <th>单价</th>
                            <th>个数</th>
                            <th>小计</th>
       </thead>
        <tbody>
                    <tr>
                           <td>1</td>
                           <td>apple</td>
                           <td>10</td>
                           <td>1</td>
                           <td>10</td>
                    </tr>
                    <tr>
                                 <td>2</td>
                                <td>vivo</td>
                                  <td>100</td>
                                  <td>2</td>
                                  <td>200</td>
                    </tr>
                    <tr> 
                                 <td>3</td>
                                 <td>xiaomi</td>
                                  <td>1000</td>
                                  <td>3</td>
                                  <td>3000</td> 
                    </tr>
                    <tr>
                           <td>4</td>
                           <td>huawei</td>
                           <td>10000</td>
                           <td>4</td>
                          <td>40000</td>
                 </tr>
                 <tr>
                         <td rowspan="2" colspan="3">合计</td>
                          <td>运费</td>
                          <td>100</td>
                 </tr>
                 <tr>
                       <td colspan="2">43310</td>
                 </tr>
                 </tbody>
                 </table>
                 </body>
</html>

在这里插入图片描述