全棧之前端 | 5.HTML表格列表標(biāo)簽元素學(xué)習(xí)篇

[ 點(diǎn)擊 ?? 關(guān)注「全棧工程師修煉指南」公眾號(hào) ]

設(shè)為「?? 星標(biāo)」帶你從基礎(chǔ)入門(mén) 到 全棧實(shí)踐 再到 放棄學(xué)習(xí)！
涉及 網(wǎng)絡(luò)安全運(yùn)維、應(yīng)用開(kāi)發(fā)、物聯(lián)網(wǎng)IOT、學(xué)習(xí)路徑、個(gè)人感悟 等知識(shí)分享。

希望各位看友多多支持【關(guān)注、點(diǎn)贊、評(píng)論、收藏、投幣】，助力每一個(gè)夢(mèng)想。

【WeiyiGeek Blog's - 花開(kāi)堪折直須折，莫待無(wú)花空折枝 】
作者主頁(yè): 【 https://weiyigeek.top 】
博客地址: 【 https://blog.weiyigeek.top 】
作者答疑學(xué)習(xí)交流群：歡迎各位志同道合的朋友一起學(xué)習(xí)交流【點(diǎn)擊 ?? 加入交流群】, 或者關(guān)注公眾號(hào)回復(fù)【學(xué)習(xí)交流群】。

0x00 前言簡(jiǎn)述
0x01 表格元素
0x01 表格元素

首發(fā)地址: https://mp.weixin.qq.com/s/nvCx13NBUI3LF1c_sm4-zg

0x00 前言簡(jiǎn)述

本章將主要給各位看友介紹表格 table 與列表 list 中常用的標(biāo)簽元素屬性，本節(jié)標(biāo)簽一覽如下所示:

表格

<table> 定義表格，一般表格數(shù)據(jù)太多，就會(huì)下載一點(diǎn)顯示一點(diǎn).
<caption> 定義表格標(biāo)題
<th> 定義表格的表頭，與表格單元數(shù)量相同就行.
<tr> 定義表格的行，有幾個(gè)就有幾行
<td> 定義表格單元，有幾對(duì)就有幾列
<col> 定義用于表格列的屬性
<colgroup> 定義表格列的組
<thead> 定義表格的頁(yè)眉
<tbody> 定義表格的主體，全部下載才顯示
<tfoot> 定義表格的頁(yè)腳

列表

<ol>: 定義有序列表。
<ul>: 定義無(wú)序列表。
<li>: 定義列表項(xiàng)。
<dl>: 定義定義列表。
<dt>: 定義定義項(xiàng)目。
<dd>: 定義定義的描述。

0x01 表格元素

table 標(biāo)簽

描述: 該標(biāo)簽定義 HTML 表格，一個(gè)簡(jiǎn)單的 HTML 表格由 table 元素以及一個(gè)或多個(gè) tr、th 或 td 元素組成，其中 tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元。(后續(xù)會(huì)介紹)

溫馨提示:

HTML 與 XHTML 之間的差異: 在 HTML 4.01 中，table 元素的 "align" 和 "bgcolor" 屬性是不被贊成使用的，在 XHTML 1.0 Strict DTD，table 元素的 "align" 和 "bgcolor" 屬性是不被支持的。

caption 標(biāo)簽

描述: 該元素定義表格標(biāo)題，其標(biāo)簽必須緊隨 table 標(biāo)簽之后。
示例:

<!-- 示例1.本例演示一個(gè)帶標(biāo)題 (caption) 的表格< -->
<table border="1">
  <caption>表格標(biāo)題</caption>
  <tr>
    <th>這是表頭</th>
  </tr>
  <tr>
    <td>數(shù)據(jù)單元</td>
  </tr>
  <tr>
     <td>數(shù)據(jù)單元</td>
  </tr>
  <tr>
     <td>數(shù)據(jù)單元</td>
  </tr>
</table>

溫馨提示: 只能對(duì)每個(gè)表格定義一個(gè)標(biāo)題,通常這個(gè)標(biāo)題會(huì)被居中于表格之上。

tr 標(biāo)簽

描述: 該<tr>元素定義表格中的行 Row，同一行可同時(shí)出現(xiàn) <td> 和<th> 元素。

th 標(biāo)簽

描述: 該<th>元素定義表格內(nèi)的表頭單元格，這部分特征是由 scope and headers 屬性準(zhǔn)確定義的。

