表格及合并单元格（02）
01.表格主要有以下部分：
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.表格的具体实现：
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>今日小说排行的表格代码实现
得到以下结果：
03.合并单元格：
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>合并单元格代码
运行结果：
总结表格
1.表格提供了html中定义表格数据的方法。
2.表格中有行中的单元格组成。
3.表格中没有列元素，列的个数取决于行的单元格个数。
优质内容筛选与推荐>>1、Reporting Services 中关于汉字乱码问题解决方法
2、FreeSwitch Sip【转】
3、端口被占用
4、No saved view state could be found for the view identifier解决方法
5、全网最详细的Sublime Text 3的激活（图文详解）