01.表格主要有以下部分： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <!--table：表格標簽--> 8 <table> 9 <!--caption：表格標題--> 10 <caption ...
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.表格中沒有列元素，列的個數取決於行的單元格個數。
