有時候我們需要在網(wǎng)頁當(dāng)中添加一些數(shù)據(jù),如某公司想展示該公司員工的通信錄,如下表:
那我們就需要用到表格標(biāo)簽了, 這一章我們來學(xué)習(xí)表格標(biāo)簽,那么這些標(biāo)簽有什么特點(diǎn)呢?讓我們一起來探索吧。想要在網(wǎng)頁中實(shí)現(xiàn)以上效果,我們可以使用以下代碼:
上面代碼解釋:
創(chuàng)建表格的四個元素:table、tr、th、td
1、<table>…</table>:整個表格以<table>標(biāo)記開始、</table>標(biāo)記結(jié)束。
2、<tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。
3、<td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列。
4、<th>…</th>:表格的頭部的一個單元格,表格表頭。
5、表格中列的個數(shù),取決于一行中數(shù)據(jù)單元格的個數(shù)。
6、border屬性可以為表格添加邊框,屬性值為數(shù)字。
注意:
1、table標(biāo)簽用來定義整個表格,為雙標(biāo)簽,必須有結(jié)束標(biāo)簽。
2、table標(biāo)簽里面可以放caption標(biāo)簽和tr標(biāo)簽。
3、caption標(biāo)簽用來定義表格的標(biāo)題。
4、tr標(biāo)簽用來設(shè)置表格的行,tr里面只能放th或者td標(biāo)簽,一組tr標(biāo)簽代表一行。
5、th用來設(shè)置表格的標(biāo)題,會加粗居中顯示。也就是th標(biāo)簽中的文本默認(rèn)為粗體并且居中顯示。
6、td同來設(shè)置表格的列,一組td標(biāo)簽代表一列。
7、table表格在沒有添加border屬性之前, 在瀏覽器中顯示是沒有表格線的。
根據(jù)上面所學(xué)的知識,請從右邊編輯器的第10行開始輸入代碼,實(shí)現(xiàn)以下效果

<table border="1">
<caption>前端三劍客</caption>
<tr>
<th>知識點(diǎn)</th>
<th>重要程度</th>
<th>難度</th>
<th>學(xué)習(xí)周期</th>
</tr>
<tr>
<td>html</td>
<td>5星</td>
<td>3星</td>
<td>7天</td>
</tr>
<tr>
<td>css</td>
<td>5星</td>
<td>4星</td>
<td>10天</td>
</tr>
<tr>
<td>js</td>
<td>5星</td>
<td>5星</td>
<td>20天</td>
</tr>
</table>
請驗(yàn)證,完成請求
由于請求次數(shù)過多,請先驗(yàn)證,完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報