版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
Web前端開發(fā)技術(shù)第三單元表格的應(yīng)用掌握表格的概念和使用設(shè)置表格標(biāo)記屬性插入表格及設(shè)置屬性表格的行和單元格表格嵌套3.1創(chuàng)建表格3.2表格的基本屬性3.3跨行和跨列的操作3.4表格嵌套創(chuàng)建表格13.1.1表格的基本構(gòu)成表格的基本結(jié)構(gòu):
表格的基本結(jié)構(gòu)由行和列組成,順序是先行后列,即先定義表格中有多少行,再定義每行上有多少列(或稱單元格),形成標(biāo)記間的嵌套關(guān)系?;菊Z法:3.1.2設(shè)置表格的標(biāo)題基本語法:語法說明:
在HTML文件中,使用成對<caption></caption>標(biāo)記給表格插入標(biāo)題。3.1.3表頭
一般表格會有列名稱和數(shù)據(jù)這兩部分,列名稱作為表格的第一行,稱為表頭。基本語法:語法說明:
在HTML文檔中,<th></th>標(biāo)記定義表頭,放置在行標(biāo)記<tr>中,與<td>標(biāo)記一樣定義單元格標(biāo)記,但是該標(biāo)記帶有居中加粗的樣式。表格基本屬性23.2.1設(shè)置表格邊框樣式
表格<table>標(biāo)記中可以通過border屬性和bordercolor屬性設(shè)置表格邊框的樣式。基本說明:語法說明:border屬性用于設(shè)置表格邊框的粗細(xì)。取>=0的整數(shù)。當(dāng)border屬性設(shè)置為零時表示不顯示邊框,數(shù)值越大邊框越粗;bordercolor屬性設(shè)置表格邊框的顏色。bordercolor屬性只有在border屬性的值不為零時才有效果。3.2.2設(shè)置寬度和高度
width屬性和height屬性分別設(shè)置表格的寬度和高度,也可以設(shè)置行和單元格寬度和高度,將這兩個屬性分別設(shè)置在標(biāo)記<table>、<tr>和<td>中?;菊Z法:語法說明:
表示寬度和高度的值一般有兩種方法,第一種,用數(shù)值表示,正整數(shù);第二種,用百分比來表示,相對于設(shè)置該屬性所在元素的父元素的寬度和高度。注意:如果沒有對width屬性和height屬性進(jìn)行設(shè)置,表格寬度和高度會自適應(yīng)表格內(nèi)容的寬度和高度。3.2.3設(shè)置對齊方式對齊方式:
對齊方式分為水平方向?qū)R和垂直方向?qū)R水平對齊:
align屬性設(shè)置水平方向上的對齊,該屬性有4個值可選。3.2.3設(shè)置對齊方式垂直對齊:valign屬性設(shè)置水平方向上的對齊,該屬性有4個值可選。不同標(biāo)記中的對齊方式:3.2.4邊距與填充
表格中有兩種留白,分別為邊距(cellspacing)和填充(cellpadding)。基本語法:語法說明:cellspacing屬性用于設(shè)置表格內(nèi)外邊框線的距離,該屬性的默認(rèn)值一般不為零;cellpadding屬性設(shè)置表格單元格中內(nèi)容與邊框之間的間距,默認(rèn)值為零。3.2.5背景色設(shè)置
在表格中設(shè)置背景顏色可以使用bgcolor屬性,<table>、<tr>和<td>標(biāo)記都可以設(shè)置bgcolor屬性,分別表示給整個表格、表格中的一行、某個單元格設(shè)置背景色?;菊Z法:語法說明:
表示顏色的三種方法已經(jīng)在3.2.1中詳細(xì)描述,在此不再累述??缧泻涂缌胁僮?3.3.1跨列操作
單元格跨列操作,通過設(shè)置單元格<td>標(biāo)記中的colspan屬性來實現(xiàn)?;菊Z法:語法說明:colspan屬性定義橫跨單元格的列數(shù)。3.3.2跨行操作
單元格跨行操作,通過設(shè)置單元格<td>標(biāo)記中的rowspan屬性來實現(xiàn)?;菊Z法:語法說明:rowspan屬性定義豎跨單元格的行數(shù)。
表格嵌套42.4添加段
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 北京市昌平區(qū)2025-2026學(xué)年高一上學(xué)期期末考試政治試卷(含答案)
- 2025年萬博科技職業(yè)學(xué)院單招綜合素質(zhì)考試題庫附答案解析
- 2025年錫林郭勒職業(yè)學(xué)院單招職業(yè)技能測試題庫帶答案解析
- 2025年特克斯縣幼兒園教師招教考試備考題庫帶答案解析(奪冠)
- 2025年廣西藍(lán)天航空職業(yè)學(xué)院單招職業(yè)傾向性測試題庫附答案解析
- 2025年云南體育運(yùn)動職業(yè)技術(shù)學(xué)院單招職業(yè)適應(yīng)性測試題庫附答案解析
- 2025年石家莊幼兒師范高等??茖W(xué)校馬克思主義基本原理概論期末考試模擬題帶答案解析(奪冠)
- 2025年蘇州科技大學(xué)馬克思主義基本原理概論期末考試模擬題附答案解析(奪冠)
- 2024年隆化縣幼兒園教師招教考試備考題庫及答案解析(奪冠)
- 2025年夏縣招教考試備考題庫含答案解析(奪冠)
- 紹興興欣新材料股份有限公司新增3000ta焦磷酸哌嗪、4000ta聚氨酯發(fā)泡催化劑、5000taN-β-羥乙基乙二胺、500ta無水哌嗪項目及全廠資源循環(huán)利用技改提升項目(一期)環(huán)境影響報告書
- 千古奇文《初心》原文
- 失禁相關(guān)性皮炎與壓力性損傷的區(qū)分鑒別
- 鋁合金門窗設(shè)計說明
- MUX-2MD繼電保護(hù)信號數(shù)字復(fù)接接口裝置說明書
- 食品行業(yè)倉庫盤點制度及流程
- 北京市通州區(qū)2023-2024學(xué)年九年級上學(xué)期期末考試語文試卷(含答案)
- 2024四川綿陽涪城區(qū)事業(yè)單位選調(diào)(聘)筆試管理單位遴選500模擬題附帶答案詳解
- 發(fā)貨組年終總結(jié)
- 《化工制圖》試題及參考答案 (C卷)
- 新疆維吾爾自治區(qū)伊犁哈薩克自治州2023-2024學(xué)年八年級下學(xué)期期中數(shù)學(xué)試題
評論
0/150
提交評論