網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)（HTML5+CSS3）課件 第6章 表格設(shè)計(jì)

第6章

表格設(shè)計(jì)

目錄表格結(jié)構(gòu)01表格屬性02表格例子036.1.1表格標(biāo)簽<table></table>表示表格標(biāo)簽,里面描述表格的屬性。<tr></tr>定義表格行。<td></td>定義單元格，單元格里面存放數(shù)據(jù)，這些數(shù)據(jù)可以是圖片、文字、聲音、視頻等。<tablewidth="200px"border=”1"align=”center”>

<tr>

<td>姓名</td>

<td>星座</td>

</tr>

<tr>

<td>張三</td>

<td>雙子座</td>

</tr><tr>

<td>李四</td>

<td>巨蟹座</td>

</tr></table>6.1表格結(jié)構(gòu)6.1.2插入表格（1）在設(shè)計(jì)視圖中，可以選擇插入-Table，在彈出的Table對(duì)話框中，設(shè)置表格行數(shù)為3，列為2，表格寬度為200px，邊框粗細(xì)為1，再點(diǎn)擊確認(rèn)，即建立了3行2列的表格，(2)插入表格后，在表格屬性窗口中，設(shè)置表格對(duì)齊方式align:居中對(duì)齊，(3)在表格的空白行內(nèi)，依次輸入相應(yīng)的內(nèi)容(4)如果要設(shè)置表格的背景，可以直接在<table>標(biāo)簽內(nèi)，設(shè)置bgcolor，例如<tablewidth="200"border="1"align="center"bgcolor="#abcedf">6.2表格屬性6.2.1表格<table>屬性表格<table>的常用屬性包括以下部分：width：寬度height：高度align：水平對(duì)齊方式bgcolor：背景顏色border:邊框粗細(xì)bordercolor:邊框顏色cellspacing：?jiǎn)卧耖g距，即單元格和單元格之之間的距離cellpadding填充，單元格邊距，即單元格里面的內(nèi)容距離單元格邊的值bordercolorlight:亮邊框顏色（左上邊框顏色）bordercolordark:暗邊框顏色（右下邊框顏色）6.2.2表格行<tr>屬性表格行<tr>的屬性只要包括：align：行內(nèi)容的水平對(duì)齊valign：行內(nèi)容的垂直對(duì)齊bgcolor：行的背景顏色bordercolor:行邊框顏色bordercolorlight:行的亮邊框顏色bordercolordark:行的暗邊框顏色6.2.3單元格<td>屬性單元格<td>的屬性如下：width：?jiǎn)卧竦膶挾萮eight：?jiǎn)卧竦母叨萢lign：?jiǎn)卧駜?nèi)容的水平對(duì)齊valign：?jiǎn)卧駜?nèi)容的垂直對(duì)齊bgcolor：?jiǎn)卧竦谋尘邦伾玝ordercolor:單元格邊框顏色bordercolorlight:單元格的亮邊框顏色bordercolordark:單元格的暗邊框顏色background:單元格的背景圖像colspan：?jiǎn)卧窨缌泻喜owspan：?jiǎn)卧窨缧泻喜?.3.1最新熱曲榜頁面例子（1）新建頁面index.html,在頁面中插入6行3列的表格，表格寬度自動(dòng)，不設(shè)置具體的值，邊框?yàn)?。插入表格后，在表格屬性中設(shè)置對(duì)齊方式Align為“居中對(duì)齊”。6.3表格應(yīng)用實(shí)例6.3.1表格應(yīng)用實(shí)例（2）根據(jù)效果圖，在單元格里面輸入相應(yīng)內(nèi)容，并合并相應(yīng)的單元格.（3）設(shè)置樣式：.biaoti{ font-family:"楷體"; font-weight:bold; text-align:center; font-size:xx-large; color:#4324CD;}td{text-align:center;}6.3.1表格應(yīng)用實(shí)例（4）設(shè)置表格只顯示外邊框的線，表格內(nèi)部設(shè)置橫向分隔線?？梢允褂帽砀竦膄rame屬性和rules屬性<tableborder="1"align="center"frame="box"rules="rows">在本例中，將frame=“box”，只顯示表格四條邊框線，同時(shí)設(shè)置rules=”rows”,設(shè)置橫向分隔線，隱藏豎向分隔線。Frame屬性和rules屬性取值下面的例子為某個(gè)公司的項(xiàng)目進(jìn)度匯總情況表格以淡藍(lán)色調(diào)為主，設(shè)置邊框線和灰色字體，同時(shí)設(shè)置隔行的背景色，提高用戶的閱讀體驗(yàn)。6.3.2設(shè)計(jì)統(tǒng)計(jì)數(shù)據(jù)表格6.3.2設(shè)計(jì)統(tǒng)計(jì)數(shù)據(jù)表格（1）建立11行8列的表格，不設(shè)置表格寬度，在表格里面依次輸入表頭行<th></th>以及各行單元格內(nèi)容：<table><tr><th>活動(dòng)</th><th>計(jì)劃開始</th><th>計(jì)劃工期/天</th><th>實(shí)際開始</th><th>實(shí)際工期/天</th><th>完成百分比</th><th>審核人</th><th>執(zhí)行人</th></tr>

<tr>…</tr>

…</table>6.3.2設(shè)計(jì)統(tǒng)計(jì)數(shù)據(jù)表格(2)設(shè)置表格的樣式table{ table-layout:fixed;/*固定表格布局*/ empty-cells:show;/*顯示空單元格*/ margin:0auto;/*居中對(duì)齊*/ border-collapse:collapse;/*合并邊框*/ border:1pxsolid#cad9ea; color:#666; font-size:12px; }(3)設(shè)置th,td,tr的樣式th{background-color:azure;height:30px;}td{height:20px;}td,th{border:1pxsolid#cad9ea;pading：01em0;} }tr:nth-child(odd){background-color:#f5fafe;/*設(shè)置奇數(shù)行背景顏色*/ }下面的例子展示了使用表格來制作個(gè)人主頁面。使用表格布局頁面的步驟如下：新建頁面index.html,在頁面中插入4行4列的表格，表格寬度為800，并設(shè)置居中對(duì)齊。合并第一行的4個(gè)單元格，輸入內(nèi)容“我的個(gè)人站點(diǎn)”。第二行的4個(gè)單元格分別輸入導(dǎo)航欄內(nèi)容。6.3.3表格綜合布局6.3.3表格綜合布局合并第三行的4個(gè)單元格，點(diǎn)擊菜單插入--HTML--水平線，插入水平線<hr/>，并設(shè)置水平線的顏色為白色，高度為2。<hrsize="2"color=#FFFFFF/>合并第四行的4個(gè)單元格，插入一個(gè)3行2列表格，表格寬度為600，并設(shè)置居中。在第一個(gè)單元格里插入圖片，在第二個(gè)單元格里輸入相應(yīng)文字內(nèi)容；第二行合并單元格后，輸入“推薦圖片”；第3行合并單元格后，插入4幅圖片。6.設(shè)置body的樣式，定義背景圖片、字體顏色為白色。body{background-image:url(img/bg.jpg);color:#ffffff;}6.3.3表格綜合布局7.建立類.t1和.t2，用于設(shè)置兩個(gè)表格的樣式。.t1

{width：800px;border:solid#ffffff6px;background-color:#abcedf;margin:auto;

}.t2

{background-color:#ffffff;margin:auto;width:600px;}8.建立類.d1，用于設(shè)置導(dǎo)航欄單元格的樣式.d1{font-family:"楷體_GB2312";font-size:18px;

text-align:center;width:25%;}6.3.3表格綜合布局9.使用h1設(shè)置標(biāo)題樣式，定義.p1設(shè)置除導(dǎo)航欄外的文本樣式。h1{font-family:"楷體_GB2312";font-size:46px;text-align:center;color:#FFF;}.p1{font-family:"楷體_GB2312";font-size:18px;color:#000;}6.3.3表格綜合布局10.設(shè)置表格只顯示外部邊框線，不顯示內(nèi)部邊框線?？稍O(shè)置frame=“box”，rules=“none”，完整代碼為：<tableclass="t1"frame="box"rules="none">11.對(duì)最下方的四幅圖片，使用<marquee></marquee>標(biāo)記設(shè)置圖片滾動(dòng)效果。<marqueebehavior="scroll"direction="left"><imgsrc="img/p1.jpg"width="192"height="120"/><imgsrc="img/p3.jpg"width="192"height="120"/><imgsrc="img/p4.jpg"width="174"height="120"/><imgsrc="i