HTML Tables: Find Out When To Use Them (And When To ...

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

Table Code Sample: Complex Table SkiptocontentHTML  /  HTMLTables:FindOutWhenToUseThem(AndWhenToAvoid)Disclosure:Yoursupporthelpskeepthesiterunning!Weearnareferralfeeforsomeoftheserviceswerecommendonthispage.LearnmoreTablesareusedinHTMLdocuments(webpages)topresenttabulardata.Contents1UsingTables2TableCodeSample:SimpleTable3TableCodeSample:ComplexTable4AboutTable-BasedLayout5RelatedElements6TutorialsandResourcesUsingTablesAtableisdefinedusingthe

element,andcontainsanumberoftablecells().Themarkup(HTMLcode)foratableisalwaysbasedonrows,nevercolumns.Tablecellswhichactascolumnheadersorrowheadersshouldusethe—Tableheader—Tablebody—TablefooterAcaptioncanbeaddedtoatableusingtheandtodefinetablecolumnsforstyling.However,thereareanumberoflimitationswiththispractice.TableCodeSample:SimpleTable
,for“tabledata”)whichareorganizedintotablerows(
(tableheader)element.Tablecellscanbemergedusingthecolspanandrowspanattributes.Tablescanbebrokenintosectionsusingthefollowingelements:
element.Youcanuse
Name FavoriteColor
Bob Yellow
Michelle Purple
NameFavoriteColorBobYellowMichellePurpleTableCodeSample:ComplexTableInvoice#123456789 Payto:
AcmeBillingCo.
123MainSt.
Cityville,NA12345 Customer:
JohnSmith
321WillowWay
SoutheastNorthwestershire,MA54321
Subtotal Tax GrandTotal
Acomplextable
14January2025
Name/Description Qty. @ Cost
Paperclips 1000 0.01 10.00
Staples(box) 100 1.00 100.00
110.00
8% 8.80
$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,canbeplacedeitherbeforeorafterandelements,butmustappearafterany,andelements.HTMLTagTheelementmustbeadirectdescendantofa
,
elementandisusedtoidentifyelementsthatcomprisethebodyofthetable.Theelementshouldalwayscomeafteraelementandmaycomebeforeorafteraelement.CodeExampleForTrInHTML(ToOrganizeTableRows)HTMLFormCodeForBeginners(AndWhenToUseIt)TrBgcolorIsObsolete:Here'sHowToSetTableRowBackgroundColorNowTheelementisusedtogrouptogetherelementmaybeadirectchildofa
or valuesintoasinglerowoftableheadingordatavalues.The
elementornestedwithinaparent,,orelement.HTMLTagTheelementisusedtoidentifyoneormorerowsofatablethatcontaincolumnlabelsratherthantabledata.captionalignvalignThe
elementisusedtoaddacaptiontoanHTMLtable.AmustappearinanHTMLdocumentasthefirstdescendantofaparent,butitmaybepositionedvisuallyatthebottomofthetablewithCSS.colspanalignwidthbgcolorTheelement,typicallyimplementedasachildelementofaparent,canbeusedtotargetacolumninanHTMLtable.colgroupspanalignwdithTheelementisusedaparentcontainerforoneormoreelementswhichareusedtotargetcolumnsinanHTMLtable.TutorialsandResourcesEasyTutorialForCreatingHTMLTablesThatAddValueToPagesCSSStylingTutorialToCleanUpYourHTMLTablesTodaySearchHTML.comSearchfor:MostPopularHTMLTag1,252views977views742viewsImgHeightInHTML:HowNotToUseTheHeightAttribute583viewsInputPattern:UseItToAddBasicDataValidationInHTML5520viewsWeusecookiestoensurethatwegiveyouthebestexperienceonourwebsite.Ifyoucontinuetousethissitewewillassumethatyouarehappywithit.Ok


請為這篇文章評分?