table標簽,認識網頁上的表格
阿新 • • 發佈:2017-10-01
del 認識 ima 技術 網頁 head rip lang oot
table標簽,認識網頁上的表格
有時候我們需要在網頁上展示一些數據,如某公司想在網頁上展示公司的庫存清單。如下表:
想在網頁上展示上述表格效果可以使用以下代碼:
創建表格的四個元素:
table、tbody、tr、th、td
1、<table>…</table>:整個表格以<table>
標記開始、</table>
標記結束。
2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加載完後才顯示。加上這些表格結構, tbody包含行的內容下載完優先顯示,不必等待表格結束後在顯示,同時如果表格很長,用tbody分段,可以一部分一部分地顯示。(通俗理解table 可以按結構一塊塊的顯示,不在等整個表格加載完後顯示。)
3、<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。
4、<td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>
,說明一行中就有幾列。
5、<th>…</th>:表格的頭部的一個單元格,表格表頭。
6、表格中列的個數,取決於一行中數據單元格的個數。
上述代碼在瀏覽器中顯示的默認的樣式為:
總結:
1、table表格在沒有添加css樣式之前,在瀏覽器中顯示是沒有表格線的
2、表頭,也就是th標簽中的文本默認為粗體並且居中顯示
任務
我來試試:為數學成績表添加一行內容
1、在右部編輯器中的第25-29
行輸入下列代碼:
25.<tr>
26. <td>三班</td>
27. <td>32</td>
28. <td>80</td>
29.</tr>
結果圖:
代碼
table標簽,認識網頁上的表格