七海的html和css學習筆記（十三）

用html建立乙個**

建立乙個**需要用到四個元素：、、和。下面將逐個地詳細介紹這些元素，明確它們在**中所起的作用：

//table標記開始整個**。如果想要乙個**，都要從table開始 //每個tr元素指定乙個錶行。所以，放在一行中的所有**資料都要巢狀在tr元素中 ... //th元素包含**表頭中的乙個單元格。它必須放在乙個錶行中 ...... //td元素包含**中的乙個資料單元格。它必須巢狀在乙個錶行中

...

html的設計者決定按行指定**，而不是按列來指定。不過，要注意，指定每一行的元素時，隱含地就是在指定各列。

如果一行中沒有足夠的元素，最容易的方法就是將資料單元格的內容留空。也就是說，要寫為。如果省去了這個資料單元格，**就不能正確地排列對齊，所以要列出所有資料單元格，即使它們的內容為空。

如果希望**的表頭放在**的左側，而不是放在上方，只需要把表頭元素放在各行中，而不是都放在第一行中。如果你的元素是各行中的第一項，那麼第一列就會包含所有**表頭。

html**與css**顯示有什麼關係：html**允許你使用html標記指定**的結構，而css**顯示則提供了一種方法，可以用一種類似**的表現方式顯示塊級元素。可以這樣來考慮，確實需要在頁面中建立**資料時，就是用html**。不過，如果只需要對其他型別的內容使用一種類似**的表現方式，就可以使用css**顯示布局。

**提供了一種在html中指定**資料的方法。

**由行中的資料單元格組成。列隱含的定義在行中。

**中的列數就是行中資料單元格的個數。

一般來講，**不用來提供表現，那是css的工作。

//table標記開始整個**。如果想要乙個**，都要從table開始 //這裡寫**的標題 //每個tr元素指定乙個錶行。所以，放在一行中的所有**資料都要巢狀在tr元素中 ... //th元素包含**表頭中的乙個單元格。它必須放在乙個錶行中 ...... //td元素包含**中的乙個資料單元格。它必須巢狀在乙個錶行中

...

標題會在瀏覽器中顯示。預設地，大多數瀏覽器會把標題顯示在**上方。當然也可以使用css調整標題的位置：

table

使用border-spacing屬性來為**中所有的資料項之間設定邊距：

table

我們也可以為**中資料項之間的垂直方向和水平方向之間設定不同的間距：

table

使用border-collapse屬性來摺疊邊框：

table

nth-child偽類

應該記得，偽類會根據元素的狀態來指定元素的樣式。對於nth-child偽類，狀態則是乙個元素相對於它的兄弟元素的數字順序。下面通過乙個例子來看這是什麼意思：

//這是第乙個子元素 //這是第二個子元素 //這是第三個子元素 //這是第四個子元素

假如你想選擇偶數段落（也就是第二段和第四段），讓它們有乙個紅色背景，而奇數段落有乙個綠色背景，可以這樣做：

p:nth-child(even)
p:nth-child(odd)

從"nth-child（第幾個子元素）"這個名字可以猜到，這個偽類不只是能選擇巢狀在乙個元素中的奇數和偶數，它還可以更靈活，可以使用數字n指定簡單的表示式，從而在選擇元素時有更多方式。例如，還可以像這樣選擇偶數和奇數段落：

p:nth-child(2n)
p:nth-child(2n+1)
//如果n=0，則2n=0（無段落）。2n+1為1，就是第乙個段落。
//如果n=1，則2n=2，第2個段落，另外2n+1=3，就是第三個段落

合併單元格

在html中合併單元格可以使用rowspan屬性指定乙個**資料單元格佔多少行，然後從這個單元格所跨越的其他行中刪除相應的**資料元素。

... ...... //指示這個td元素中的內容要佔兩個單元格 ......... //記得在對應的單元格中騰出位置給要佔多個單元格的元素

**資料也可以跨多列，只需要為元素增加乙個colspan屬性，然後指定列數就可以了。與rowspan不同，跨多列時，需要刪除同一行中的**資料元素（因為現在所佔的是多列，而不是多行）。

同乙個中可以同時有colspan和rowspan，指示需要調整**中的其他，考慮到同時有跨行和跨列。換句話說，你需要從同一行和同一列上刪除相應數目的。

巢狀**

... //在td中巢狀table，就可以實現**的巢狀了 ......

為列表增加一些樣式

我們已經知道，一旦掌握了基本的css字型、文字、顏色和其他屬性，就可以對任何元素指定樣式，也包括列表。你列表的主要屬性是list-style-type，利用這個屬性，可以控制列表中使用的專案符號（或者通常也叫作列表標記）。下面給出幾種不同的列表標記：

li lili

li

也可以用list-style-image屬性來自定義標記：

li

我們也可以改變有序列表的樣式。不論是有序列表還是無序列表，指定樣式的方法都是一樣的。當然，有序列表會用乙個數字或字母序列作為列表標記，而不是使用專案符號。利用css，你可以使用list-style-type屬性控制乙個有序列表的標記。常用的值包括：decimal（十進位制數）、upper-alpha（大寫字母）、lower-alpha（小寫字母）、upper-roman（大寫羅馬數字）和lower-roman（小寫羅馬數字）。

有乙個名為list-style-position的屬性。如果將這個屬性標記為"inside"文字就會在標記下方環繞。如果設定為"outside"，就只在文字下迴繞。

inside和outside的具體含義是：如果把list-style-position設定為"inside"，標記就會在你的列表項裡面，所以文字會在它下面迴繞。如果這個屬性設定為"outside"，說明標記在列表項外面，因此指示文字本身迴繞。這裡所說的"在列表項裡面"是指在列表項盒子的邊框裡面。

七海的html和css學習筆記（十三）

七海的html和css學習筆記（十一）

html和CSS基礎學習（七）

HTML學習筆記（七）

七海的html和css學習筆記（十三）

七海的html和css學習筆記（十一）

html和CSS基礎學習（七）

HTML學習筆記（七）

相關推薦