Web前端開發(fā)（HTML5+CSS3+JavaScript） 課件 第3章 3.3-表格

Web前端基礎技術CSSJSHTML第3章3.3-表格Contents目錄表格基本結(jié)構(gòu)表格屬性設置行、列屬性行、列合并1.表格用途和結(jié)構(gòu)作用：1.數(shù)據(jù)展示；2.頁面布局：局部元素定位；整體界面布局組成：標題caption、表頭thead、表體tbody和表尾tfoot。特點：表格的每一行都可以包含一個或多個單元格

，每一行單元格數(shù)相同單元格除了包含文本，也可以包含其他的HTML標記，例如圖片、表單元素等。<tableborder="1"width="200px"><caption>學生信息表（標題）</caption><thead><tr><th>姓名</th><th>性別</th></tr></thead><tbody><tr><td>張三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr></tbody>表格完整的結(jié)構(gòu)1.表頭行：默認加粗、居中2.表體：0行以上注意：表格每行的單元格數(shù)是相同的<tfoot><tr><td>人數(shù)</td><td>2人</td></tr></tfoot></table>3.表尾：同表體重點關注：tabletrtd標記；常用簡化結(jié)構(gòu)的表格簡化應用：可省略caption、thead、tbody和tfoot標記，默認為表格主體數(shù)據(jù)<tableborder="1"><tr><td>姓名</td><td>性別</td></tr><tr><td>張三</td><td>男</td></tr><tr><td>李四</td><td>女</td></tr><tr><td>人數(shù)</td><td>2</td></tr></table>默認情況下，表格寬度由單元格內(nèi)容決定2.表格主要屬性1.表格邊框:border

=“數(shù)字”（默認值為0即無邊框）；邊框顏色：bordercolor=“顏色值”2.表格在頁面對齊：align=“l(fā)eft|center|right”3.統(tǒng)一設置單元格樣式：內(nèi)邊距：cellpadding=“數(shù)字”單元格內(nèi)容離四周間隔外邊距：cellspacing=“數(shù)字”單元格與單元格之間的間隔4.寬度和高度：width=“數(shù)字|百分比”height=“數(shù)字|百分比”【百分比：相對父元素的對應值,當前相對頁面寬度，注意：頁面高度auto（由內(nèi)容決定）】5.背景色bgcolor=“顏色值”背景圖backgorund=“url”6.部分外邊線：frame=“above|below|vsides|hsides|lhs|rhs|none邊框線粗細取決border值如果使用frame，則表格外邊框線由frame決定，粗細才由border決定7部分內(nèi)邊線：rules=“all|rows|cols”如果使用rules，則表格內(nèi)邊框線由rules決定，粗細固定為1px練習：表格在頁面居中，其中，表格標題“課程表”使用標題2；個別單元格使用加粗字體，單元格外邊距離為10px，內(nèi)邊距為10px，背景色為#ccc。如下圖所示。1.制作標題和表頭行；2.輸入每一行對應的單元格數(shù)據(jù)；3.表格屬性：border="1"align="center"cellpadding="10px“cellspacing="10px"bgcolor="#ccc"<tableborder="1"align="center"cellpadding="10px"cellspacing="10px"bgcolor="#ccc">

<caption>

<h2>課程表</h2></caption>

<!--表格頭--><tr>

<th>時間</th>

<th>星期一</th>

<th>星期二</th>

<th>星期三</th>

<th>星期四</th>

<th>星期五</th></tr>

<!--表格數(shù)據(jù)--><tr><td>1,2</td>

<td>大學英語</td>

<td><b>Web前端基礎技術</b></td><td></td><td></td>

<td><b>Web前端基礎技術</b></td></tr>

<tr><td>3,4</td>

<td>高等數(shù)學</td>

<td>英文寫作</td>

<td>操作系統(tǒng)</td><td></td><td></td></tr></table>示例：修改課程表樣式（細線表格，了解屬性rules，只需在上例中修改table屬性），如下圖align="center"cellpadding="10px"rules="all"

內(nèi)部邊線（行、列邊線，不包含外邊框，cellspacing此時為0）frame="hsides"只包含外部水平線border="1"影響frame的粗細，如果沒有frame，則包含表格外部邊線3.行、單元格屬性行tr屬性屬性說明align水平對齊方式，統(tǒng)一設置當前行所有單元格的內(nèi)容水平對齊方式，取值為：left（默認）、center和right，分別代表左、居中和右對齊。valign垂直對齊方式，統(tǒng)一設置當前行所有單元格的內(nèi)容垂直對齊方式，取值為：top、middle（默認值）和bottom，分別代表頂部、居中和底部對齊。height行高，單位為px（像素）width行寬，該屬性無效，行的寬度是由表格的寬度或者單元格的寬度決定。bgcolor當前行的背景色，取值為顏色關鍵字或16進制數(shù)，如red、#ccc等。單元格td屬性屬性說明align水平對齊方式，當前單元格內(nèi)容水平對齊方式，取值為：left（默認值）、center和right，分別代表左、居中和右對齊。valign垂直對齊方式，當前單元格內(nèi)容垂直對齊方式，取值為：top、middle和bottom，分別代表頂部、居中和底部對齊。height：當前單元格的高度，單位為px或%。注意，如果要設置某行的高度，只要設置其中一個單元格（通常是該行第一個單元格）的高度即可。width當前單元格的寬度，單位為px或%。注意，如果要設置某列的寬度，只要設置其中一個單元格（通常首行的單元格）的寬度即可。bgcolor：當前單元格的背景色，取值為顏色關鍵字或16進制數(shù)，如red、#ccc等。示例：行、單元格屬性使用<tableborder="1"><tralign="center"valign="middle"height="40px"bgcolor="#ccc"><tdwidth="200px">完全居中</td><tdwidth="100px">完全居中</td><tdwidth=100px">完全居中</td></tr><trheight="40px"><tdvalign="top">左頂部</td><tdvalign="middle"bgcolor="#ccc">左居中</td><tdvalign="bottom">左底部</td></tr><trheight="100px"><tdvalign="top"><imgsrc="huawei.jpg"width="50%"/><p>左頂部</p></td><tdalign="center"valign="middle"><imgsrc="huawei.jpg"width="50%"/><p>完全居中</p></td><tdalign="right"valign="bottom"><imgsrc="huawei.jpg"width="50%"/><p>右底部</p></td></tr></table>第1行：所有單元格內(nèi)容水平、垂直居中；行高40px，背景色#ccc。第2行：依次頂部、中間和底部居中，左對齊；行高40px，第2個單元格背景色#ccc。第3行：高度100px；包含圖片，依次左邊、頂部居中；完全居中；底部右邊居中；圖片寬度為50%.此外，第1列寬度為200px,其他列寬度為100px。3.行列合并

