欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

表格及合并单元格（02）

程序员文章站 2022-03-13 12:20:35
01.表格主要有以下部分： 1 2 3 4 5 6 7 8 9 10

01.表格主要有以下部分：

表格及合并单元格（02）
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title></title>
 5     </head>
 6     <body>
 7         <!--table：表格标签-->
 8         <table>
 9             <!--caption：表格标题-->
10             <caption>表格标题</caption>
11 
12             <!--thead：表格的头部分-->
13             <thead>
14             <!--tr：行标签-->
15             <tr>
16                 <!--th：表头单元格-->
17                 <th></th>
18             </tr>
19             </thead>
20             
21             <!--tbody：表格的主体部分-->
22             <tbody>
23                 <tr>
24                 <!--td：单元格-->
25                 <td></td>
26                 </tr>
27             </tbody>
28         </table>
29     </body>
30 </html>
单元格的主要结构

02.表格的具体实现：

表格及合并单元格（02）
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title></title>
  5     </head>
  6     <base target="_blank">
  7     <body>
  8         <table border="1" cellpadding="0" cellspacing="0" align="center" width="550">
  9             <caption><h4>今日小说排行耪</h4></caption>
 10             <thead>
 11                 <tr>                    
 12                 <th>排名</th>
 13                 <th>关键词</th>
 14                 <th>趋势</th>
 15                 <th>今日搜索</th>
 16                 <th>最近七日</th>
 17                 <th>相关链接</th>
 18             </tr>
 19             </thead>
 20             <tbody>
 21                 <tr>
 22                 <td>1</td>
 23                 <td>三生三世十里桃花</td>
 24                 <td><img src="images/up.jpg"></td>
 25                 <td>123</td>
 26                 <td>321</td>
 27                 <td>
 28                     <a href="http://www.baidu.com">百度</a>
 29                     <a href="http://www.sina.cn">新浪</a>
 30                     <a href="#">本站</a>
 31                 </td>
 32             </tr><tr>
 33                 <td>2</td>
 34                 <td>枕上书</td>
 35                 <td><img src="images/up.jpg"></td>
 36                 <td>123</td>
 37                 <td>321</td>
 38                 <td>
 39                     <a href="http://www.baidu.com">百度</a>
 40                     <a href="http://www.sina.cn">新浪</a>
 41                     <a href="#">本站</a>
 42                 </td>
 43             </tr><tr>
 44                 <td>3</td>
 45                 <td>微微一笑很倾城</td>
 46                 <td><img src="images/up.jpg"></td>
 47                 <td>123</td>
 48                 <td>321</td>
 49                 <td>
 50                     <a href="http://www.baidu.com">百度</a>
 51                     <a href="http://www.sina.cn">新浪</a>
 52                     <a href="#">本站</a>
 53                 </td>
 54             </tr><tr>
 55                 <td>4</td>
 56                 <td>小时代</td>
 57                 <td><img src="images/down.jpg"></td>
 58                 <td>23</td>
 59                 <td>32</td>
 60                 <td>
 61                     <a href="http://www.baidu.com">百度</a>
 62                     <a href="http://www.sina.cn">新浪</a>
 63                     <a href="#">本站</a>
 64                 </td>
 65             </tr><tr>
 66                 <td>5</td>
 67                 <td>一世倾城</td>
 68                 <td><img src="images/down.jpg"></td>
 69                 <td>12</td>
 70                 <td>21</td>
 71                 <td>
 72                     <a href="http://www.baidu.com">百度</a>
 73                     <a href="http://www.sina.cn">新浪</a>
 74                     <a href="#">本站</a>
 75                 </td>
 76             </tr><tr>
 77                 <td>6</td>
 78                 <td>还好遇见你</td>
 79                 <td><img src="images/up.jpg"></td>
 80                 <td>12</td>
 81                 <td>31</td>
 82                 <td>
 83                     <a href="http://www.baidu.com">百度</a>
 84                     <a href="http://www.sina.cn">新浪</a>
 85                     <a href="#">本站</a>
 86                 </td>
 87             </tr><tr>
 88                 <td>7</td>
 89                 <td>太子妃</td>
 90                 <td><img src="images/down.jpg"></td>
 91                 <td>13</td>
 92                 <td>21</td>
 93                 <td>
 94                     <a href="http://www.baidu.com">百度</a>
 95                     <a href="http://www.sina.cn">新浪</a>
 96                     <a href="#">本站</a>
 97                 </td>
 98             </tr>
 99             </tbody>
