狠友很日美女视频,美女视频脱,美女视频脱空全都露

表格屬性設(shè)置 (TABLE ADVANCED)

表格的色彩

表元的背景色彩和背景圖象

#=rrggbb 16 進(jìn)制 RGB 數(shù)碼, 或者是下列預(yù)定義色彩名稱：

Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

Fuchsia, White, Green, Purple, Silver, Yellow, Aqua

<th bgcolor=Red>Drink</th>

<th rowspan=2 background="image.gif">Sweet</th>

</table>

Food

Drink

Sweet

表格邊框的色彩

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food

Drink

Sweet

表格邊框色彩的亮度控制

<table cellspacing=5 border=5

bordercolorlight=White bordercolordark=Maroon>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</table>

Food

Drink

Sweet

表格的分組顯示(Structured Table)

按行分組

<thead> ... </thead> - 表的題頭(Header)

<tbody> ... </tbody> - 表的正文(Body)

<tfoot> ... </tfoot> - 表的腳注(Footer)

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food

Drink

Sweet

按列分組

<colgroup align=#> #=left, right, center

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food

Drink

Sweet

列的屬性控制

<col span=#> #=從左數(shù)起，具有指定屬性的列的列數(shù)

<col align=#> #=left, right, center

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food

Drink

Sweet

表格中邊框的顯示

顯示所有 4 個(gè)邊框 <table frame=box>

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

</table>

Food

Drink

Sweet

只顯示上邊框 <table frame=above>

Food

Drink

Sweet

只顯示下邊框 <table frame=below>

Food

Drink

Sweet

只顯示上、下邊框 <table frame=hsides>

Food

Drink

Sweet

只顯示左、右邊框 <table frame=vsides>

Food

Drink

Sweet

只顯示左邊框 <table frame=lhs>

Food

Drink

Sweet

只顯示右邊框 <table frame=rhs>

Food

Drink

Sweet

不顯示任何邊框 <table frame=void>

Food

Drink

Sweet

表格中分隔線(Rules)的顯示

顯示所有分隔線 <table rules=all>

<thead>

<tr><th>Food</th><th>Drink</th><th>Sweet</th>

</thead>

<tbody>

</tbody>

<tbody>

<tr><td rowspan=3 align=right>Total $-00.0</td>

</tbody>

</table>

Food

Drink

Sweet

Total $-00.0

只顯示組(Groups)與組之間的分隔線 <table rules=groups>

Food

Drink

Sweet

Total $-00.0

只顯示行與行之間的分隔線 <table rules=rows>

Food

Drink

Sweet

Total $-00.0

只顯示列與列之間的分隔線 <table rules=cols>

Food

Drink

Sweet

Total $-00.0

不顯示任何分隔線 <table rules=none>

Food

Drink

Sweet

Total $-00.0

表格的邊框不斷在閃

以下方法可以令表格的邊框不斷在閃，很實(shí)用的

在BODY區(qū)加上

<table border="0" width="280" id="myexample"

style="border:5px solid yellow">

<tr>

<td>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.

<br>加入任意的物件.加入任意的物件.</td>

</tr>

</table>

<!--

function flashit(){

if (!document.all)

return

if (myexample.style.borderColor=="yellow")

myexample.style.borderColor="lime"

else

myexample.style.borderColor="yellow"

}

setInterval("flashit()", 500)

//-->

</script>

3.表格分行下載

這個(gè)對表哥內(nèi)容很大比較實(shí)用

在需要分行下載處加上 <tbody >

比如：

<tr >

<td >flsdjfsdjfkdsjf</td >

</tr >

<tr >

<td >skdjfsdjfksd</td >

</tr >

</tbody >

<tr >

<td >flsdjfsdjfkdsjf</td >

</tr >

<tr >

<td>skdjfsdjfksd</td >

</tr >

</tbody >

</table >

4.幾種樣式不同的表格

<table border="1" width="220" style="position: absolute; left:

11; top: 11" height="26" >

<tr>

</tr>

</table>

5.正立方表格

<table border="1" width="220" bordercolorlight="#eeeeee"

bordercolordark="#000000" style="position: absolute; left: 10; top:

49" height="26">

<tr>

<td width="100%">正立方表格</td>

</tr>

</table>

6.細(xì)表格