屬性:

rowspan: 屬性指示單元格擴(kuò)展的行數(shù)，其默認(rèn)值為1；如果其值設(shè)置為0，則它將一直延伸到單元格所屬的表節(jié)（<thead>、<tbody>、<tfoot>，即使隱式定義）的末尾
colspan: 屬性包含一個(gè)正整數(shù)表示了每單元格中擴(kuò)展列的數(shù)量。
headers: 屬性包含了一個(gè)空間分隔的字符串的列表，每個(gè)與其他<th>元素相關(guān)聯(lián)的id 屬性一一對(duì)應(yīng)。
scope:枚舉屬性定義了表頭元素 (在<th>中定義) 關(guān)聯(lián)的單元格。

row: 表頭關(guān)聯(lián)一行中所有的單元格。
col: 表頭關(guān)聯(lián)一列中所有的單元格。
rowgroup:表頭屬于一個(gè)行組并與其中所有單元格相關(guān)聯(lián)。這些單元格可以被放在表頭的左側(cè)或右側(cè)，取決于 <table> 元素中 dir 屬性的值。
colgroup: 表頭屬于一個(gè)列組并與其中所有單元格相關(guān)聯(lián)。
auto

td 標(biāo)簽

描述: 該 <td> 元素，定義了一個(gè)包含數(shù)據(jù)的表格單元格
屬性: 參考 th 標(biāo)簽屬性
示例:

<!-- 示例1.一行一列 -->
<table border="1">
<tr><td>100</td></tr>
</table>

<!-- 示例2.一行三列 -->
<table border="1">
<tr>
  <td>100</td>
  <td>200</td>
  <td>300</td>
</tr>
</table>

<!-- 示例3.普通（橫向）表頭 -->
<table border="1">
<tr>
  <th>姓名</th>
  <th>電話</th>
  <th>電話</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<!-- 示例4.垂直的表頭 -->
<table border="1">
<tr><th>姓名</th><td>Bill Gates</td></tr>
<tr><th>電話</th><td>555 77 854</td></tr>
<tr><th>電話</th><td>555 77 855</td></tr>
</table>


<!-- 示例5.橫跨兩列的單元格 -->
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">電話</th>   <!-- colspan=2: 表示合并兩列-->
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<!-- 示例6.橫跨兩行的單元格-->
<table border="1">
<tr>
  <th>姓名</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">電話</th> <!-- rowspan=2: 表示合并兩行 -->
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

WeiyiGeek.演示如何定義跨行或跨列的表格單元格圖

溫馨提示: 上述演示如何定義跨行或跨列的表格單元格。

表格綜合示例

<style>
table { 
  margin-left: auto; 
  margin-right: auto;
  border: 1px solid black; 
  line-height: 1.25;
  width: 100%;
  text-align: center; 
  border-spacing: 0px 1px; 
  border-collapse: collapse;
  table-layout:fixed;
}

table th { 
  border: 1px solid black;
  line-height: 1;
  padding: 7px;
  background-color: #dddddd;
  text-align:center;
}

table td { 
  border: 1px solid black; 
  padding: 5px;
  text-align:left;
}
</style>
<!-- 示例1.常規(guī)表格示例 -->
<table border="1">
  <caption style="font-weight: bolder;">常規(guī)表格示例</caption>
  <tr>
    <th>班級(jí)</th>
    <th>人數(shù)</th>
    <th>優(yōu)生率</th>
  </tr>
  <tr>
    <td>一班</td>
    <td>30</td>
    <td>90%</td>
  </tr>
  <tr>
    <td>二班</td>
    <td>50</td>
    <td>80%</td>
  </tr>
</table>
<p>每個(gè)表格由 table 標(biāo)簽開(kāi)始。</p>
<p>每個(gè)表格行由 tr 標(biāo)簽開(kāi)始。</p>
<p>每個(gè)表格頭由 th 標(biāo)簽指定。</p>
<p>每個(gè)表格數(shù)據(jù)由 td 標(biāo)簽開(kāi)始。</p>

