HTML - Tables - Tutorialspoint

文章推薦指數: 80 %
投票人數:10人

HTML - Tables · Example · Table Heading · Cellpadding and Cellspacing Attributes · Colspan and Rowspan Attributes · Tables Backgrounds · Table Height and Width · Table ... Home CodingGround Jobs Whiteboard Tools Business Teachwithus HTMLTutorial HTML-Home HTML-Overview HTML-BasicTags HTML-Elements HTML-Attributes HTML-Formatting HTML-PhraseTags HTML-MetaTags HTML-Comments HTML-Images HTML-Tables HTML-Lists HTML-TextLinks HTML-ImageLinks HTML-EmailLinks HTML-Frames HTML-Iframes HTML-Blocks HTML-Backgrounds HTML-Colors HTML-Fonts HTML-Forms HTML-EmbedMultimedia HTML-Marquees HTML-Header HTML-StyleSheet HTML-Javascript HTML-Layouts HTMLReferences HTML-TagsReference HTML-AttributesReference HTML-EventsReference HTML-FontsReference HTML-ASCIICodes ASCIITableLookup HTML-ColorNames HTML-Entities HTML-FontsRef HTML-EventsRef MIMEMediaTypes HTML-URLEncoding LanguageISOCodes HTML-CharacterEncodings HTML-DeprecatedTags HTMLResources HTML-QuickGuide HTML-UsefulResources HTML-ColorCodeBuilder HTML-Discussion HTML-OnlineEditor SelectedReading UPSCIASExamsNotes Developer'sBestPractices QuestionsandAnswers EffectiveResumeWriting HRInterviewQuestions ComputerGlossary WhoisWho HTML-Tables Advertisements PreviousPage NextPage  TheHTMLtablesallowwebauthorstoarrangedataliketext,images,links,othertables,etc.intorowsandcolumnsofcells. TheHTMLtablesarecreatedusingthe

taginwhichthetagisusedtocreatetablerowsand
tagisusedtocreatedatacells.Theelementsunder areregularandleftalignedbydefault Example LiveDemo HTMLTables
Row1,Column1 Row1,Column2
Row2,Column1 Row2,Column2
Thiswillproducethefollowingresult− Here,theborderisanattributeoftaganditisusedtoputaborderacrossallthecells.Ifyoudonotneedaborder,thenyoucanuseborder="0". TableHeading Tableheadingcanbedefinedusing
tag.Thistagwillbeputtoreplace tag,whichisusedtorepresentactualdatacell.Normallyyouwillputyourtoprowastableheadingasshownbelow,otherwiseyoucanuse elementinanyrow.Headings,whicharedefinedin tagarecenteredandboldbydefault. Example LiveDemo HTMLTableHeader
Name Salary
RameshRaman 5000
ShabbirHussein 7000
Thiswillproducethefollowingresult− CellpaddingandCellspacingAttributes Therearetwoattributescalledcellpaddingandcellspacingwhichyouwillusetoadjustthewhitespaceinyourtablecells.Thecellspacingattributedefinesspacebetweentablecells,whilecellpaddingrepresentsthedistancebetweencellbordersandthecontentwithinacell. Example LiveDemo HTMLTableCellpadding Name Salary RameshRaman 5000 ShabbirHussein 7000 Thiswillproducethefollowingresult− ColspanandRowspanAttributes Youwillusecolspanattributeifyouwanttomergetwoormorecolumnsintoasinglecolumn.Similarwayyouwilluserowspanifyouwanttomergetwoormorerows. Example LiveDemo HTMLTableColspan/Rowspan Column1 Column2 Column3 Row1Cell1 Row1Cell2 Row1Cell3 Row2Cell2 Row2Cell3 Row3Cell1 Thiswillproducethefollowingresult− TablesBackgrounds Youcansettablebackgroundusingoneofthefollowingtwoways− bgcolorattribute−Youcansetbackgroundcolorforwholetableorjustforonecell. backgroundattribute−Youcansetbackgroundimageforwholetableorjustforonecell. Youcanalsosetbordercoloralsousingbordercolorattribute. Note−Thebgcolor,background,andbordercolorattributesdeprecatedinHTML5.Donotusetheseattributes. Example LiveDemo HTMLTableBackground Column1 Column2 Column3 Row1Cell1 Row1Cell2 Row1Cell3 Row2Cell2 Row2Cell3 Row3Cell1 Thiswillproducethefollowingresult− Hereisanexampleofusingbackgroundattribute.Herewewilluseanimageavailablein/imagesdirectory. LiveDemo HTMLTableBackground Column1 Column2 Column3 Row1Cell1 Row1Cell2 Row1Cell3 Row2Cell2 Row2Cell3 Row3Cell1 Thiswillproducethefollowingresult.Herebackgroundimagedidnotapplytotable'sheader. TableHeightandWidth Youcansetatablewidthandheightusingwidthandheightattributes.Youcanspecifytablewidthorheightintermsofpixelsorintermsofpercentageofavailablescreenarea. Example LiveDemo HTMLTableWidth/Height Row1,Column1 Row1,Column2 Row2,Column1 Row2,Column2 Thiswillproducethefollowingresult− TableCaption Thecaptiontagwillserveasatitleorexplanationforthetableanditshowsupatthetopofthetable.ThistagisdeprecatedinnewerversionofHTML/XHTML. Example LiveDemo HTMLTableCaption Thisisthecaption row1,column1 row1,columnn2 row2,column1 row2,columnn2 Thiswillproducethefollowingresult− TableHeader,Body,andFooter Tablescanbedividedintothreeportions−aheader,abody,andafoot.Theheadandfootarerathersimilartoheadersandfootersinaword-processeddocumentthatremainthesameforeverypage,whilethebodyisthemaincontentholderofthetable. Thethreeelementsforseparatingthehead,body,andfootofatableare− −tocreateaseparatetableheader. −toindicatethemainbodyofthetable. −tocreateaseparatetablefooter. Atablemaycontainseveral elementstoindicatedifferentpagesorgroupsofdata.Butitisnotablethatand tagsshouldappearbefore Example LiveDemo HTMLTable Thisistheheadofthetable Thisisthefootofthetable Cell1 Cell2 Cell3 Cell4 Thiswillproducethefollowingresult− NestedTables Youcanuseonetableinsideanothertable.Notonlytablesyoucanusealmostallthetagsinsidetabledatatag. Example Followingistheexampleofusinganothertableandothertagsinsideatablecell. LiveDemo HTMLTable Name Salary RameshRaman 5000 ShabbirHussein 7000 Thiswillproducethefollowingresult− PreviousPage PrintPage NextPage  Advertisements


請為這篇文章評分?