<table border="0" frame=vsides width="219"

bgcolor="#000000" cellspacing="1" cellpadding="0"

height="22" style="position: absolute; left: 11; top: 86">

</tr>

</table>

7.立體表格

<table border="1" width="220" bordercolorlight="#ffffff"

bordercolordark="#ffffff" style="position: absolute; left: 10; top:

112" height="34">

<tr>

<td width="100%" bgcolor="#B7B7B7"

bordercolorlight="#000000" bordercolordark="#eeeeee" >立體表格</td>

</tr>

</table>

8.無名表格

<table width="220" align="center" style="position: absolute;

left: 246; top: 12" height="51">

<tr>

<br>

</td>

</tr>

</table>

9.表中表效果Ⅱ

<table width="220" align="center" style="position:

absolute; left: 245; top: 89" height="110">

<tr>

<td height="75"><fieldset style="width:220"

align="center"> <legend> 表中表效果Ⅱ </legend> <table

frame="hsides" border="1"

bordercolorlight="#000000" bordercolordark="#ffffff"

width="100%" cellspacing="1" cellpadding="0" height="78">

</tr>

</table>

10.表中表效果Ⅰ

<table width="220" align="center" style="position: absolute;

left: 10; top: 120" height="138" cellspacing="1"

cellpadding="0">

<tr>

<td height="126"><fieldset style="width: 220; color: #B7B7B7;

border-style: groove" align="center"> <legend style="color:

#FFFFFF; border: 1 solid #808080" > <font color="#000000">表中表效果Ⅰ</font>

</legend> 　<p align="right">　</fieldset>

</td>

</tr>

</table>

TABLE表格

表格在網(wǎng)站應(yīng)用中非常廣泛,可以方便靈活的排版,很多動(dòng)態(tài)大型網(wǎng)站也都是借助表格排版,表格可以把相互關(guān)聯(lián)的信息元素集中定位,是瀏覽頁面的人的一目了然.所以說要制作好網(wǎng)頁,就要學(xué)好表格

7-1 定義表格的基本語法

在html文檔中，表格是通過<table>,<th>,<tr>,<td>標(biāo)簽來完成的，如下表所示：

表格標(biāo)記

標(biāo) 簽

描述

用于定義一個(gè)表格開始和結(jié)束

定義表頭單元格。表格中的文字將以粗體顯示，在表格中也可以不用次標(biāo)簽，<th>標(biāo)簽必須放在<tr>標(biāo)簽內(nèi)

定義一行標(biāo)簽，一組行標(biāo)簽內(nèi)可以建立多組由<td>或<th>標(biāo)簽所定義的單元格

定一單元格標(biāo)簽，一組<td>標(biāo)簽將將建立一個(gè)單元格，<td>標(biāo)簽必須放在<tr>標(biāo)簽內(nèi)

在一個(gè)最基本的表格中，必須包含一組<table>標(biāo)簽，一組標(biāo)簽<tr>(或<th>)和一組<td>標(biāo)簽。

實(shí)例：7-1.html

<HEAD>

<TITLE>一個(gè)簡單的表格</TITLE>

</HEAD>

<BODY>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</center>

</BODY>

</HTML>

7-2（1)表格<table>標(biāo)簽的屬性

表格標(biāo)簽<table>有很多屬性，最常用的屬性有：

<table>標(biāo)簽的屬性

屬性

描述

width

表格的寬度

height

表格的高度

align

表格的在頁面的水平擺放位置

background

表格的背景圖片

bgcolor

表格的背景顏色

border

表格邊框的寬度（以像素為單位）

bordercolor

表格邊框顏色

bordercolorlight

表格邊框明亮部分的顏色

bordercolordark

表格邊框昏暗部分的顏色

cellspacing

單元格之間的間距

cellpadding

單元格內(nèi)容與單元格邊界之間的空白距離的大小

實(shí)例：7-2-1.html

<tr>

</tr>

<tr>

</tr>

</table>

7-2（2）表格的邊框顯示狀態(tài) frame

表格的邊框分別有上邊框、下邊框、左邊框、右邊框。這四個(gè)邊框都可以設(shè)置為顯示或隱藏狀態(tài)

語法格式：<table frame="邊框顯示值">