100             
101         </table>
102     </body>
103 </html>
今日小说排行的表格代码实现

得到以下结果：

表格及合并单元格（02）

03.合并单元格：

表格及合并单元格（02）
  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title></title>
  5     </head>
  6     <body>
  7         <table border="1" width="550" cellpadding="0" cellspacing="0">
  8             <caption><h4>跨列合并</h4></caption>
  9             <tr>
 10                 <td>1</td>
 11                 <td>2</td>
 12                 <td>3</td>
 13                 <td>4</td>
 14             </tr><tr>
 15                 <td>5</td>
 16                 <td>6</td>
 17                 <td>7</td>
 18                 <td>8</td>
 19             </tr><tr>
 20                 <td>9</td>
 21                 <td>10</td>
 22                 <td>11</td>
 23                 <td>12</td>
 24             </tr><tr>
 25                 <td>13</td>
 26                 <td>14</td>
 27                 <td colspan="4">15</td>
 28                 <!--<td>16</td>-->
 29             </tr><tr>
 30                 <td>17</td>
 31                 <td>18</td>
 32                 <!--<td>19</td>-->
 33                 <!--<td>20</td>-->
 34             </tr>
 35             
 36         </table>
 37         1.先确认跨列合并colspan<br />
 38         2.找到目标单元格，先上↓后下，先左→后右 <br />
 39         3.合并n,后删除n-1个单元格 <br />
 40         <table border="1" width="550" cellpadding="0" cellspacing="0">
 41             <caption><h4>跨行合并</h4></caption>
 42             <tr>
 43                 <td>1</td>
 44                 <td>2</td>
 45                 <td>3</td>
 46                 <td>4</td>
 47             </tr><tr>
 48                 <td>5</td>
 49                 <td>6</td>
 50                 <td>7</td>
 51                 <td>8</td>
 52             </tr><tr>
 53                 <td>9</td>
 54                 <td>10</td>
 55                 <td>11</td>
 56                 <td>12</td>
 57             </tr><tr>
 58                 <td>13</td>
 59                 <td>14</td>
 60                 <td rowspan="4">15</td>
 61                 <!--<td>16</td>-->
 62             </tr><tr>
 63                 <td>17</td>
 64                 <td>18</td>
 65                 <!--<td>19</td>-->
 66                 <!--<td>20</td>-->
 67             </tr>
 68             
 69         </table>
 70         1.先确认跨列合并rowspan<br />
 71         2.找到目标单元格，先上↓后下，先左→后右<br />
 72         3.合并n,后删除n-1个单元格<br />
 73         <table border="1" width="550" cellpadding="0" cellspacing="0">
 74             <caption><h4>跨行列合并</h4></caption>
 75             <tr>
 76                 <td>1</td>
 77                 <td>2</td>
 78                 <td>3</td>
 79                 <td>4</td>
 80             </tr><tr>
 81                 <td>5</td>
 82                 <td>6</td>
 83                 <td>7</td>
 84                 <td>8</td>
 85             </tr><tr>
 86                 <td>9</td>
 87                 <td>10</td>
 88                 <td>11</td>
 89                 <td>12</td>
 90             </tr><tr>
 91                 <td>13</td>
 92                 <td>14</td>
 93                 <td rowspan="4" colspan="4">15</td>
 94                 <!--<td>16</td>-->
 95             </tr><tr>
 96                 <td>17</td>
 97                 <td>18</td>
 98                 <!--<td>19</td>-->
 99                 <!--<td>20</td>-->
100             </tr>
101             
102         </table>
103     </body>
104 </html>
合并单元格代码

运行结果：

表格及合并单元格（02）

总结表格

1.表格提供了html中定义表格数据的方法。

2.表格中有行中的单元格组成。

3.表格中没有列元素，列的个数取决于行的单元格个数。

上一篇： html的基础知识

下一篇： CSS 伪元素::marker详解

推荐阅读