国产在线观看欧美,国产96在线 | 亚洲,黄色成人在线看

導(dǎo)讀網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立...

網(wǎng)頁(yè)的本質(zhì)就是超級(jí)文本標(biāo)記語(yǔ)言，通過(guò)結(jié)合使用其他的Web技術(shù)（如：腳本語(yǔ)言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁(yè)。因而，超級(jí)文本標(biāo)記語(yǔ)言是萬(wàn)維網(wǎng)（Web）編程的基礎(chǔ)，也就是說(shuō)萬(wàn)維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級(jí)文本標(biāo)記語(yǔ)言之所以稱為超文本標(biāo)記語(yǔ)言，是因?yàn)槲谋局邪怂^“超級(jí)鏈接”點(diǎn)。

本章給大家介紹CSS中Table（表格）樣式是如何設(shè)置？（代碼實(shí)例）。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

一、表格邊框

border 指定CSS表格邊框，使用border屬性。

下面的例子指定了一個(gè)表格的Th和TD元素的黑色邊框：

table, th, td
{
border: 1px solid black;
}

請(qǐng)注意，在上面的例子中的表格有雙邊框。這是因?yàn)楸砗蛅h/ td元素有獨(dú)立的邊界。

為了顯示一個(gè)表的單個(gè)邊框，使用 border-collapse屬性。

二、折疊邊框

border-collapse 屬性設(shè)置表格的邊框是否被折疊成一個(gè)單一的邊框或隔開(kāi)：

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}

三、表格寬度和高度

Width和height屬性定義表格的寬度和高度。

下面的例子是設(shè)置100％的寬度，50像素的th元素的高度的表格：

table {width:100%;}
th{height:50px;}

四、表格文字對(duì)齊

表格中的文本對(duì)齊和垂直對(duì)齊屬性。

text-align屬性設(shè)置水平對(duì)齊方式，像左，右，或中心：

td{text-align:right;}

vertical-align 垂直對(duì)齊屬性設(shè)置垂直對(duì)齊，比如頂部，底部或中間：

td{
height:50px;
vertical-align:bottom;
}

五、表格填充

padding 如果在表的內(nèi)容中控制空格之間的邊框，應(yīng)使用td和th元素的填充屬性：

td{padding:15px;}

六、表格顏色

下面的例子指定邊框的顏色，和th元素的文本和背景顏色：

table, td, th { border:1px solid green; } 
th { background-color:green; color:white; }

七、示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS教程</title>
<style>
#customers
{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
}
#customers td, #customers th 
{
    font-size:1em;
    border:1px solid #98bf21;
    padding:3px 7px 2px 7px;
}
#customers th 
{
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:#A7C942;
    color:#ffffff;
}
#customers tr.alt td 
{
    color:#000000;
    background-color:#EAF2D3;
}
</style>
</head>

<body>
<table id="customers">
<tr>
  <th>Company</th>
  <th>Contact</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbk?p</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="alt">
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>K?niglich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="alt">
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr class="alt">
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>

效果圖：

以上就是CSS中Table（表格）樣式是如何設(shè)置？（代碼實(shí)例）的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。

溫馨提示：喜歡本站的話，請(qǐng)收藏一下本站！

當(dāng)前位置:雨林木風(fēng)下載站 > 網(wǎng)頁(yè)設(shè)計(jì)教程 > 詳細(xì)頁(yè)面

CSS中Table（表格）樣式是如何設(shè)置？（代碼案例）

本類教程下載

系統(tǒng)下載排行