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,theborderisanattributeof
taganditisusedtoputaborderacrossallthecells.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
|
