《Web前端開發(fā)項目教程》網(wǎng)頁中表格的應用

項目08網(wǎng)頁中表格元素的應用任務8-1網(wǎng)頁中表格元素的應用

知識點掌握表格的基本用法和可選屬性掌握控制表格的各種樣式技能點學會使用合適的表格進行頁面數(shù)據(jù)展示能夠根據(jù)需要使用表格進行頁面局部布局一、創(chuàng)建表格——創(chuàng)建表格的基本語法html中的表格由<table>標簽來定義，每個表格均有若干行，行由<tr>標簽定義，每行被分割為若干單元格，單元格由<td>標簽定義。

td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容，可以包含文本、圖片、列表、段落、表單、水平線、表格等多種元素。創(chuàng)建表格的基本語法格式如下：<table><tr>

<td>單元格內(nèi)容</td> ...</tr>...</table><table></table>：用于定義一個表格。<tr></tr>：用于定義表格中的一行，必須嵌套在<table></table>標記中，在<table></table>中包含幾對<tr></tr>，就表示該表格有幾行。<td></td>：用于定義表格中的單元格，必須嵌套在<tr></tr>標記中，一對<tr></tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。一、創(chuàng)建表格——創(chuàng)建表格的基本語法<th>定義表格內(nèi)的表頭單元格。雙標記，其內(nèi)部的文本通常呈現(xiàn)為居中的粗體文本，而<td>元素內(nèi)的文本通常是左對齊的普通文本。<caption></caption>標記為表格添加標題，<caption>標記必須緊隨<table>之后，每個表格只能定義一個標題，居中顯示于表格之上。<table><caption>學生名單</caption>

<tr>

<th>姓名</th><th>性別</th><th>年齡</th></tr><tr><td>張三</td><td>男</td><td>18</td></tr><tr>

<td>李四</td><td>女</td><td>19</td></tr></table>html中的默認表格并沒有邊框，只是將信息按照表格的行列來展示，表格的外觀還需要由具體屬性來定義。一、創(chuàng)建表格——表格的可選屬性大多數(shù)HTML標記都有相應的屬性，用于為元素提供更多的信息，但是在web標準下，我們更加傾向于結構和表現(xiàn)相分離，所以更多使用CSS樣式設置頁面元素的表現(xiàn)特征，標記屬性用得少一些，對于<table><tr><td>等標記也不例外。但是有些表格屬性可以快速改變表格的外觀效果，在某些場合下使用效率比較高。一、創(chuàng)建表格——表格的可選屬性（1）<table>標記的屬性border屬性：border屬性用于設置表格的邊框，默認值為0。如果border=1，表示表格邊框的粗細為1個像素。cellspacing屬性：cellspacing屬性用于設置單元格之間的空白間距，默認為2px。border="1"cellspacing="0"一、創(chuàng)建表格——表格的可選屬性（1）<table>標記的屬性cellpadding屬性：cellpadding屬性用于設置單元格內(nèi)容與單元格邊框之間的空白間距，默認為1px。width與height屬性：默認情況下，表格的寬度和高度靠其自身的內(nèi)容來支撐，可以設置大小。align屬性：用于定義表格的水平對齊方式，其可選屬性值為left、center、right。不贊成使用，推薦使用樣式margin:0auto;代替。bgcolor屬性：用于設置表格的背景顏色。不贊成使用，推薦使用樣式background-color代替。cellpadding="12"一、創(chuàng)建表格——表格的可選屬性（2）<tr>標記的屬性height：設置行高度，常用屬性值為像素值。align：設置一行內(nèi)容的水平對齊方式，常用屬性值為left、center、right。valign：設置一行內(nèi)容的垂直對齊方式，常用屬性值為top、middle、bottom。bgcolor：設置行背景顏色，預定義的顏色值、十六進制#RGB、rgb(r,g,b)一、創(chuàng)建表格——表格的可選屬性（2）<tr>標記的屬性<tableborder="1"width="400"height="240"align="center"> <trheight="80"align="center"valign="middle"bgcolor="yellow"> <td>姓名</td><td>性別</td><td>電話</td><td>住址</td></tr><tr> <td>張三</td><td>女</td><td>lt;/td><td>北京</td></tr></table>通過<tr>的height屬性設置了該行的高度，但是不能單獨對某一行設置寬度，align屬性設置了該行內(nèi)容的水平對齊方式，valign屬性設置了垂直對齊方式，bgcolor設置了該行的背景顏色。以上屬性都可以使用相應的CSS樣式所代替。一、創(chuàng)建表格——表格的可選屬性（3）<td>標記width：設置單元格的寬度，常用屬性值為像素值。height：設置單元格的高度，常用屬性值為像素值。align：設置單元格內(nèi)容的水平對齊方式，常用屬性值為left、center、right。valign：設置單元格內(nèi)容的垂直對齊方式，常用屬性值為top、middle、bottom。bgcolor：設置單元格的背景顏色，常用屬性值為預定義的顏色值、十六進制#RGB、rgb(r,g,b)。colspan：設置單元格橫跨的列數(shù)（用于合并水平方向的單元格），常用屬性值為正整數(shù)。rowspan：設置單元格豎跨的行數(shù)（用于合并豎直方向的單元格），常用屬性值為正整數(shù)。與<tr>標記不同的是，可以對<td>標記應用width屬性，用于指定單元格的寬度，同時<td>標記還擁有colspan和rowspan屬性，用于對單元格進行合并。一、創(chuàng)建表格——表格的可選屬性（3）<td>標記<tableborder="1"cellspacing="0"cellpadding="0"width="200">

