有時(shí)候我們需要在網(wǎng)頁(yè)上展示一些數(shù)據(jù),如某公司想在網(wǎng)頁(yè)上展示公司的庫(kù)存清單。如下表:
想在網(wǎng)頁(yè)上展示上述表格效果可以使用以下代碼:
創(chuàng)建表格的四個(gè)元素:
table、tbody、tr、th、td
1、<table>…</table>:整個(gè)表格以<table>
標(biāo)記開始、</table>
標(biāo)記結(jié)束。
2、<tbody>…</tbody>:如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結(jié)構(gòu), tbody包含行的內(nèi)容下載完優(yōu)先顯示,不必等待表格結(jié)束后在顯示,同時(shí)如果表格很長(zhǎng),用tbody分段,可以一部分一部分地顯示。(通俗理解table 可以按結(jié)構(gòu)一塊塊的顯示,不在等整個(gè)表格加載完后顯示。)
3、<tr>…</tr>:表格的一行,所以有幾對(duì)tr 表格就有幾行。
4、<td>…</td>:表格的一個(gè)單元格,一行中包含幾對(duì)<td>...</td>
,說(shuō)明一行中就有幾列。
5、<th>…</th>:表格的頭部的一個(gè)單元格,表格表頭。
6、表格中列的個(gè)數(shù),取決于一行中數(shù)據(jù)單元格的個(gè)數(shù)。
上述代碼在瀏覽器中顯示的默認(rèn)的樣式為:
總結(jié):
1、table表格在沒有添加css樣式之前,在瀏覽器中顯示是沒有表格線的
2、表頭,也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示
我來(lái)試試:為數(shù)學(xué)成績(jī)表添加一行內(nèi)容
1、在右部編輯器中的第25-29
行輸入下列代碼:
25.<tr>
26. <td>三班</td>
27. <td>32</td>
28. <td>80</td>
29.</tr>
結(jié)果圖:
示范 :
代碼:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>認(rèn)識(shí)table表標(biāo)簽</title>
</head>
<body>
<table>
<tbody>
<tr>
<th>班級(jí)</th>
<th>學(xué)生數(shù)</th>
<th>平均成績(jī)</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
顯示效果:
聯(lián)系客服