HTML標記語言——表格標記

互聯網 ? 發布時間：2008-10-17 18:55:24 ? 作者：佚名 ? 我要評論

點擊這里返回網頁教學網　HTML教程　欄目．

上文：標記語言——標題

原文出處

標準化設計解決方案 - 標記語言和樣式手冊

Web Standards Solutions The Markup and Style Handbook

Part 1: Get Down With Markup 從標記語法談起

Chapter2 邪惡

調整表頭的顯示效果

我們可以輕松的給表頭加上背景色，選用不同的字體，讓表頭更加的明顯，由于我們是使用了

標簽而不是直接在行內將內容設為粗體,因此我們不必加上任何其他的標簽,就能直接為表頭內容設定樣式.

我們在標題下面也加上一點內補丁,同時還用不同的字體,顏色(當然是紅色)以突出標題內容(圖3-7)

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

caption {

font-family: Arial, sans-serif;

color: #993333;

padding-bottom: 6px;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

th {

font-family: Verdana, sans-serif;

background: #ccc;

}

圖3-7:加上樣式的標題和

為表頭加上背景圖片

剛才我們為表格里的

元素加上了灰色背景,但是我們其實可以更進一步,用背景圖平鋪在格子里來作出漂亮的效果,舉例來說,我們能用細致的灰色條紋模擬出許多Mac OS X中的窗口樣式

小圖片

首先我們用photoshop(或者其它你熟悉的繪圖工具)建立一個小圖片,在這個例子中,我們要制作一個2像素灰色和2像素白色交替出現的效果,因此圖片只需要4像素高,寬度多款都無所謂,因為它會在

里平鋪開來,做出我們想要的條紋效果.為了節省帶寬,我們只做1像素寬(圖3-8)

圖3-8:1X4的像素條紋圖片(放大后)

CSS

沿用剛才示例中的代碼,我們需要修改的地方只有把背景顏色換成剛制作好的小圖片路徑,除非另外制定,否則根據默認設置,背景圖會自動超每個方向平鋪.

table {

border-top: 1px solid #999;

border-left: 1px solid #999;

}

caption {

font-family: Arial, sans-serif;

color: #993333;

padding-bottom: 6px;

}

th, td {

padding: 10px;

border-right: 1px solid #999;

border-bottom: 1px solid #999;

}

th {

font-family: Verdana, sans-serif;

background: url(th_stripe.gif);

}

圖3 -9是套用這個樣式后的表格,表頭部分分線了條紋背景,要實驗其他的平鋪背景圖也很方便,你可以試試怎樣才能為表頭或資料做出最好看的效果,好好享受這個實驗的過程吧.

圖3-9:在表頭使用平鋪背景的示例

相關文章

這篇文章主要介紹了html父子頁面iframe雙向發消息的實現示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-10-12

這篇文章主要介紹了如何在HTML里加載攝像頭，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-29

這篇文章主要介紹了html-webpack-plugin使用，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-15

這篇文章主要介紹了html直接引用vue和element-ui的方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-02

這篇文章主要介紹了詳解HTML中字體使用line-height依然不能垂直居中解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友2020-08-20

這篇文章主要介紹了前端html換膚功能的實現代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-20

這篇文章主要介紹了多個HTML頁面共同調用一段html代碼的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-08-17

這篇文章主要介紹了HTML中圖片不存在顯示默認圖片的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-08-17

這篇文章主要介紹了HTML table行距的改變方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2020-07-31

這篇文章主要介紹了HTML Table 空白單元格補全的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2020-07-31

最新評論

總結

以上是生活随笔為你收集整理的使用HTML标记语言画出表格,HTML标记语言——表格标记的全部內容，希望文章能夠幫你解決所遇到的問題。

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