网页制作中的表格与布局英文版优质PPT.ppt
- 文档编号:15041372
- 上传时间:2022-10-27
- 格式:PPT
- 页数:16
- 大小:356.50KB
网页制作中的表格与布局英文版优质PPT.ppt
《网页制作中的表格与布局英文版优质PPT.ppt》由会员分享,可在线阅读,更多相关《网页制作中的表格与布局英文版优质PPT.ppt(16页珍藏版)》请在冰豆网上搜索。
Chapter5Tablesandpagelayout1ObjectivesTellthedifferencebetweendatatablesandlayouttables.CreateHTMLtablesusing,.Usetheattributesproperly:
@#@rowspan,colspan,align,valign,cellspacing,cellpadding,width,height.UsetablelayoutandCSSlayoutproperly.2TableusesHTMLtablesfallinto2broadcategories:
@#@datatablesandlayouttables.Datatables,thearrangementofinformationinrowsandcolumns,aretheintendeduseofHTMLtableelements.Tablesmaybeusedtopresentcalendars,schedules,statistics,etc.Layouttablesareusedpurelyasapresentationaldeviceforcontrollingthelayoutofapage.Whilewearestillinaperiodoftransitionfromtable-baseddesigntototallyCSS-baseddesign,someauthorsstillchoosetousetablestoestablishthebasiccolumnstructureofthepage.3BasictablestructureWebtablesaremadeupofcells(whichiswherethecontentgoes),arrangedintorows.Theminimumelementsfordefiningatableare,forestablishingthetableitself,fordeclaringatablerow,andforcreatingtablecellswithintherow.Forexample4SpanningrowsandcolumnsDatacellsinatablecanoccupymorethanonespaceinthegridcreatedbytherowsandcolumns.Byspecifying,wecanmakethecellspanover2columns.Forexample,Byspecifying,wecanmakethecellspanover2rows.Forexample,5DescriptiveelementsTableheadercells(indicatedbytheelement)areusedtoprovideimportantinformationorcontextaboutthecellsintheroworcolumnthattheyprecede.Theelementprovidesatitleorbriefdescriptionofthetable.Thecaptionelementmustimmediatelyfollowtheopeningtabletag.tablecaption6TablecellspacingCellspacingreferstotheamountofspacethatisheldbetweenthecellsinatable.Itisspecifiedwiththecellspacingattributeinthetableelement.Cellpaddingreferstotheamountofspacebetweenthecellsborderandthecontentsofthecell.Itisspecifiedwiththecellpaddingattributeinthetableelement.Forexample7TableandcelldimensionsBydefault,atablewillrenderjustwideenoughtocontainallofitscontents.Youcanexplicitlyspecifythewidthofatableusingthewidthattributeinthetableelement.Youcancontrolthewidthandheightofindividualcellsbyusingthewidthandheightattributesinthetdorthelement.Forexample8CellcontentalignmentThealignandvalignattributesareusedtospecifythehorizontalandverticalalignmentofcontentwithincells.Alignmentmaybespecifiedforthefollowingelements:
@#@td,th,tr.Forexample9ResponsiblelayouttablesSticktobasictableelements.Useonlytheminimaltableelements.Keepitsimpleandlightweight.Usestylesheetsforpresentation.ThesecrettokeepingalayouttablesimpleandstreamlinedistouseitonlytoestablishabasiclayoutgridandtouseCSSforeverythingelserelatedtopresentation.Forexample10CSSlayoutsMastheadandheadlineMainarticleListoflinkscopyrightinformation11CSSlayouts.mastheadbackground:
@#@#CCC;@#@padding:
@#@15px;@#@.mainfloat:
@#@left;@#@width:
@#@70%;@#@margin-right:
@#@3%;@#@margin-left:
@#@3%;@#@.footerclear:
@#@left;@#@/*startsthefooterbelowthefloatedcontent*/padding:
@#@15px;@#@background:
@#@#66612ReadingassignmentChapter2Chapter3Chapter4Chapter5(5.1-5.6)Chapter6*Chapter7(7.1-7.7)13Homework4enhanceyoursiteslayoutAtleast7pagesPropernavigationUsetablesand/orCSStolayoutthesiteproperly.Useatleastoneexternalstylesheetforthewholesite(atleast3classand/oridstyles).14ObjectivesTellthedifferencebetweendatatablesandlayouttables.CreateHTMLtablesusing,.Usetheattributesproperly:
@#@rowspan,colspan,align,valign,cellspacing,cellpadding,width,height.UsetablelayoutandCSSlayoutproperly.15Thatsallforthischapter!
@#@16
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 中的 表格 布局 英文