HTML基礎(chǔ) 之 表格 與 列表

HTML的表格

概述:

表格由 <table> 標(biāo)簽來(lái)定義租幕。每個(gè)表格均有若干行(由 <tr> 標(biāo)簽定義),每行被分割為若干單元格(由 <td> 標(biāo)簽定義)着倾。字母 td 指表格數(shù)據(jù)(table data)拾酝,即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本卡者、圖片蒿囤、列表、段落崇决、表單材诽、水平線、表格等等恒傻。

表格和邊框?qū)傩?/strong>
如果不定義邊框?qū)傩粤辰模砀駥⒉伙@示邊框。有時(shí)這很有用盈厘,但是大多數(shù)時(shí)候睁枕,我們希望顯示邊框。
使用邊框?qū)傩?border =“”設(shè)置 表格邊框?qū)傩?/p>

表格的表頭
表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。
大多數(shù)瀏覽器會(huì)把表頭顯示為粗體居中的文本:

實(shí)例:

<html>

<body>

<h4>表頭:</h4>
<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>

<h4>垂直的表頭:</h4>
<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>

</body>
</html>

注意:這個(gè)空的單元格的邊框沒(méi)有被顯示出來(lái)外遇。為了避免這種情況注簿,在空單元格中添加一個(gè)空格占位符(),就可以將邊框顯示出來(lái)跳仿。

表格標(biāo)簽:

<table> 定義表格
<caption> 定義表格標(biāo)題诡渴。
<th> 定義表格的表頭。
<tr> 定義表格的行菲语。
<td> 定義表格單元妄辩。
<thead> 定義表格的頁(yè)眉。
<tbody> 定義表格的主體山上。
<tfoot> 定義表格的頁(yè)腳恩袱。
<col> 定義用于表格列的屬性。
<colgroup> 定義表格列的組胶哲。

HTML 列表

  • HTML 支持有序畔塔、無(wú)序和定義列表
  • 列表項(xiàng)內(nèi)部可以使用段落、換行符鸯屿、圖片澈吨、鏈接以及其他列表等等。

無(wú)序列表

無(wú)序列表是一個(gè)項(xiàng)目的列表寄摆,此列項(xiàng)目使用粗體圓點(diǎn)(典型的小黑圓圈)進(jìn)行標(biāo)記谅辣。
無(wú)序列表始于 <ul> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li>婶恼。

實(shí)例:

<html>
<body>

<h4>Disc 項(xiàng)目符號(hào)列表:</h4>
<ul type="disc">
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ul>  

<h4>Circle 項(xiàng)目符號(hào)列表:</h4>
<ul type="circle">
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ul>  

<h4>Square 項(xiàng)目符號(hào)列表:</h4>
<ul type="square">
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>檸檬</li>
 <li>桔子</li>
</ul>  

</body>
</html>

<html>
<body>

<h4>Disc 項(xiàng)目符號(hào)列表:</h4>
<ul type="disc">
<li>蘋(píng)果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>

<h4>Circle 項(xiàng)目符號(hào)列表:</h4>
<ul type="circle">
<li>蘋(píng)果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>

<h4>Square 項(xiàng)目符號(hào)列表:</h4>
<ul type="square">
<li>蘋(píng)果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>

</body>
</html>

有序列表

同樣桑阶,有序列表也是一列項(xiàng)目,列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記勾邦。
有序列表始于 <ol> 標(biāo)簽蚣录。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。

實(shí)例:

<html>
<body>

<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>  

</body>
</html>

<html>
<body>

<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>

</body>
</html>

定義列表

自定義列表不僅僅是一列項(xiàng)目眷篇,而是項(xiàng)目及其注釋的組合萎河。
自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt>開(kāi)始蕉饼。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始虐杯。

列表鑲嵌

實(shí)例:

<html>

<body>

<h4>一個(gè)嵌套列表:</h4>
<ul>
  <li>咖啡</li>
  <li>茶
    <ul>
    <li>紅茶</li>
    <li>綠茶
      <ul>
      <li>中國(guó)茶</li>
      <li>非洲茶</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>牛奶</li>
</ul>

</body>
</html>

<html>

<body>

<h4>一個(gè)嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國(guó)茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>

</body>
</html>

列表標(biāo)簽
標(biāo)簽 描述
<ol> 定義有序列表。
<ul> 定義無(wú)序列表昧港。
<li> 定義列表項(xiàng)擎椰。
<dl> 定義定義列表。
<dt> 定義定義項(xiàng)目创肥。
<dd> 定義定義的描述达舒。

希望對(duì)你們有幫助值朋,O(∩_∩)O謝謝!P萜!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末圈膏,一起剝皮案震驚了整個(gè)濱河市塔猾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌稽坤,老刑警劉巖丈甸,帶你破解...
    沈念sama閱讀 211,743評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異尿褪,居然都是意外死亡睦擂,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,296評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén)杖玲,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)顿仇,“玉大人,你說(shuō)我怎么就攤上這事摆马【饰牛” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,285評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵囤采,是天一觀的道長(zhǎng)述呐。 經(jīng)常有香客問(wèn)我,道長(zhǎng)蕉毯,這世上最難降的妖魔是什么乓搬? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,485評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮代虾,結(jié)果婚禮上进肯,老公的妹妹穿的比我還像新娘。我一直安慰自己棉磨,他們只是感情好坷澡,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,581評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著含蓉,像睡著了一般频敛。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上馅扣,一...
    開(kāi)封第一講書(shū)人閱讀 49,821評(píng)論 1 290
  • 那天斟赚,我揣著相機(jī)與錄音,去河邊找鬼差油。 笑死拗军,一個(gè)胖子當(dāng)著我的面吹牛任洞,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播发侵,決...
    沈念sama閱讀 38,960評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼交掏,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了刃鳄?” 一聲冷哼從身側(cè)響起盅弛,我...
    開(kāi)封第一講書(shū)人閱讀 37,719評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎叔锐,沒(méi)想到半個(gè)月后挪鹏,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,186評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡愉烙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,516評(píng)論 2 327
  • 正文 我和宋清朗相戀三年讨盒,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片步责。...
    茶點(diǎn)故事閱讀 38,650評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡返顺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蔓肯,到底是詐尸還是另有隱情创南,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布省核,位于F島的核電站稿辙,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏气忠。R本人自食惡果不足惜邻储,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,936評(píng)論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望旧噪。 院中可真熱鬧吨娜,春花似錦、人聲如沸淘钟。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,757評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)米母。三九已至勾扭,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間铁瞒,已是汗流浹背妙色。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,991評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留慧耍,地道東北人身辨。 一個(gè)月前我還...
    沈念sama閱讀 46,370評(píng)論 2 360
  • 正文 我出身青樓丐谋,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親煌珊。 傳聞我的和親對(duì)象是個(gè)殘疾皇子号俐,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,527評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容