colspan（相鄰單元格列方向合并）rowspan（相鄰單元格，行方向合并）---需要刪除被合并的單元格<h3>素材表格</h3><tableborder="1"><!--第1行--><tr><td>1,1</td><td>1,2</td><td>1,3</td></tr><!--第2行--><tr><td>2,1</td><td>2,2</td><td>2,3</td></tr><!--第3行--><tr><td>3,1</td><td>3,2</td><td>3,3</td></tr></table><h3>列合并，合并第一行2，3列</h3><tableborder="1"><!--第1行--><tr><td>1,1</td><tdcolspan="2">1,2</td><!--<td>1,3</td>--></tr><!--第2行--><tr><td>2,1</td><td>2,2</td><td>2,3</td></tr><!--第3行--><tr><td>3,1</td><td>3,2</td><td>3,3</td></tr></table><h3>行合并，合并第2，3行3列</h3><tableborder="1"><!--第1行--><tr><td>1,1</td><tdcolspan="2">1,2</td><!--<td>1,3</td>--></tr><!--第2行--><tr><td>2,1</td><td>2,2</td><tdrowspan="2">2,3</td></tr><!--第3行--><tr><td>3,1</td><td>3,2</td><!--<td>3,3</td>--></tr></table>4.嵌套表格（了解）嵌套表格是指在一個表格的任意單元格中嵌入另外一個表格。嵌套表格主要用于實現(xiàn)復雜的頁面布局（當前頁面布局一般不再使用嵌套表格的方式），例如下圖效果。單元格是內(nèi)容的容器，這些內(nèi)容包括文本、圖片、段落等其他任意可以在body中元素，還可以嵌入另外一個表格的內(nèi)容。綜合實例：使用表格相關屬性實現(xiàn)如下圖效果。思路[重點]：確定最大的列數(shù)及其寬度，作為模版行,其他行參照該行進行相應的行列合并確定最大列數(shù)的行，設置寬度，作為模板行復制模板行，去掉寬度，再作為模板行，除了第一步的模板行，依次復制到每一行根據(jù)要求進行行列合并<tableborder="1"align="center"><!--模版行--><!--<tr><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td><tdwidth="120px"></td></tr>--><!--1.第1行--><trheight="60px"><tdcolspan="6"align="center"valign="middle">博覽會申請表</td></tr><!--2.第2行--><tr><td>參會者姓名</td><tdcolspan="3"></td><!--<td></td><td></td>--><td>其他</td><td></td></tr>

<!--3.第3行--><tr><td>工作單位</td><tdcolspan="5"></td><!--<td></td><td></td>--><!--<td>其他</td><td></td>--></tr>

<!--標準行--><tr><tdwidth="120px">電話</td><tdwidth="120px"></td><tdwidth="120px">傳真</td><tdwidth="120px"></td><tdwidth="120px">手機</td><tdwidth="120px"></td></tr><!--4.第4行--><tr><td>通信地址</td><tdcolspan="2"></td><!--<td></td>--><td>郵編</td><tdcolspan="2"></td><!--<td></td>--></tr><!--4.第4行--><tr><td>省份</td><tdcolspan="2"></td><!--<td></td>--><td>城市</td><tdcolspan="2"></td><!--<td></td>--></tr></table>練習；制作個人信息表<h3align="center">個人信息表</h3><tableborder="1"width="840px"align="center"rules="all"><!--1.確定表格中最大列數(shù)，制作模版行-->

<!--<tr><tdwidth="60px">姓名</td><tdwidth="100px"></td><tdwidth="60px">性別</td><tdwidth="60px"></td><tdwidth="60px">民族</td><tdwidth="60px"></td><tdwidth="100px">政治面貌</td><tdwidth="100px"></td><tdwidth="140px">照片</td></tr>-->?<!--復制模版行作為第1行--><tralign="center"valign="middle"><tdwidth="60px">姓名</td><tdwidth="100px"></td><tdwidth="60px">性別</td><tdwidth="60px"></td><tdwidth="60px">民族</td><tdwidth="60px"></td><tdwidth="100px">政治<br/>面貌</td><tdwidth="100px"></td><tdwidth="140px"rowspan="3">照片</td></tr><!--復制模版行作為第2行，去掉寬度設置--><tralign="center"><td>籍貫</td><td></td><tdcolspan="2">出生年月</td>

<!--<td></td>--><tdcolspan="2"></td>

<!--<tdwidth="60px"></td>--><td>參加工作<br/>時間</td><td></td>

<!--<td>照片</td>--></tr>

<!--復制模版行作為第3行，去掉寬度設置--><tralign="center"><td>身份證<br/>號碼</td><tdcolspan="7"></td