表格及合并单元格
01.表格主要有以下部分：
<!DOCTYPE html><html><head><title></title></head><body><!--table：表格标签--><table><!--caption：表格标题--><caption>表格标题</caption><!--thead：表格的头部分--><thead><!--tr：行标签--><tr><!--th：表头单元格--><th></th></tr></thead><!--tbody：表格的主体部分--><tbody><tr><!--td：单元格--><td></td></tr></tbody></table></body></html>
单元格的主要结构
02.表格的具体实现：
<!DOCTYPE html><html><head><title></title></head><base target="_blank"><body><table border="1" cellpadding="0" cellspacing="0" align="center" width="550"><caption><h4>今日小说排行耪</h4></caption><thead><tr><th>排名</th><th>关键词</th><th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>三生三世十里桃花</td><td><img src="images/up.jpg"></td><td>123</td><td>321</td><td><a href="http://www.baidu.com">百度</a><a href="http://www.sina.cn">新浪</a><a href="#">本站</a></td></tr><tr><td>2</td><td>枕上书</td><td><img src="images/up.jpg"></td><td>123</td><td>321</td><td><a href="http://www.baidu.com">百度</a><a href="http://www.sina.cn">新浪</a><a href="#">本站</a></td></tr><tr><td>3</td><td>微微一笑很倾城</td><td><img src="images/up.jpg"></td><td>123</td><td>321</td><td><a href="http://www.baidu.com">百度</a><a href="http://www.sina.cn">新浪</a><a href="#">本站</a></td></tr><tr><td>4</td><td>小时代</td><td><img src="images/down.jpg"></td><td>23</td><td>32</td><td><a href="http://www.baidu.com">百度</a><a href="http://www.sina.cn">新浪</a><a href="#">本站</a></td></tr><tr><td>5</td><td>一世倾城</td><td><img src="images/down.jpg"></td><td>12</td><td>21</td><td><a href="http://www.baidu.com">百度</a><a href="http://www.sina.cn">新浪</a><a href="#">本站</a></td></tr><tr><td>6</td><td>还好遇见你</td><td><img src="images/up.jpg"></td><td>12</td><td>31</td><td><a href="http://www.baidu.com">百度</a><a href="http://www.sina.cn">新浪</a><a href="#">本站</a></td></tr><tr><td>7</td><td>太子妃</td><td><img src="images/down.jpg"></td><td>13</td><td>21</td><td><a href="http://www.baidu.com">百度</a><a href="http://www.sina.cn">新浪</a><a href="#">本站</a></td></tr></tbody></table></body></html>
今日小说排行的表格代码实现
得到以下结果：
03.合并单元格：
<!DOCTYPE html><html><head><title></title></head><body><table border="1" width="550" cellpadding="0" cellspacing="0"><caption><h4>跨列合并</h4></caption><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td colspan="4">15</td><!--<td>16</td>--></tr><tr><td>17</td><td>18</td><!--<td>19</td>--><!--<td>20</td>--></tr></table>1.先确认跨列合并colspan<br />2.找到目标单元格，先上↓后下，先左→后右 <br />3.合并n,后删除n-1个单元格 <br /><table border="1" width="550" cellpadding="0" cellspacing="0"><caption><h4>跨行合并</h4></caption><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td rowspan="4">15</td><!--<td>16</td>--></tr><tr><td>17</td><td>18</td><!--<td>19</td>--><!--<td>20</td>--></tr></table>1.先确认跨列合并rowspan<br />2.找到目标单元格，先上↓后下，先左→后右<br />3.合并n,后删除n-1个单元格<br /><table border="1" width="550" cellpadding="0" cellspacing="0"><caption><h4>跨行列合并</h4></caption><tr><td>1</td><td>2</td><td>3</td><td>4</td></tr><tr><td>5</td><td>6</td><td>7</td><td>8</td></tr><tr><td>9</td><td>10</td><td>11</td><td>12</td></tr><tr><td>13</td><td>14</td><td rowspan="4" colspan="4">15</td><!--<td>16</td>--></tr><tr><td>17</td><td>18</td><!--<td>19</td>--><!--<td>20</td>--></tr></table></body></html>
合并单元格代码
运行结果：
总结表格
1.表格提供了html中定义表格数据的方法。
2.表格中有行中的单元格组成。
3.表格中没有列元素，列的个数取决于行的单元格个数。
男娘i
灰太狼
超、凢脫俗
朱雀
你的名字
还没有评论，来说两句吧...