表格邊框顯示狀態(tài)frame的值的設(shè)定

frame的值

描述

box

顯示整個(gè)表格邊框

void

不顯示表格邊框

hsides

只顯示表格的上下邊框

vsides

只顯示表格的左右邊框

alove

只顯示表格的上邊框

below

只顯示表格的下邊框

lhs

只顯示表格的左邊框

rhs

只顯示表格的右邊框

實(shí)例：7-2-2.html

<HTML>

<HEAD>

<TITLE>表格邊框的顯示狀態(tài)</TITLE>

</HEAD>

<BODY >

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

7-4（3）設(shè)置分隔線的顯示狀態(tài) rules

語法格式：<table rules="值">

分隔線的顯示狀態(tài)rules的值的設(shè)定

rules的值

描述

all

顯示所有分隔線

groups

只顯示組與組的分隔線

rows

只顯示行與行的分隔線

cols

只顯示列于列的分隔線

none

所有分隔線都不顯示

實(shí)例:7-2-3.html

<html>

<head>

</head>

<body>

<TR>

</TR>

<TR>

</TR>

</TABLE><p>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</body>

</html>

7-3 表格行的設(shè)定

表格是按行和列（單元格）組成的，一個(gè)表格有幾行組成就要有幾個(gè)行標(biāo)簽<tr>，行標(biāo)簽用它的屬性值來修飾，屬性都是可選的。

<tr>標(biāo)簽的屬性

屬性

描述

align

行內(nèi)容的水平對齊

valgn

行內(nèi)容的垂直對齊

bgcolor

行的背景顏色

bordercolo

行的邊框顏色

bordercolorlight

行的亮邊框顏色

bordercolordark

行的暗邊框顏色

<TR> 的參數(shù)設(shè)定（常用）：

實(shí)例：7-3.html

<HTML>

<HEAD>

<TITLE>表格行的控制</TITLE>

</HEAD>

<BODY>

</TR>

</tr>

</TR>

</TABLE>

</BODY>

</HTML>

7-4 單元格的設(shè)定

<th>和<td>都是插入單元格的標(biāo)簽，是成對出現(xiàn)的。<th>用于表頭標(biāo)簽，表頭標(biāo)簽一般位于首行或首列，標(biāo)簽之間的內(nèi)容就是位于該單元格內(nèi)的標(biāo)題內(nèi)容，其中的文字以粗體居中顯示。數(shù)據(jù)標(biāo)簽<td>就是該單元格中的具體數(shù)據(jù)內(nèi)容,<th>和<td>標(biāo)簽的屬性都是一樣的，屬性設(shè)定如下：

<th>和<td>的屬性

屬性

描述

width/height

單元格的寬和高，接受絕對值（如 80）及相對值（如 80%）。

colspan

單元格向右打通的欄數(shù)

rowspan

單元格向下打通的列數(shù)

align

單元格內(nèi)字畫等的擺放貼，位置（垂直），可選值為： left, center, right。

valign

單元格內(nèi)字畫等的擺放貼　位置（垂直），可選值為： top, middle, bottom。

bgcolor

單元格的底色

bordercolor

單元格邊框顏色

bordercolorlight

單元格邊框向光部分的顏色

bordercolordark

單元格邊框背光部分的顏色

background

單元格　紙，與 bgcolor 任用其一

<TD> 的參數(shù)設(shè)定（常用）：

例如：<td width="48%" height="400" colspan="5" rowspan="4" align="RIGHT" valign="BOTTOM" bgcolor="#FF00FF" bordercolor="#808080" bordercolorlight="#FF0000" bordercolordark="#00FF00" background="myweb.gif">

實(shí)例：7-4.html

<HTML>

<HEAD>

<TITLE>單元格的設(shè)定</TITLE>

</HEAD>

<BODY>

<TR>

</TR>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

7-5 設(shè)定跨多行多列單元格

要?jiǎng)?chuàng)建跨多行、多列的單元格，只需在<TH>或<TD>中加入ROWSPAN或COLSPAN屬性的屬性值，默認(rèn)值為1。表明了表格中要跨越的行或列的個(gè)數(shù)。

跨多列的語法： <th colspan=#>　<td colspan=#>

colspan表示跨越的列數(shù)，例如colspan=2表示這一格的寬度為兩個(gè)列的寬度。