<!-- 示例2.關(guān)聯(lián)表頭示例 -->
<table>
  <caption>Color names and values</caption>
  <tbody>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">HEX</th>
      <th scope="col">HSLa</th>
      <th scope="col">RGBa</th>
    </tr>
    <tr>
      <th scope="row">Teal</th>
      <td><code>#51F6F6</code></td>
      <td><code>hsla(180, 90%, 64%, 1)</code></td>
      <td><code>rgba(81, 246, 246, 1)</code></td>
    </tr>
    <tr>
      <th scope="row">Goldenrod</th>
      <td><code>#F6BC57</code></td>
      <td><code>hsla(38, 90%, 65%, 1)</code></td>
      <td><code>rgba(246, 188, 87, 1)</code></td>
    </tr>
  </tbody>
</table>

WeiyiGeek.table表格綜合示例1結(jié)果圖

colgroup 標(biāo)簽

描述: 在 HTML 中的表格列組（Column Group <colgroup>）標(biāo)簽用來(lái)定義表中的一組列表。
屬性:

span: 此屬性包含一個(gè)正整數(shù), 指示<colgroup>元素跨越的連續(xù)列數(shù), 如果不存在，則其默認(rèn)值為1
withd: 此屬性為當(dāng)前列組中的每個(gè)列指定默認(rèn)寬度, 可能采用特殊形式 0* 或者 0.5*表示組中每一列的寬度應(yīng)為保持列內(nèi)容所需的最小寬度。

col 標(biāo)簽

描述: 在HTML <col> 元素定義表格中的列，并用于定義所有公共單元格上的公共語(yǔ)義, 它通常位于 <colgroup> 元素內(nèi)。
屬性: 與 colgroup 標(biāo)簽類(lèi)似。

示例:

<style>
.build {
  background-color: #d7d9f2;
}

.explain {
  background-color: #ffe8d4;
}
td {
  text-align: center;
}
</style>
<table>
  <caption>編程開(kāi)發(fā)語(yǔ)言</caption>
  <colgroup>
      <col>
      <col span="2" class="build">
      <col span="2" class="explain">
  </colgroup>
  <tr>
      <td> </td>
      <th scope="col">C</th>
      <th scope="col">C++</th>
      <th scope="col">Python</th>
      <th scope="col">JavaScript</th>
  </tr>
  <tr>
      <th scope="row">Skill</th>
      <td>Smarts</td>
      <td>Dex, acrobat</td>
      <td>Super speed</td>
      <td>Super speed</td>
  </tr>
</table>

執(zhí)行結(jié)果:
WeiyiGeek.colgroup與col標(biāo)簽圖

溫馨提示:

[] : 如果您希望在 colgroup 內(nèi)部為每個(gè)列規(guī)定不同的屬性值時(shí)，請(qǐng)使用此元素。如果沒(méi)有 col 元素，列會(huì)從 colgroup 那里繼承所有的屬性值。
[] : col 元素是僅包含屬性的空元素, 如需創(chuàng)建列，您就必須在 tr 元素內(nèi)部規(guī)定 td 元素。

thead 標(biāo)簽

描述: 該元素定義了一組定義表格的列頭的行, 通常該元素應(yīng)該與 <tbody> 和 <tfoot> 元素結(jié)合起來(lái)使用，用來(lái)規(guī)定表格的各個(gè)部分（表頭、主體、頁(yè)腳）。

通過(guò)使用這些元素，使瀏覽器有能力支持獨(dú)立于表格表頭和表格頁(yè)腳的表格主體滾動(dòng)，當(dāng)包含多個(gè)頁(yè)面的長(zhǎng)的表格被打印時(shí)，表格的表頭和頁(yè)腳可被打印在包含表格數(shù)據(jù)的每張頁(yè)面上。

tbody 標(biāo)簽

描述: 該 HTML 元素封裝了一系列表格的行（<tr> 元素），代表了它們是表格（<table>）主要內(nèi)容的組成部分。

tfoot 標(biāo)簽

描述: 該HTML 元素 <tfoot> 定義了一組表格中各列的匯總行, 其包含的元素永遠(yuǎn)在table底部。

示例:

<style type="text/css">
table {border: 1px solid black; }
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
</style>
<table>
  <caption>表格標(biāo)題</caption>
  <!-- 頭部 -->
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <!-- 尾部 -->
  <tfoot>
    <tr>
      <td scope="row">文具；信紙；信箋</td>
      <td>支出；開(kāi)支；</td>
    </tr>
    <tr>
      <td scope="row">文具；信紙；信箋</td>
      <td>支出；開(kāi)支；</td>
    </tr>
  </tfoot>
  <!-- 主體 -->
  <tbody>
      <tr>
        <th scope="row">Donuts</th>
        <td>3,000</td>
      </tr>
      <tr>
        <th scope="row">Stationery</th>
        <td>18,000</td>
      </tr>
  </tbody>
