第7章 列表和表格

7.1 有序列表 <ol type="A"><li>這里是第1個li</li><li>這里是第2個li</li><li>這里是第3個li</li></ol> ol屬性： type : 數字(1),大小寫字母(A,a),大小寫羅馬數字(I,i) start: "起始編號位序"表示列表項的開始編號所處的位置序號，即li前面開始的數值 --> ?<ol type="a" start="3"> ??? 7.2 無序列表 <ul type="square"><li>這里是第1個li</li><li>這里是第2個li</li><li>這里是第3個li</li></ul> ul屬性： type->實心圓(disc)->空心圓(circle)->實心矩形(square) 該屬性順序是li中繼續包含ul后的type默認屬性,后面默認為實心矩形 注意：無論是有序列表還是無序列表，ul和ol能接的標簽只能是li，但li中可以添加任意標簽 ? ? 7.3 定義列表 <dl><dt>html是什么</dt><dd>HyperText Markup Languagehtml<br/>是一種超文本標記語言</dd></dl> dd標簽相當于其他列表中的li標簽，可以在其中添加任意標簽，不過建議只放dt和dd標簽，一般情況下使用標簽+樣式實現文本的解析，不使用多個dd或dt標簽 定義列表的應用場景 1.做網站尾部的相關信息 2.做圖文混排 ??? 7.4 嵌套列表 <ul> -->無序列表<li><ol> -->有序列表<li>...</li> -->無序列表中嵌套了一個有序列表</ol></li></ul> ????7.5?表格? <table border="邊框寬度" bordercolor="邊框顏色" title="表格的提示信息，當鼠標移到表格上方時，所提示的信息"> 屬性： 寬width 高height 對齊方式align 背景顏色bgcolor 背景圖片background 邊距cellpadding 間距cellspacing 摘要summary 邊框顯示：frame和rules ? ??對齊屬性: align : 水平方向對齊,值為left,center,right. ?適用于table,tr,td valign: 垂直方向對齊。值為top,middle,bottom. 適用于tr,td cellspacing : ?單元格之間的空白(默認2px) ? ? 適用于table cellpadding : ?內容與單元格的空白 ? ? ? ? ? ?適用于table bgcolor、background 兩個屬性也適用與表格。(table,tr,td) 在表格里面給寬度并不能真正的限制死表格的寬度，如果內容超出表格的實質寬高，依然會將表格的單元格甚至整個表格撐開 ??table的三個基本組成部分：行，列，單元格 ??表格標題標記:<caption align="水平對齊方式(左中右)" valign="垂直對齊(上下)"></caption> ??表格可以分成表頭、主體和表尾三部分，在HTML語言中分別用thead、tbody、tfoot表示 ★這里有三個注意點： （1）thead和tfoot在一張表中都只能有一個，而tbody可以有多個。 （2）tfoot必須出現在tbody前面，這樣瀏覽器在接收主體數據之前，就能渲染表尾，有利于加快表格的顯示速度。這一點對大型表格尤其重要。 （3）thead、tbody和tfoot里面都必須使用tr標簽。 ??CSS中的table-layout語句?? ?table { table-layout: fixed/auto/inherit } auto表示單元格的大小由內容決定。fixed表示單元格的大小是固定的，由第一個指定大小的單元格決定；如果所有單元格都沒有指定大小，則由第一個單元 格的默認大小決定；如果單元格中的內容超出單元格的大小，則用CSS中的overflow命令控制。微軟公司聲稱使用這個命令，表格的顯示速度可以加快100倍。 inherit:從父元素繼承table-layout屬性的值，任何版本的IE都不支持。 ? tr ? ? ? 定義表格的行 ?th ? ? ? 定義標題單元格 ?td ?定義表格的列,為一般單元格 ? colspan ?合并列單元格 ?rowspan ?合并行單元格
其他屬性還有 summary 屬性規定表格內容的摘要。summary 屬性不會對普通瀏覽器中產生任何視覺變化。屏幕閱讀器可以利用該屬性。 ?frame和rules屬性，可以控制邊框的顯示。frame屬性控制著表格最外圍的四條邊框的可見性，而 rules 則控制著表格內部邊框的可見性。 ??frame屬性可取的值及含義如下： ● void - 默認值，表示不顯示表格最外圍的邊框 ● above - 顯示上部的外側邊框 ? ? ? ? ● below - 顯示下部的外側邊框 ● lhs - 顯示左邊的外側邊框 ? ? ? ? ? ● rhs - 顯示右邊的外側邊框 ● hsides - 顯示上部和下部的外側邊框 ?● vsides - 顯示左邊和右邊的外側邊框 ● box - 在所有四個邊上顯示外側邊框 ? ● border - 在所有四個邊上顯示外側邊框 ??rules 屬性可取的值有五個，分別是： ● none - 默認值，無邊框 ● rows - 為行加邊框 ? ? ? ? ? ? ? ? ?● cols - 為列加邊框 ● groups - 為行組或列組加邊框 ? ? ? ?● all - 為所有行列（單元格）加邊框 demo： 1 <table border="1" width="600" frame="hsides" rules="groups"> 2 <caption>My Ultimate Table</caption> 3 <colgroup span="1" width="200"></colgroup> 4 <!-- tbody可以用來對"行"進行分組，而colgroup則用來對"列"進行分組 --> 5 <colgroup span="3" width="400"></colgroup> 6 <!-- colgroup這里將后三列為一組，每組寬度為400像素 --> 7 <thead> <tr> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> <td>cell 1-4</td> </tr> </thead> 8 <tfoot> <tr> <td>cell 4-1</td> <td>cell 4-2</td> <td>cell 4-3</td> <td>cell 4-4</td> </tr> </tfoot> 9 <tbody> <tr> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> <td>cell 2-4</td> </tr> 10 <tr> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> <td>cell 3-4</td> </tr> </tbody> 11 </table>

? 在瀏覽器中的顯示效果如下圖：

?

轉載于:https://www.cnblogs.com/chenhaoqiang/p/6266791.html

總結

以上是生活随笔為你收集整理的列表和表格---学习笔记02的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。