跨多行的語法： <th rowspan=#>　<td rowspan=#>

rowspan所要表示的意義是指跨越的行數(shù)，例如rowspan=2就表示這一格跨越表格兩個(gè)行的高度。

實(shí)例：7-5.html

<html>

<head>

<title>跨多行跨多列的單元格</title>

</head>

<body>

<TH colspan=3> 學(xué)生基本信息</TH>

</TR>

</TR>

</TR>

</TR>

</table>

</body>

</html>

7-6 表格的分組

7-6-1 表格的行分組<thead>/<tbody>/<tfoot>

html文檔的表格按行分組是由表頭標(biāo)簽<thead>、表格主體標(biāo)簽<tbody>和尾注標(biāo)簽<tfoot>三個(gè)部分組成的。其中尾注標(biāo)簽很少用。<thead>標(biāo)簽是成對標(biāo)簽，其標(biāo)簽內(nèi)是由表頭標(biāo)簽標(biāo)識的表頭元素。<tbody>標(biāo)簽用于規(guī)定表格主體部分的元素。<thead>和<tbody>標(biāo)簽的屬性和<th><td>標(biāo)簽是一樣的。

實(shí)例：7-6-1.html

<html>

<head>

<title>表格按行分組</title>

</head>

<body>

</TR>

</thead>

</TR>

</TR>

</tbody>

</table>

</body>

</html>

7-6-2 表格按列分組<colgroup>

html使用<colgroup>標(biāo)簽來將表格分組。

語法格式：<colgroup span="數(shù)值" align="參數(shù)">

說明：<colgroup>標(biāo)簽有兩個(gè)屬性，span和align, 他們都是可選的。span屬性的值是數(shù)字，表示該組包含的列數(shù)，默認(rèn)值為1。align屬性用以規(guī)定該組所跨列中所有單元格中內(nèi)容在水平方向上的位置。該屬性的值為left,center,right之一。它們表示單元格的內(nèi)容是左對齊，水平居中還是右對齊。

實(shí)例：7-6-2.html

<html>

<head>

<title>表格按列分組</title>

</head>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</table>

</body>

</html>

7-6-3 表格的行列分組

實(shí)例：7-6-3.html

<HTML>

<HEAD>

<TITLE>同時(shí)進(jìn)行行列分組</TITLE>

</HEAD>

<BODY>

<TR>

</THEAD>

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TBODY>

</TABLE>

</BODY>

</HTML>

7-7 表格的標(biāo)題標(biāo)簽<caption>

表格標(biāo)題的位置，可由ALIGN屬性和VALIGN屬性來設(shè)置，ALIGN屬性設(shè)置標(biāo)題位于文檔的左，中，右。 VALIGN屬性設(shè)置標(biāo)題位于表格的上方和表格的下方。下面為表格標(biāo)題位置的設(shè)置格式。

語法格式：

<caption>應(yīng)放在<table>標(biāo)簽內(nèi)，在表格行標(biāo)簽<tr>標(biāo)簽之前。

<caption>標(biāo)簽的默認(rèn)屬性是標(biāo)題位于表格的上方中間位置。

實(shí)例：7-7.html

<html>

<head>

</head>

<body>

<TH colspan=3> 學(xué)生基本信息</TH>

</TR>

</TR>

</TR>

</body>

</html>

7-8 表格的嵌套

在html頁面中，使用表格排版是通過嵌套來完成的，即一個(gè)表格內(nèi)部可以嵌套另一個(gè)表格，用表格來排版頁面的思路是：由總表格規(guī)劃整體的結(jié)構(gòu)，由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版，并插入到表格的相應(yīng)位置，這樣就可以使頁面的各個(gè)部分有條不紊，互不沖突，看上去清晰整潔。在實(shí)際做網(wǎng)頁時(shí)一般不顯示邊框,邊框的顯示可根據(jù)自己的愛好來設(shè)定。在實(shí)例中為了讓大家能夠看清楚，都設(shè)置了有邊框。

實(shí)例7-8.html

<html>

<head>

</head>

<tr>

</tr>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></td>

<tr>

</tr>

<tr>

</tr>

</table></td>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></td>

</tr>

</table>

</body>

</html>

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊舉報(bào)。

国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看