<caption>個人簡介</caption>

<trheight="50">

<td>姓名</td>

<tdwidth="60"></td>

<tdrowspan="3"width="100">照片</td>

</tr>

<trheight="50">

<td>年齡</td>

<td></td>

</tr>

<trheight="50">

<td>性別</td>

<td></td>

</tr>

<trheight="80">

<tdcolspan="3"align="left"valign="top">個人簡介：</td>

</tr></table>照片所在單元格占據(jù)了三行，所以在該單元格第一次出現(xiàn)的時候設置rowspan=3，說明該單元格占據(jù)3行，后面兩行中對應的該列的單元格<td>就可以刪掉了。同樣，最后一行占據(jù)了三列，只需對第一個單元格<td>標記應用colspan="3"，后面的兩對<td></td>就不需要再寫了。二、CSS控制表格樣式——CSS控制表格邊框樣式表格的標記屬性雖然用起來很方便，但是更多的時候我們傾向使用CSS樣式來控制表格的外觀，這樣做也更加符合web標準，尤其是表格還有著它獨有的樣式屬性，例如

border-collapse等?？梢允褂眠吙驑邮綄傩詁order為表格設置邊框，但是要特別注意此時設置的只是表格元素整體的邊框，單元格邊框還需要單獨設置。<styletype="text/css">

table{

width:280px;

height:160px;

border:1pxsolid; }</style>td,th{border:1pxsolid;}二、CSS控制表格樣式——CSS控制表格邊框樣式如何去掉單元格之間的空白距離，制作細線邊框效果？樣式屬性border-collapse設置表格的邊框是否被合并為一個單一的邊框，默認取值為separate，表示邊框會被分開。取值為collapse時，表示表格邊框會合并為單獨的一條。<styletype="text/css">

table{

width:280px;

height:160px;

border:1pxsolid;

}</style>border-collapse:collapse;/*邊框合并*/二、CSS控制表格樣式——CSS控制單元格邊距默認情況下，單元格的寬高是由單元格自身的內(nèi)容來支撐的，通過對單元格設置內(nèi)邊距padding樣式，同樣可以調(diào)整單元格內(nèi)容和邊框之間的距離。<styletype="text/css"> table{

border:1pxsolid;

border-collapse:collapse;

}

th,td{

border:1pxsolid;

padding:20px30px;

}</style>二、CSS控制表格樣式——CSS控制單元格邊距需要注意的是，對單元格設置margin無效。表格還有一個獨有的樣式屬性——border-spacing，可以方便地設置相鄰單元格邊框之間的距離，但是僅限于“邊框分離”模式，即border-collapse取默認值separate時，否則將忽略這個屬性。用法如下：border-spacing:length;該樣式屬性主要用于調(diào)整各個單元格之間的距離，在局部小范圍頁面排版中可以運用。table{

border-collapse:separate; border-spacing:50px40px;

}th,td{

border:1pxsolid; }二、CSS控制表格樣式——CSS控制單元格邊距需要注意的是，對單元格設置margin無效。表格還有一個獨有的樣式順序性——border-spacing，可以方便地設置相鄰單元格邊框之間的距離，但是僅限于“邊框分離”模式，即border-collapse取默認值separate時，否則將忽略這個屬性。用法如下：border-spacing:length;該樣式屬性主要用于調(diào)整各個單元格之間的距離，在局部小范圍頁面排版中可以運用。table{

border-collapse:separate; border-spacing:50px40px;

}th,td{

border:1pxsolid; }二、CSS控制表格樣式——CSS控制單元格寬高表格是一個整體結構，其單元格的寬度和高度都會互相影響，所以在設置<tr><td>等標記的寬高屬性時要考慮整體和部分的關系。<styletype="text/css">table{

border-collapse:collapse;

border:1pxsolid#F00;

width:300px; }th,td{ border:1pxsolid; }.one{width:100px;height:60px;}.two{width:50px;} .three{height:100px;}</style><body>

