Tải bản đầy đủ - 0 (trang)
Chapter 8. Working with Tables, Borders, and Backgrounds

Chapter 8. Working with Tables, Borders, and Backgrounds

Tải bản đầy đủ - 0trang

CreatingListingswithMultipleSections

We'llstartbyusingtablestodivideyourlistingintomultiple

sections.AsyoulearnedinChapter1,"TheGood,theBad,and

theUgly:Do'sandDon'tsforEffectiveAuctionListings,"your

listingcan(andshould)containanumberofdiscretesections,

eachdevotedtoaparticulartypeofinformationtheitemtitle,

subtitle,overviewparagraph,textdescription,andtermsofsale

(TOS).Thefollowingtemplates,then,usetablerowsand

columnstoarrangethesesectionsinanorderlyfashion.



Template8.1.SeparateTitle,Picture,

Description,andTOSSections



Ourfirsttemplatebreaksyourlistingintofourdiscretesections,

oneabovetheothertitle,pictures,description,andTOS,as

showninFigure8.1.Thisrequiresthecreationofatablewith

fourrows,onecolumnperrow.



Figure8.1.Fourstackedsectionsdefinedbyfour

tablerows.



[Viewfullsizeimage]



Thecodeforthistableisrelativelysimple.We'vedefinedthe

widthofthetabletobe80%oftheavailablepagewidth;the

heightofeachrowwillvarydependingonthecontentyou

insert.Toemphasizethetabulargridofthisdesign,we've

specifiedathinborderforthetable,usingthedefaultpage

colors.Thebordersurroundsnotonlytheoutsideofthetable,

butalsoeachofthetable'scells.Youcanaddadditional

picturesbyincludingmoretagsinthesecondrow.

Here'sthecode:


cellpadding="10">






font-weight:bold">Title






















font-family:Arial">

Descriptionparagraphone




font-family:Arial">

Descriptionparagraphtwo












font-family:Arial">

TermsofSale


Termsofservice











Template8.2.SeparateDescription,Payment,



andShippingSections



ThisnexttemplatefollowsthesamebasicdesignasTemplate

8.1,butseparatesthegeneraltermsofserviceintoseparate

paymentandshippingsections.AsyoucanseeinFigure8.2,

what'suniqueaboutthisisthatwetakethatfinalrowand

divideitintotwoequalcolumnsoneeachforpaymentand

shipping.Soyouendupwithatablewheresomerowshave

justonecell,andthelastrowhastwocells.



Figure8.2.Dividingthefinalrowofthetableinto

twocellsoneforpaymentinformation,onefor

shippinginformation.



[Viewfullsizeimage]



Youmightthinkthatthecodeforthistemplatewouldbe

identicaltothatofTemplate8.1,saveforthefinalrow,but

you'dbewrong.Ifyousimplyaddasecondcelltothefinalrow,

thecellsinallthepreviousrowsendupbeingassignedtothe

firstcolumnofthetableonly.Tomakethesingle-cellrowsspan

theentirewidthofthetable,youhavetoaddcolspan="2"

attributestoeachtag.Here'showthenewcodelooks:


cellpadding="10">






font-weight:bold">

Title
























font-family:Arial">

Descriptionparagraphone




font-family:Arial">

Descriptionparagraphtwo












font-family:Arial">

PaymentInformation


Paymentterms








font-family:Arial">

ShippingInformation


Shippingterms











CreatingMultiple-ColumnListings

Nowthatyou'vegottenatasteforworkingwithmultiple

columnsinpartoftheitemlisting,let'susethatsameapproach

todividetheentirelistingintomultiplecolumns.



Template8.3.TwoEqualColumnswithCentered

TitleandTOS



Inthistemplate,we'vesimplysplitthelistingintotwovertical

halves,asshowninFigure8.3.Eachhalfhasamixoftextand

pictures,alternatingoneandtheother.ThetitleandTOSspan

bothcolumns,atthetopandthebottomofthelisting,

respectively.



Figure8.3.Usingtwocolumnstopositiontext

andpicturesona2x2gridinthemiddleofthe

listing.



[Viewfullsizeimage]



Technically,whatwe'redealingwithhereisatablewithfour

rowsandtwocolumns.Thefirstandlastrow(titleandTOS)

spanacrossthetwocolumns;thetwomiddlerowsareboth

dividedintwo.Thetwomiddlerowsforma2x2grid,andare

settoalignthetextatthetopofeachrow(viathevalign="top"

attribute).Forthisexample,we'vedoneawaywiththetable

borders,foracleanerlook.








font-weight:bold">

Title














font-family:Arial">

Descriptionparagraphone
























font-family:Arial">

Descriptionparagraphtwo












font-family:Arial">

TermsofSale


Termsofservice













Template8.4.WideLeftColumn,NarrowRight

Column



Nowwe'lldosomethingalittledifferent.Thedesignshownin

Figure8.4issimilartoTemplate8.3,exceptwe'vemadethe

leftcolumnwiderthantherightcolumn.Thisletsusputthe

maindescriptivetextandpicturesinthebigleftcolumn,while

reservingthenarrowerrightcolumnforbulleteditemdetails.



Figure8.4.Descriptivetextparagraphsinthe

wideleftcolumn,shorttextbulletsinthenarrow

rightcolumn.



[Viewfullsizeimage]



Thekeytothisapproachistodefinethewidthoftheleft

columnas75%ofthetotaltablewidthinthetag,andthen

definethewidthoftherightcolumnas25%ofthetablewidth.

That'sagoodratio;sincetherightcolumncontainsshorttext

bullets,itdoesn'thavetobeanywiderthanthat.(We'vealso

turnedbackonthetableborders;youcanturnthemoffby

deletingtheborderattributeinthetag.)


border="1">






font-weight:bold">

Title





Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 8. Working with Tables, Borders, and Backgrounds

Tải bản đầy đủ ngay(0 tr)

×