</table>

執(zhí)行結(jié)果:
WeiyiGeek.thead-tbody-tfoot標(biāo)簽結(jié)果圖

溫馨提示: thead, tbody, 和 tfoot 元素默認(rèn)不會(huì)影響表格的布局。不過(guò)，您可以使用 CSS 來(lái)為這些元素定義樣式，從而改變表格的外觀。

綜合實(shí)踐： https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/04.Table.html

0x01 表格元素

描述: HTML 支持有序、無(wú)序和定義列表, 其常用標(biāo)簽私有如下。

li 標(biāo)簽

描述: HTML <li> 元素（或稱(chēng) HTML 列表?xiàng)l目元素）用于表示列表里的條目。它必須包含在一個(gè)父元素里：一個(gè)有序列表 (<ol>)，一個(gè)無(wú)序列表 (<ul>)，或者一個(gè)菜單 (<menu>)。

屬性

value: 整數(shù)型屬性表明了本 <li> 元素在有序列表（由 <ol> 元素定義）中的序號(hào)

ol 標(biāo)簽

描述: 有序列表是一個(gè)項(xiàng)目的列表，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記
有序列表始于 <ol> 標(biāo)簽，每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽.

屬性:

type 屬性: 設(shè)置符號(hào)列表，默認(rèn)為1數(shù)字列表，其中a為小寫(xiě)字母，A為大寫(xiě)字母，I為大羅馬字母列表，i為小羅馬字母列表, 建議使用使用 CSS list-style-type 屬性來(lái)代替
reversed 屬性: 指定列表中的條目是否是倒序排列的，即編號(hào)是否應(yīng)從高到低反向標(biāo)注。
start 屬性: 指定了列表編號(hào)的起始值。

示例

<h4>數(shù)字列表：</h4>
<ol>
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ol>  

<h4>字母列表：</h4>
<ol type="A">
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ol>  

<h4>小寫(xiě)字母列表：</h4>
<ol type="a">
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ol>  

<h4>羅馬字母列表：</h4>
<ol type="I">
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ol>  

<h4>小寫(xiě)羅馬字母列表：</h4>
<ol type="i">
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ol>

WeiyiGeek.有序列表圖

ul 標(biāo)簽

描述: 無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。
無(wú)序列表始于 <ul> 標(biāo)簽，每個(gè)列表項(xiàng)始于 <li>，列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

屬性:

type 屬性: 設(shè)置符號(hào)列表，其中"disc"是黑色圓點(diǎn)（默認(rèn)），"circle"是黑色空心圓點(diǎn)，"square"為方塊。

示例:

<!-- 1.無(wú)序列表 -->
<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

<!-- 2.無(wú)序ul標(biāo)簽設(shè)置符號(hào) -->
<ul type="disc">  
  <li>Apple</li>
  <li>balana</li>
</ul>
<ul type="circle">
  <li>piano</li>
  <li>gname</li>
</ul>
<ul type="square">
  <li>dog</li>
  <li>pig</li>
</ul>

<!-- 3.無(wú)序標(biāo)簽進(jìn)行嵌套 -->
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
       <ul>
        <li>紅茶</li>
        <li>綠茶</li>
       </ul>
    <li>綠茶</li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

WeiyiGeek.無(wú)序列表結(jié)果圖

dl 標(biāo)簽

描述: HTML <dl> 元素（或 HTML 描述列表元素）是一個(gè)包含術(shù)語(yǔ)定義以及描述的列表，通常用于展示詞匯表或者元數(shù)據(jù) (鍵 - 值對(duì)列表)。

dt 標(biāo)簽

描述: HTML <dt> 元素（或 HTML 術(shù)語(yǔ)定義元素）用于在一個(gè)定義列表中聲明一個(gè)術(shù)語(yǔ)。該元素僅能作為 <dl> 的子元素出現(xiàn)。通常在該元素后面會(huì)跟著 <dd> 元素，然而，多個(gè)連續(xù)出現(xiàn)的 <dt> 元素都將由出現(xiàn)在它們后面的第一個(gè) <dd> 元素定義。