<table>

<caption>學生名單</caption>

<tr>

<thclass="one">姓名</th>

<thclass="two">性別</th>

<thclass="three">年齡</th>

</tr>

<tr>

<td>張三</td>

<td>男</td>

<td>18</td>

</tr>

…….

</table></body>二、CSS控制表格樣式——CSS控制單元格寬高在給單元格設置寬度和高度時，對同一行中的單元格定義不同的高度，最終的高度將取其中的較大者，對同一列中的單元格定義不同的寬度時，也是如此。而且所有單元格的寬度之和也不能超出表格的整體寬度，一旦超出了將按比例重新分配各列的寬度。三、表格的應用——展示數(shù)據(jù)在網(wǎng)頁中，表格主要為了呈現(xiàn)二維數(shù)據(jù)的，使用細線表格可以清晰地展示數(shù)據(jù)。例如新浪天氣預報頁面就是用表格將各地的天氣信息展示出來。在該網(wǎng)頁中，使用了單元格的合并屬性，以及斑馬底紋等樣式。三、表格的應用——展示數(shù)據(jù)在網(wǎng)頁中，表格主要為了呈現(xiàn)二維數(shù)據(jù)的，使用細線表格可以清晰地展示數(shù)據(jù)。例如新浪天氣預報頁面就是用表格將各地的天氣信息展示出來。在該網(wǎng)頁中，使用了單元格的合并屬性，以及斑馬底紋等樣式。三、表格的應用——展示數(shù)據(jù)要點：使用rowspan、colspan屬性規(guī)定了單元格如何合并°是可以替代攝氏度（°）符號的替代代碼（詳細見學習任務4-2）單元格中的圖片直接使用行內(nèi)標記<img>引入，圖片的大小可以通過CSS樣式修改。由于表格采用了斑馬底紋樣式，所以需要給部分<tr></tr>定義類，設置特殊的背景色。三、表格的應用——展示數(shù)據(jù)<styletype="text/css">

table{

border:0.5pxsolid#808080;border-collapse:collapse;margin:0auto;}

td{ border:0.5pxsolid#808080;width:140px; height:40px; font-family:"微軟雅黑";font-size:14px;text-align:center;}tdimg{height:30px;vertical-align:middle;}

.grayrow{background:#eee;}</style><table>

<caption>濟南市天氣預報</caption>

<trclass="grayrow">

<tdrowspan="2">市</td>

<tdrowspan="2">縣/區(qū)</td>

<tdcolspan="3">今天白天天氣情況</td>

</tr>

<trclass="grayrow">

<td>天氣情況</td>

<td>風力方向</td>

<td>最高溫度</td>

</tr>

<tr>

<tdrowspan=“？">濟南</td>

<td>濟南</td>

<td><imgsrc="img/morecloudy.png">少云</td>

<td>西南偏西風</td>

<td>6°</td>

</tr>……..</table>三、表格的應用——頁面布局由于表格有著結構穩(wěn)定、橫平豎直、對齊方便等特點，因此在早先的網(wǎng)頁制作中經(jīng)常使用表格進行頁面布局。但是由于表格布局只適用形式單調(diào)、內(nèi)容簡單的網(wǎng)頁，并且頁面結構調(diào)整起來很不方便，所以現(xiàn)在很少使用，只是偶爾在網(wǎng)頁的局部區(qū)域使用，利用表格的行列關系，在單元格中放置合適的內(nèi)容，<table><tr><td>標記就已足夠。例如在網(wǎng)上商城首頁快捷入口部分，由于該部分內(nèi)容正好三行兩列，圖片和文本在各自占據(jù)的區(qū)域內(nèi)水平垂直居中對齊，所以可以使用表格布局。三、表格的應用——頁面布局<divid="tool">

<table>

<tr>

<td><imgsrc="img/tool-1.png"><span>小米秒殺</span></td>

<td><img