HTML表格嵌套、合並表格


一、表格元素< table>

table常用屬性

border:邊框像素 
width,height:表格寬度/高度 
bordercolor:表格邊框顏色 
bgcolor:表格背景顏色


二、tr,th,td元素

th和td元素是在tr中的 
一組tr代表一行 
一組th或td代表一列

<table border="1" width="800" bordercolor="#777777" bgcolor="#5f9ea0"> <tr> <th>asa</th> </tr> <tr> <td>hahha</td> </tr> </table>

效果 
這里寫圖片描述

從以上效果和代碼可以看出,th表示表頭,會自動居中,td表示普通內容


三、合並單元格(重點)

合並單元格在表格中是最重要的,需要兩個屬性colspan和rowspan 
1.colspan:合並的是該行的單元格,就是同一行不同列的單元格合並,比如colspan=”2”則需要刪除該行一個單元格,否則超出格子 
2.rowspan:合並的是該列的單元格,同列不同行,與colspan一樣若要rowspan=”2”將刪除下一列的一個td或th標簽,(不管刪除下一列的哪一個,這一行被合並,其他元素都是在后面的,除了該列以前元素)

<table border="1" width="70" bordercolor="#777777" bgcolor="#5f9ea0"> <tr> <th>asa</th><th>asas</th><th>as</th> </tr> <tr> <td rowspan="2">hahha</td><td>hahha</td><td>hahha</td> </tr> <!-- rowspan合並該列的兩個單元格,所以它的下一列將刪除一個單元格--> <tr> <td colspan="2">hahha</td> </tr> <!--colspan合並該行的2個單元格,所以該行刪除一個標簽--> <tr> <td>hahha</td><td>hahha</td><td>hahha</td> </tr> </table>

效果 
這里寫圖片描述


四、表格嵌套

- 在某個th或td中加table 
- 最好在嵌套表格的地方用合並單元格(就是把嵌套的表格放入合並的單元格)

<table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th> <th>password</th> <th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th><th>password</th><th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2">002</th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table></th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table>

五、表格練習代碼

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>阿水的阿里</title> </head> <body> <table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th> <th>password</th> <th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2"><table border="1" width="800" bordercolor="blue"> <caption><h1>阿水的阿里blog</h1></caption> <tr> <th>name</th><th>password</th><th>goal</th> </tr> <tr> <th>xlj</th><th colspan="2">001</th> </tr> <tr> <th>asa</th><th rowspan="2">002</th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table></th><th>88</th> </tr> <tr> <th>add</th><th>76</th> </tr> </table> </body> </html>

效果 
這里寫圖片描述


以上的表格標題在table中寫:

< caption>< h1>阿水的阿里blog< /h1>< /caption> 
caption是表格標題居中,並且一直跟着表格,不管表格怎么移動


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM