HTML網(wǎng)頁(yè)編程之表格樣式

頁(yè)編程之表格樣式。

同學(xué)們好，我是一名免費(fèi)的少兒編程老師。今天我要分享的內(nèi)容是以列為單位設(shè)置表格樣式。在插入表格課程中，我已經(jīng)講解了HTML中沒(méi)有單獨(dú)的列標(biāo)簽，列是由對(duì)應(yīng)的單元格組成的行形成的。雖然如此，但列這個(gè)概念仍然是存在的。

讓我們來(lái)看一下今天的示例效果。這個(gè)網(wǎng)頁(yè)上有一個(gè)3行3列的表格，其中3列分別是姓名、科目和分?jǐn)?shù)，而3行分別是表頭行、字體加粗的內(nèi)容和兩行。第一列和第二列的背景顏色是綠色，第三列的背景顏色是灰色。在一列中，每一個(gè)單元格的樣式都是統(tǒng)一的。

接下來(lái)，讓我們看看實(shí)現(xiàn)的代碼。以列為單位設(shè)置表格樣式，實(shí)際上是通過(guò)這兩個(gè)標(biāo)簽來(lái)實(shí)現(xiàn)的，分別是colgroup和col。colgroup翻譯過(guò)來(lái)就是“列”的意思，而colgroup則是“列主”的意思。

首先，讓我們來(lái)看看colgroup標(biāo)簽。這個(gè)標(biāo)簽是一個(gè)無(wú)屬性的圍堵標(biāo)簽，它的作用只有一個(gè)，即聲明這個(gè)標(biāo)簽內(nèi)包含的是本表格列的樣式。通過(guò)這個(gè)標(biāo)簽，我們可以向整個(gè)列應(yīng)用樣式，而不需要為每一個(gè)單元格或每一行設(shè)置樣式。

這個(gè)標(biāo)簽必須在table標(biāo)簽內(nèi)，如果有caption標(biāo)簽，則必須在thead標(biāo)簽之前使用。如果不明白各標(biāo)簽的先后順序，可以看看上節(jié)課的內(nèi)容。colgroup標(biāo)簽僅僅是聲明，具體的樣式是要使用col標(biāo)簽來(lái)實(shí)現(xiàn)的。col標(biāo)簽的數(shù)量應(yīng)該與TDTH的標(biāo)簽數(shù)量一致，一一對(duì)應(yīng)地設(shè)置。第1行的col標(biāo)簽對(duì)應(yīng)第1列的樣式，第2行的col標(biāo)簽對(duì)應(yīng)第2列的樣式，以此類(lèi)推。

有些同學(xué)會(huì)問(wèn)，老師，你這里的表格有三列，但是你只寫(xiě)了兩個(gè)col標(biāo)簽，這時(shí)候就要講到col標(biāo)簽在HTML5中的兩個(gè)常用屬性，一個(gè)是col屬性，說(shuō)明了這一行的col標(biāo)簽的樣式可以跨幾列。

例如，在這里將第一行的col標(biāo)簽的Span屬性設(shè)置為2，這就意味著這個(gè)樣式在當(dāng)前位置跨了兩列。換句話(huà)說(shuō)，讓第一列和第二列使用了同一個(gè)樣式。

第二個(gè)屬性是它的style標(biāo)簽。這個(gè)style標(biāo)簽的內(nèi)容是CSS的一段代碼，通過(guò)這個(gè)屬性我們可以為列添加各種效果。嚴(yán)格來(lái)說(shuō)，style并不是卡標(biāo)簽的一個(gè)專(zhuān)用屬性，而是HTML的全局屬性之一。所謂的全局屬性就是只要是HTML標(biāo)簽都自帶這一個(gè)屬性。對(duì)于各位同學(xué)來(lái)說(shuō)，這是一個(gè)新概念，你們只需要記住就可以了。通過(guò)使用colgroup標(biāo)簽和col標(biāo)簽的配合，我們不僅能夠靈活快速地為表格添加樣式，進(jìn)行美化，還能大幅減少代碼量，提高頁(yè)面加載速度。

以上就是今天的分享，希望各位同學(xué)能夠牢記在心，并在下一次練習(xí)中做到不看視頻也能夠?qū)懗龃a。如果需要獲取相關(guān)案例和文檔，可以向我提問(wèn)。我們下期再見(jiàn)。如果你對(duì)網(wǎng)頁(yè)編程、服務(wù)端編程、數(shù)據(jù)庫(kù)、算法等感興趣，歡迎點(diǎn)贊、關(guān)注！

接到很web前端項(xiàng)目中，常常看到表格table，做表格的樣式，在本文下面，列舉了四種表格css樣式，代碼也在下面：

1.單像素邊框CSS表格
這是一個(gè)很常用的表格樣式。


<style type="text/css">
table.gridtable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>

<table class="gridtable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

2. 帶背景圖的CSS樣式表格

和上面差不多，不過(guò)每個(gè)格子里多了背景圖。

1. 下載上面兩張圖，命名為cell-blue.jpg和cell-grey.jpg

2. 拷貝下面的代碼到你想要的地方，記得修改圖片url

<style type="text/css">
table.imagetable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.imagetable th {
background:#b5cfd2 url('cell-blue.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
table.imagetable td {
background:#dcddc0 url('cell-grey.jpg');
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #999999;
}
</style>

<table class="imagetable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

3. 自動(dòng)換整行顏色的CSS樣式表格（需要用到JS）

這個(gè)CSS樣式表格自動(dòng)切換每一行的顏色，在我們需要頻繁更新一個(gè)大表格的時(shí)候很有用。

<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>

<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

4. 鼠標(biāo)懸停高亮的CSS樣式表格 (需要JS)

純CSS顯示表格高亮在IE中顯示有問(wèn)題，所以這邊使用了JS來(lái)做高亮（由于csdn博客限制了js的使用，我會(huì)在近期將博客遷移放到自己的web主機(jī)上）。

<style type="text/css">
table.hovertable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #999999;
border-collapse: collapse;
}
table.hovertable th {
background-color:#c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertable tr {
background-color:#d4e3e5;
}
table.hovertable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
</style>

<table class="hovertable">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"

onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';"
onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>

文/丁向明

做一個(gè)有博客的web前端自媒體人，專(zhuān)注web前端開(kāi)發(fā)，關(guān)注用戶(hù)體驗(yàn)，加我qq/微信交流：6135833

http://dingxiangming.com

家好，我是IT共享者，人稱(chēng)皮皮。這篇文章我們來(lái)講講CSS的文本樣式。

一、文本顏色Color

顏色屬性被用來(lái)設(shè)置文字的顏色。

顏色是通過(guò)CSS最經(jīng)常的指定：

十六進(jìn)制值 - 如"＃FF0000"。
一個(gè)RGB值 - "RGB（255,0,0）"。
顏色的名稱(chēng) - 如"紅"。

一個(gè)網(wǎng)頁(yè)的文本顏色是指在主體內(nèi)的選擇：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注：對(duì)于W3C標(biāo)準(zhǔn)的CSS：如果你定義了顏色屬性，你還必須定義背景色屬性。

二、屬性

1. text-align 文本的對(duì)齊方式

文本排列屬性是用來(lái)設(shè)置文本的水平對(duì)齊方式。

文本可居中或?qū)R到左或右,兩端對(duì)齊。

當(dāng)text-align設(shè)置為"justify"，每一行被展開(kāi)為寬度相等，左，右外邊距是對(duì)齊（如雜志和報(bào)紙）。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 號(hào)</p>
        <p class="main">　從前有個(gè)書(shū)生，和未婚妻約好在某年某月某日結(jié)婚。到那一天，未婚妻卻嫁給了別人。書(shū)生受此打擊， 一病不起。　　這時(shí)，路過(guò)一游方僧人，從懷里摸出一面鏡子叫書(shū)生看。書(shū)生看到茫茫大海，一名遇害的女子一絲不掛地躺在海灘上。路過(guò)一人， 看一眼，搖搖頭，走了。又路過(guò)一人，將衣服脫下，給女尸蓋上，走了。再路過(guò)一人，過(guò)去，挖個(gè)坑，小心翼翼把尸體掩埋了。　　僧人解釋道， 那具海灘上的女尸，就是你未婚妻的前世。你是第二個(gè)路過(guò)的人，曾給過(guò)他一件衣服。她今生和你相戀，只為還你一個(gè)情。但是她最終要報(bào)答一生一世的人，是最后那個(gè)把她掩埋的人，那人就是他現(xiàn)在的丈夫。書(shū)生大悟，病愈。


        </p>
        <p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修飾

text-decoration 屬性用來(lái)設(shè)置或刪除文本的裝飾。

從設(shè)計(jì)的角度看 text-decoration屬性主要是用來(lái)刪除鏈接的下劃線(xiàn)：

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原來(lái)的樣子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下劃線(xiàn)</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以這樣裝飾文字：

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注：不建議強(qiáng)調(diào)指出不是鏈接的文本，因?yàn)檫@常常混淆用戶(hù)。

3. text-transform文本轉(zhuǎn)換

text-transform文本轉(zhuǎn)換屬性是用來(lái)指定在一個(gè)文本中的大寫(xiě)和小寫(xiě)字母。

uppercase:轉(zhuǎn)換為全部大寫(xiě)。
lowercase：轉(zhuǎn)換為全部小寫(xiě)。
capitalize ：每個(gè)單詞的首字母大寫(xiě)。

<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本縮進(jìn)

text-indent文本縮進(jìn)屬性是用來(lái)指定文本的第一行的縮進(jìn)。

p {text-indent:50px;}

5. letter-spacing 設(shè)置字符間距

增加或減少字符之間的空間。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height設(shè)置行高

指定在一個(gè)段落中行之間的空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 設(shè)置字間距

增加一個(gè)段落中的單詞之間的空白空間。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 設(shè)置元垂直居中

設(shè)置文本的垂直對(duì)齊圖像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 設(shè)置文本陰影

設(shè)置文本陰影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>項(xiàng)目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、總結(jié)

本文主要介紹了CSS文本樣式實(shí)際應(yīng)用中應(yīng)該如何去操作，通過(guò)講解文本中對(duì)應(yīng)的屬性去改變文本的表現(xiàn)形式。使用豐富的效果圖的展示，能夠更直觀的看到運(yùn)行的效果，能夠更好的理解。使用Html語(yǔ)言，代碼結(jié)構(gòu)更佳的清晰，能夠幫助你更好的學(xué)習(xí)。

在線(xiàn)咨詢(xún)

上一篇：「HTML」概念和基本標(biāo)簽
下一篇：生僻字怎么讀最有趣？聲色做強(qiáng)關(guān)系下的匿名社交社區(qū)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商