在html中,table是表格,文法格式為「
表格內容
」。一個簡單的HTML表格包括table元素,一個或多個tr、th以及td元素;tr元素定義表格行,th元素定義表頭,td元素定義表格單元。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
簡單的HTML表格是由table標籤以及一個或多個tr,th,td元素組成。
table標籤
table標籤可以定義簡單的表格,它主要是用來控製表格的外邊框的,它擁有margin屬性主要是設定表格的外邊距。 border屬性用於設定表格的邊框以及cellspacing屬性用於規定單元格之間的空白
#tr部分:
tr是主要用來分割表格中有幾行,一般只需要用來設定heigth
#td部分:
td是用來控制每個單元格的屬性,可是分別控制每個單元格的上下左右邊框,其中也包含padding屬性。
th部分:
th的用法與td的用法相同,只是它是用來區分錶頭的。
注意:在表格中國使用百分比和使用像素為單位是相同的
範例:
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <table border="1"> <tr> <th>NAME</th> <th>AGE</th> <th>NUMBER</th> </tr> <tr> <td>xm</td> <td>10</td> <td>2020</td> </tr> <tr> <td>xh</td> <td>3</td> <td>2021</td> </tr> <tr> <td>xf</td> <td>4</td> <td>2010</td> </tr> </table> </body> </html>
效果圖:
#表格的跨行與跨列處理
我們也可以透過設定儲存格的colspan屬性使其跨列合併,也可以設定儲存格的rowspan屬性使其跨行合併,如下所示
實例:
<!DOCTYPE html> <html> <head> <title>test</title> </head> <body> <table border="1"> <tr> <th>NAME</th> <th>AGE</th> <th>NUMBER</th> </tr> <tr> <td rowspan="2">xm</td> <td>10</td> <td>2020</td> </tr> <tr> <td>3</td> <td>2021</td> </tr> <tr> <td>xf</td> <td>4</td> <td>2010</td> </tr> </table> </body> </html>
結果:
推薦學習:html影片教學
以上是html5中table的意思是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!