dd 標(biāo)簽

描述: HTML <dd> 元素（HTML 描述元素）用來(lái)指明一個(gè)描述列表 (<dl>) 元素中一個(gè)術(shù)語(yǔ)的描述。這個(gè)元素只能作為描述列表元素的子元素出現(xiàn)，并且必須跟著一個(gè) <dt> 元素后。

示例:

<!-- 1.簡(jiǎn)單示例，多條術(shù)語(yǔ)、單條描述 -->
<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
</dl>

<!-- 2.一個(gè)dl標(biāo)簽中可以包含多個(gè)dt或者dd標(biāo)簽 -->
<dl>
  <dt>Coffee</dt>            <!--自定義列表項(xiàng)-->
  <dd>Black hot drink</dd>   <!--自定義列表項(xiàng)的定義-->
  <dt>Milk</dt>
  <dd>White cold drink</dd>
  <dt>顯示器</dt>
  <dd>以視覺(jué)方式顯示信息的裝置 ... ...</dd>
</dl>

實(shí)時(shí)結(jié)果輸出：

請(qǐng)點(diǎn)擊執(zhí)行,即可顯示結(jié)果!

可編輯代碼:

<ul>
  <li>Name</li>
  <li>Age</li>
</ul>
<ol>
  <li>WeiyiGeeker</li>
  <li>88</li>
</ol>
<dl>
  <dt>Coffee</dt>            <!--自定義列表項(xiàng)-->
  <dd>Black hot drink</dd>   <!--自定義列表項(xiàng)的定義-->
  <dt>顯示器</dt>
  <dd>以視覺(jué)方式顯示信息的裝置 ... ...</dd>
</dl>

綜合實(shí)踐： https://github.com/WeiyiGeek/DevelopLearnig/blob/main/fore-end/HTML/example/study/05.List.html

原文地址: https://blog.weiyigeek.top/2023/2-27-719.html

本文至此完畢，更多技術(shù)文章，盡情期待下一章節(jié)！

專(zhuān)欄書(shū)寫(xiě)不易，如果您覺(jué)得這個(gè)專(zhuān)欄還不錯(cuò)的，請(qǐng)給這篇專(zhuān)欄 【點(diǎn)個(gè)贊、投個(gè)幣、收個(gè)藏、關(guān)個(gè)注，轉(zhuǎn)個(gè)發(fā)，留個(gè)言】(人間六大情)，這將對(duì)我的肯定，謝謝！。

點(diǎn)擊 ?? 關(guān)注「全棧工程師修煉指南」公眾號(hào)
微信溝通交流: weiyigeeker (點(diǎn)擊添加)
交流溝通群：629184198 或關(guān)注公眾號(hào)回復(fù)【學(xué)習(xí)交流群】

溫馨提示: 由于作者水平有限，本章錯(cuò)漏缺點(diǎn)在所難免,希望讀者批評(píng)指正，并請(qǐng)?jiān)谖恼履┪擦粝履鷮氋F的經(jīng)驗(yàn)知識(shí)，聯(lián)系郵箱地址 master@weiyigeek.top 或者關(guān)注公眾號(hào) WeiyiGeek 聯(lián)系我。

帥哥（靚仔）、美女，點(diǎn)個(gè)關(guān)注后續(xù)不迷路

posted @ 2023-04-11 14:53 全棧工程師修煉指南閱讀(200) 評(píng)論(0) 收藏舉報(bào)

刷新頁(yè)面返回頂部

全棧工程師修煉指南

Always keep a beginner's mind, don't forget the beginner's mind.

全棧之前端 | 5.HTML表格列表標(biāo)簽元素學(xué)習(xí)篇

0x00 前言簡(jiǎn)述

0x01 表格元素

table 標(biāo)簽

caption 標(biāo)簽

tr 標(biāo)簽

th 標(biāo)簽

td 標(biāo)簽

colgroup 標(biāo)簽

col 標(biāo)簽

thead 標(biāo)簽

tbody 標(biāo)簽

tfoot 標(biāo)簽

0x01 表格元素

li 標(biāo)簽

ol 標(biāo)簽

ul 標(biāo)簽

dl 標(biāo)簽

dt 標(biāo)簽

dd 標(biāo)簽

公告