网页制作中的表格与布局英文版优质PPT.ppt

网页制作中的表格与布局英文版优质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