【正文】 內(nèi)容（文本、圖片等） 的垂直對齊 方式 。 屬性值 含義 Left 左對齊 Center 居中對齊 right 右對齊 屬性值 含義 top 對內(nèi)容進(jìn)行上 對齊 middle 對內(nèi)容進(jìn)行居中 對齊 bottom 對內(nèi)容進(jìn)行下 對齊 baseline 與基線 對齊 第 25頁 任務(wù)一 表格的設(shè)計(jì) ● 單元格屬性 ? baseline 值 基線是一條虛構(gòu)的線。在一行文本中，大多數(shù)字母以基線為基準(zhǔn)。 baseline 值設(shè)置行中的所有表格數(shù)據(jù)都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文本的字號各不相同，那么 baseline 的效果會更好 。 第 26頁 任務(wù)一 表格的設(shè)計(jì) ● 單元格屬性 – colspan屬性：水平跨度 – rowspan屬性：垂直跨度 第 27頁 BODY TABLE BORDER = 2 ALIGN = CENTER CAPTION創(chuàng)建表格 /CAPTION TH COLSPAN = 3第一學(xué)期 /TH TH COLSPAN = 3第二學(xué)期 /TH TR TD數(shù)學(xué) /TD TD科學(xué) /TD TD英語 /TD TD數(shù)學(xué) /TD TD科學(xué) /TD TD英語 /TD TR TD98/TD TD95/TD TD80/TD TD95/TD TD87/TD TD88/TD .... COLSPAN=“n” 屬性表示跨多少列 1 第 28頁 BODY TABLE BORDER = 1, align = center CAPTIONb創(chuàng)建表格b/CAPTION TR TH/TH TH/TH TH螺母 /TH TH螺栓 /TH TH錘子 /TH TR TD ROWSPAN = 3第一季度 /TD TD一月 /TD TD2500/TD TD1000/TD TD1240/TD TR TD二月 /TD TD3000/TD TD2500/TD TD4000/TD TR ..... ROWSPAN=“n” 屬性表示跨多少行 第 29頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=gb2312 / title水平跨度 /title /head body table width=500 border=1 align=center cellpadding=5 cellspacing=1 tr td colspan=2 align=center2023秋冬系列的四大類別 /td /tr tr td童趣 /td td羅曼蒂克 /td /tr tr td愛的故事 /td td大都會之夜 /td /tr /table /body /html 第 30頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=gb2312 / title垂直跨度 /title /head body table width=500 border=1 align=center cellpadding=5 cellspacing=1 tr td商品名稱： /td td彩晶石銀手鏈 /td /tr tr td規(guī)格： /td td材質(zhì)： 925純銀 天然紫晶 黃晶 橄欖石 /td /tr tr td單位： /td td每條 /td /tr tr td rowspan=2類別： /td td925銀飾 /td /tr tr td銀鏈?zhǔn)骤C /td /tr /table /body /html 第 31頁 任務(wù)一 表格的設(shè)計(jì) ● 表格的結(jié)構(gòu) 表首 標(biāo)記 thead、表主體標(biāo)記 tbody以及表尾標(biāo)記 tfoot ，使用這些標(biāo)記能對表格的一行或多行單元格屬性進(jìn)行統(tǒng)一修改，從而省去了逐一修改單元格屬性的麻煩。 –表首標(biāo)記 thead ? 語法 – thead bgcolor=“背景顏色 ” align=“對齊方式 ”…… /thead ? 用于定義表格最上端表首的樣式 ? 一個(gè)表元素中只能有一個(gè) thead標(biāo)記 第 32頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / html head meta equiv=ContentType content=text/html。 charset=utf8 / title表格結(jié)構(gòu) /title /head body table width=400 border=1 align=center cellpadding=5 cellspacing=2 caption 某購物網(wǎng)站列表 /caption thead bgcolor=FF33FF align=center tr td產(chǎn)品名稱 /td td類型 /td td價(jià)格 /td /tr /thead 第 33頁 任務(wù)一 表格的設(shè)計(jì) tbody bgcolor=CC99FF align=left tr td手工編織厚圍巾 /td td圍巾 /td td /td /tr tr td彩音盒 MP3/td td數(shù)碼 /td td599元 /td /tr tr td彩晶石銀手鏈 /td td銀飾 /td td68元 /td /tr /tbody tfoot bgcolor=FFCCFF align=righttr td colspan=3 align=right歡迎光臨本購物網(wǎng)站！ /td /tr/tfoot /table /body /html 第 34頁 任務(wù)一 表格的設(shè)計(jì) ● 嵌套表格 – 在 HTML文件中，第一個(gè) table標(biāo)記表示插入第一表格，第二個(gè) table標(biāo)記插入在標(biāo)記td/td之間，表示在單元格中插入表格，也就是嵌套表格。 表格常用屬性總結(jié) width height align border bordercolor background bgcolor cellspacing cellpadding 表格屬性 table align width height bordercolor bgcolor background …… 表格行屬性 tr width height colspan rowspan bgcolor bordercolor align …… 單元格屬性 td table/table tr/tr td/td 注意：距離目標(biāo)元素最近的標(biāo)簽屬性起作用 第 36頁 作業(yè) 312 編寫 如下圖所示效果對應(yīng)的 html代碼 任務(wù)一 表格的設(shè)計(jì) 第 37頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title作業(yè) 32/title /head body table border=1 tr td rowspan=2阿里巴巴旗下網(wǎng)站 /td td我要買 /td td我要買 /td td我淘寶 /td /tr tr td colspan=3你好，歡迎來淘寶！ /td /tr /table /body /html 作業(yè) 312源代碼 第 38頁 跨 2行 ，并放了一副圖片 此單元格放了 一副圖片 此單元格跨了 3列 作業(yè) 313 編寫如下圖所示效果對應(yīng)的 html代碼 插入圖片： img src=url width=“圖片寬度 ” heigjt=“圖片高度 ” 任務(wù)一 表格的設(shè)計(jì) 第 39頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title作業(yè) 32/title /head body table tr td rowspan=2img src=aboutgame/images/ width=100 height=50/td tdimg src=aboutgame/images/ width=100 height=40/td tdimg src=aboutgame/images/ width=100 height=40/td tdimg src=aboutgame/images/ width=100 height=40/td /tr tr td height=44 colspan=3 align=center你好，歡迎來淘寶！ /td /tr /table /body /html 作業(yè) 313源代碼 第 40頁 任務(wù)一 表格的設(shè)計(jì) ● 作業(yè) 314 – 使用 代碼 編寫一個(gè)網(wǎng)頁 ,要求： – 網(wǎng)頁中包含 5行 3列的表格，表格居中對齊，表格邊框?yàn)?1像素，表格的寬度為 400像素； – 表格標(biāo)題為：一月、二月銷售記錄表； – 表格第一行的背景顏色為 ff9966，第二行的背景顏色為ffccff，第三行的北京顏色為： 66CC99，第四行的背景顏色為： FFCCFF，第五行的背景顏色為： FF9966； – 第一 列為左對齊，第二列為右對齊，第三列為右對齊； – 第一行和最后一行使用 th代替 td； – 將文件保存為：姓名作業(yè) ，并上交 第 41頁 任務(wù)一 表格的設(shè)計(jì) %LANGUAGE=VBSCRIPT CODEPAGE=65001% html head meta equiv=ContentType content=text/html。 charset=utf8 / title消費(fèi)記錄 /title /head body table width=400 border=1 align=center caption一月、二月消費(fèi)記錄表 /caption tr bgcolor=FF9966 th align=left消費(fèi)項(xiàng)目 ..../th th align=right一月 /th th align=right二月 /th /tr tr bgcolor=FFCCF