Table Code Sample: Complex Table
SkiptocontentHTML / HTMLTables:FindOutWhenToUseThem(AndWhenToAvoid)Disclosure:Yoursupporthelpskeepthesiterunning!Weearnareferralfeeforsomeoftheserviceswerecommendonthispage.LearnmoreTablesareusedinHTMLdocuments(webpages)topresenttabulardata.Contents1UsingTables2TableCodeSample:SimpleTable3TableCodeSample:ComplexTable4AboutTable-BasedLayout5RelatedElements6TutorialsandResourcesUsingTablesAtableisdefinedusingthe
element,andcontainsanumberoftablecells(| ,for“tabledata”)whichareorganizedintotablerows( |
).Themarkup(HTMLcode)foratableisalwaysbasedonrows,nevercolumns.Tablecellswhichactascolumnheadersorrowheadersshouldusethe| (tableheader)element.Tablecellscanbemergedusingthecolspanandrowspanattributes.Tablescanbebrokenintosectionsusingthefollowingelements:—Tableheader
|
—Tablebody
—TablefooterAcaptioncanbeaddedtoatableusingtheelement.Youcanuse
andtodefinetablecolumnsforstyling.However,thereareanumberoflimitationswiththispractice.TableCodeSample:SimpleTable
| Name |
FavoriteColor |
| Bob |
Yellow |
| Michelle |
Purple |
NameFavoriteColorBobYellowMichellePurpleTableCodeSample:ComplexTable
Acomplextable
Invoice#123456789
| 14January2025
|
Payto:
AcmeBillingCo.
123MainSt.
Cityville,NA12345
Customer:
JohnSmith
321WillowWay
SoutheastNorthwestershire,MA54321
| Name/Description |
Qty. |
@ |
Cost |
| Paperclips |
1000 |
0.01 |
10.00 |
| Staples(box) |
100 |
1.00 |
100.00 |
Subtotal
| 110.00 |
Tax
| 8% |
8.80 |
GrandTotal
| $118.80 |
AcomplextableInvoice#12345678914January2025Payto:AcmeBillingCo.123MainSt.Cityville,NA12345Customer:JohnSmith321WillowWaySoutheastNorthwestershire,MA54321Name/[email protected](box)1001.00100.00Subtotal110.00Tax8%8.80GrandTotal$118.80AboutTable-BasedLayoutItwascommonintheearlydaysofthewebtousetablesasalayoutdevice.Beforetheadventofmodernstandards-basedbrowsers,thiswastheeasiestwaytomakesurethatpageelementswerearrangedproperlyonthescreen.Thisdesignpatternisnowconsideredverybad.Itisbadfortheuserexperience,badforSEO,andbadfordeveloperswhohavetomaintainpages.Youshouldnotusetable-basedlayoutunderanycircumstances.Instead,checkoutourCSSTutorialstostartlearningaboutmodernwebsitelayout.However,thatdoesn’tmeanyoushouldavoidtables—tablesshouldbeusedwheneveryouneedtopresentinformationinatabularformat.AdamWoodAdamisatechnicalwriterwhospecializesindeveloperdocumentationandtutorials.RelatedElementsElementNameAttributesNotes
HTMLTagTheelementidentifiesoneormoreelementsascontainingsummarycontentsofatable'scolumns.The
elementmustbethedirectdescendantofaelement.InHTML5,canbeplacedeitherbeforeorafter
andelements,butmustappearafterany,
,and
elements.
HTMLTagThe
elementmustbeadirectdescendantofaelementandisusedtoidentifyelementsthatcomprisethebodyofthetable.The
elementshouldalwayscomeafteraelementandmaycomebeforeoraftera
element.CodeExampleForTrInHTML(ToOrganizeTableRows)HTMLFormCodeForBeginners(AndWhenToUseIt)TrBgcolorIsObsolete:Here'sHowToSetTableRowBackgroundColorNowTheelementisusedtogrouptogether| or |
valuesintoasinglerowoftableheadingordatavalues.The |
elementmaybeadirectchildofaelementornestedwithinaparent,
,or
element.HTMLTagTheelementisusedtoidentifyoneormorerowsofatablethatcontaincolumnlabelsratherthantabledata.captionalignvalignTheelementisusedtoaddacaptiontoanHTMLtable.AmustappearinanHTMLdocumentasthefirstdescendantofaparent,butitmaybepositionedvisuallyatthebottomofthetablewithCSS.colspanalignwidthbgcolorTheelement,typicallyimplementedasachildelementofaparent,canbeusedtotargetacolumninanHTMLtable.colgroupspanalignwdithThe
elementisusedaparentcontainerforoneormoreelementswhichareusedtotargetcolumnsinanHTMLtable.TutorialsandResourcesEasyTutorialForCreatingHTMLTablesThatAddValueToPagesCSSStylingTutorialToCleanUpYourHTMLTablesTodaySearchHTML.comSearchfor:MostPopularHTMLTag1,252views977views742viewsImgHeightInHTML:HowNotToUseTheHeightAttribute583viewsInputPattern:UseItToAddBasicDataValidationInHTML5520viewsWeusecookiestoensurethatwegiveyouthebestexperienceonourwebsite.Ifyoucontinuetousethissitewewillassumethatyouarehappywithit.Ok
