大家好，我是極智視界，本文介紹一下 HTML 列表和表格標(biāo)簽。

列表標(biāo)簽 可應(yīng)用在網(wǎng)頁中按照 行 展示關(guān)聯(lián)的內(nèi)容，如：排行榜、籃球數(shù)據(jù)統(tǒng)計(jì)、賬單" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > 如何用html編寫表格?

如何用html編寫表格?

時(shí)間：2024-02-08 21:55:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-08 21:55:01 來源：網(wǎng)站運(yùn)營

如何用html編寫表格?：歡迎關(guān)注我的公眾號 [極智視界]，獲取我的更多筆記分享

大家好，我是極智視界，本文介紹一下 HTML 列表和表格標(biāo)簽。

列表標(biāo)簽 可應(yīng)用在網(wǎng)頁中按照 行 展示關(guān)聯(lián)的內(nèi)容，如：排行榜、籃球數(shù)據(jù)統(tǒng)計(jì)、賬單等，特點(diǎn)是按照行的方式，整齊顯示內(nèi)容，種類有：無序列表、有序列表、自定義列表。而 表格標(biāo)簽 可以看做列表的升級，在網(wǎng)頁中以 行 + 列 的單元格方式整齊地展示數(shù)據(jù)。這里我們還會(huì)以用 HTML 來實(shí)現(xiàn)昨晚 男籃亞洲杯 小組賽B組 中國男籃 vs 中國臺北 中中國男籃的技術(shù)統(tǒng)計(jì)表單 進(jìn)行示例展示。

1. 列表標(biāo)簽

1.1 無序列表

使用場景：在網(wǎng)頁中表示一組沒有順序之分的列表，比如 賬單 等，列表的每一項(xiàng)前默認(rèn)顯示圓點(diǎn)標(biāo)識，其標(biāo)簽組成：

其中需要注意的是：

來寫一個(gè) 球類運(yùn)動(dòng) 的示例：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>球類運(yùn)動(dòng)</h1> <ul> <li>籃球</li> <li>足球</li> <li>羽毛球</li> <li>乒乓球</li> </ul></body></html> 效果展示：

1.2 有序列表

使用場景：在網(wǎng)頁中表示一組有順序之分的列表，比如 排行榜 等，列表的每一項(xiàng)前默認(rèn)顯示序號標(biāo)識，其標(biāo)簽組成：

其中需要注意的是：

來寫一個(gè) 籃板統(tǒng)計(jì) 的示例：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1>籃板統(tǒng)計(jì)</h1> <ol> <li>周琦: 10 個(gè)</li> <li>王哲林: 8.9 個(gè)</li> <li>李慕豪: 7 個(gè)</li> <li>郭艾倫: 5.5 個(gè)</li> </ol></body></html> 效果展示：

1.3 自定義列表

使用場景：是無序列表和有序列表的綜合體，標(biāo)簽組成：

其中需要注意的是：

2. 表格標(biāo)簽

2.1 表格的基本標(biāo)簽

使用場景：在網(wǎng)頁中以 行 + 列 的單元格的方式整齊地展示數(shù)據(jù)，標(biāo)簽組成：

其中需要注意的是：

2.2 表格相關(guān)屬性

使用場景：用于設(shè)置表格的基本展示效果，標(biāo)簽組成：

其中需要注意的是：

2.3 表格標(biāo)題和表頭單元格標(biāo)簽

使用場景：用于設(shè)置表格的整體大標(biāo)題和單元格標(biāo)題，標(biāo)簽組成：

其中需要注意的是：

2.4 表格結(jié)構(gòu)標(biāo)簽

使用場景：用于讓表格的內(nèi)容結(jié)構(gòu)分組，以突出表格的不同部分，如 頭部、主體、底部，使表格的語義更加清晰，標(biāo)簽組成：

其中需要注意的是：

學(xué)了這么多，下面咱們用一個(gè)綜合案例進(jìn)行實(shí)踐。

3. 男籃技術(shù)統(tǒng)計(jì)實(shí)現(xiàn)

昨晚 中國男籃輕取 中國臺北，周琦復(fù)出，在第四節(jié) 攻防一體 直接帶走比賽，其中臺北 林庭謙 怒砍 30分，而男籃這邊基本全民皆兵了，孫銘輝、大王、趙睿、小川、周琦 都表現(xiàn)的不錯(cuò)，不過比較遺憾的是上一場表現(xiàn) 賊棒 的 姜偉澤 出場時(shí)間過少，沒啥表現(xiàn)的機(jī)會(huì)。下面是直播吧的新聞截圖：

不多說了，下面讓我們用 前面學(xué)到的 HTML 相關(guān)知識 來實(shí)現(xiàn)一下 這場比賽男籃的技術(shù)統(tǒng)計(jì)：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { text-align: center; line-height: center; } img { text-align: center; } </style></head><body> <table border="1"> <caption><strong>男籃技術(shù)統(tǒng)計(jì)</strong></caption> <!-- 表頭 --> <tr> <th> <img src="./img/1.png"></th> <th>時(shí)間</th> <th>得分</th> <th>籃板</th> <th>助攻</th> <th>搶斷</th> <th>蓋帽</th> <th>投籃</th> <th>3分</th> <th>罰球</th> <th>失誤</th> <th>犯規(guī)</th> </tr> <!-- 大王 --> <tr> <td>王哲林</td> <!-- 姓名 --> <td>21</td> <!-- 時(shí)間 --> <td>17</td> <!-- 得分 --> <td>7</td> <!-- 籃板 --> <td>2</td> <!-- 助攻 --> <td>0</td> <!-- 搶斷 --> <td>0</td> <!-- 蓋帽 --> <td>8-11</td> <!-- 投籃 --> <td>0-0</td> <!-- 三分 --> <td>1-4</td> <!-- 罰球 --> <td>4</td> <!-- 失誤 --> <td>4</td> <!-- 犯規(guī) --> </tr> <!-- 孫銘徽 --> <tr> <td>孫銘徽</td> <!-- 姓名 --> <td>30</td> <!-- 時(shí)間 --> <td>16</td> <!-- 得分 --> <td>3</td> <!-- 籃板 --> <td>7</td> <!-- 助攻 --> <td>1</td> <!-- 搶斷 --> <td>0</td> <!-- 蓋帽 --> <td>7-12</td> <!-- 投籃 --> <td>2-3</td> <!-- 三分 --> <td>0-0</td> <!-- 罰球 --> <td>2</td> <!-- 失誤 --> <td>2</td> <!-- 犯規(guī) --> </tr> <!-- 12人大名單，太多了 不一一寫了 --> </table></body></html> 來看最終的效果：

好了，以上分享了 HTML 的列表和表格標(biāo)簽的實(shí)現(xiàn)。希望我的分享能對你的學(xué)習(xí)有一點(diǎn)幫助。




【公眾號傳送】






關(guān)鍵詞：編寫,表格

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