A table is a representation of data arranged in rows and columns. Really, it's more like a spreadsheet. In HTML, with the help of tables, you ...
Search
Submityoursearchquery
Forum
Donate
HillaryNyakundi
Whenyou'rebuildingaprojectthatneedstorepresentdatavisually,youwillneedagoodwaytodisplaytheinformationsoit'seasytoreadandunderstand.
Now,dependingonthetypeofdata,youcanselectbetweendifferentrepresentationmethodsusingHTMLelements.
Inmostcases,tablesaremoreconvenienttodisplaylargeamountsofstructureddatanicely.That’swhy,inthisarticle,wearegoingtolearnhowtousetablesinHTMLandthenhowtostylethem.
But,firstthingsfirst–whatisatableinHTML?
WhatisaTableinHTML?
Atableisarepresentationofdataarrangedinrowsandcolumns.Really,it'smorelikeaspreadsheet.InHTML,withthehelpoftables,youcanarrangedatalikeimages,text,linksandsoonintorowsandcolumnsofcells.
TheuseoftablesinthewebhasbecomemorepopularrecentlybecauseoftheamazingHTMLtabletagsthatmakeiteasiertocreateanddesignthem.
TocreateatableinHTMLyouwillneedtousetags.Themostimportantoneisthe
tagwhichisthemaincontainerofthetable.Itshowswherethetablewillbeginandwhereitends.
CommonHTMLTabletags
Othertagsinclude:
tr>-representsrows
| -usedtocreatedatacells
|
-usedtoaddtableheadings
-usedtoinsertcaptions
-addsaseparateheadertothetable
|
-showsthemainbodyofthetable
-createsaseparatefooterforthetable
HTMLTableSyntax:
| Cell1 |
Cell2 |
Cell3 |
| Cell4 |
Cell5 |
Cell6 |
Cell1
Cell2
Cell3
Cell4
Cell5
Cell6
NowthatyouhaveanunderstandingofwhatanHTMLtableisallaboutandhowyoucancreateit,let'sgoaheadandseehowwecanmakeuseofthesetagstocreatetableswithmorefeatures.
HowtoAddaTableHeadinginHTML
Theisusedtoaddheadingstotables.Inbasicdesignsthetableheadingwillalwaystakethetoprow,meaningwewillhavethe |
declaredinourfirsttablerowfollowedbytheactualdatainthetable.BydefaultthetextpassedintheHeadingiscenteredandBold.
Anexamplewithuseof |
FirstName
LastName
EmailAddress
Hillary
Nyakundi
[email protected]
Lary
Mak
[email protected]
Fromtheexampleabove,weareabletotellwhatcolumncontainswhichinformation.Thisismadepossiblewiththeuseof |
tag.
HowtoAddaCaptiontoaTable
Themainuseofaddingacaptiontotableistoprovideadescriptionaboutthedatarepresentedinthetable.Thecaptioncaneitherbeplacedatthetopofthetableorthebottomandbydefaultitwillalwaysbecentered.
Toinsertacaptionintoatable,usethetag.
CaptionSyntax
Anexamplewithuseof
FreeCodingResources
| Sites |
YoutubeChannels |
MobileAppss |
| FreecodeCamp |
FreecodeCamp |
Enki |
| W3Schools |
Academind |
ProgrammingHero |
| KhanAcademy |
TheCodingTrain |
Sololearn |
FreeCodingResources
Sites
YoutubeChannels
MobileAppss
FreecodeCamp
FreecodeCamp
Enki
W3Schools
Academind
ProgrammingHero
KhanAcademy
TheCodingTrain
Sololearn
HowtoUsetheScopeAttributeinHTMLTables
Thescopeattributeisusedtodefinewhetheraspecificheaderisintendedforeitheracolumn,row,oragroupofboth.Iknowthedefinitionmightbechallengingtounderstandbutholdon–withthehelpofanexampleyouwillbetterunderstandit.
Themainpurposeofthescopeelementistoshowthetargetdatasothattheuserdoesnothavetorelyonassumptions.Theattributeisdeclaredintheheadercell,andittakesthevaluescol,row,colgroupandrowgroup.
Thevaluescolandrowindicatedthattheheadercellisprovidinginforamationforeithertherowsorcolumnsrespectively.
ScopeSyntax
|
Semester
Grade
| 1 |
Jan-April |
Credit |
| 2 |
May-August |
Pass |
| 2 |
September-December |
Distinction |
Semester
Grade
1
Jan-April
Credit
2
May-August
Pass
2
September-December
Distinction
Whatthescopeattributehasdone,isthatitshowswhetheraheadercellbelongstoeitherthecolumn,row,oragroupofboth.
Inthiscasetheheadersbelongtothecolumnbecauseit'swhatwesetinthecode.Youcanplayaroundbychangingtheattributetoseethedifferentbehaviors.
HowtoUseCellSpanninginanHTMLTable
Perhapsyouhavecomeacrosscellsthatstretchacrosstwoormorecolumnsorrowsinatable.That'scalledcellspanning.
IfyouworkedinprogramslikeMSofficeorExcelyouhaveprobablyusedthefunctionbyhighlightingthecellsandclickingthecommand,andvoilà!Youhaveit.
ThesamefeaturescanbeappliedinanHTMLtablebyusingtwocellattributes,colspanforhorizontalspanningandrowspanforverticalspanning.Thetwoattributesareassignednumbersgreaterthatzerowhichshowsthenumberofcellsyouwishtospan.
AnExamplewithuseofspan
| Name |
Subject |
Marks |
Hillary
| AdvancedWeb |
75 |
| OperatingSyatem |
60 |
Lary
| AdvancedWeb |
80 |
| OperatingSyatem |
75 |
|
TotalAverage:72.5
Name
Subject
Marks
Hillary
AdvancedWeb
75
OperatingSyatem
60
Lary
AdvancedWeb
80
OperatingSyatem
75
TotalAverage:72.5
Intheexampleabove,wehaveacellspanningof2cellsintherowsand3cellsinthecolumnasindicated.Wehavemanagedtoapplythespanbothverticallyandhorizontally.
Whenusingtheattributescolspanandrowspan,makesuretodeclarethevaluesassignedcorrecltytoavoidoverlappingofcells.
HowtoAddaTableHeader,Body,&FooterinHTMLTables
Justlikehowawebsiteoranyotherdocumenthasthreemainsections–theheader,body,andfooter–sodoesatable.
Inatabletheyaredividedbyusingattributesnamely:
-providesaseparatehaederforthetable
|
|
-conatinsmaincontentofthetable
-createsaseparetefooterforthetable
AnExamplewithuseof,
&
October
November
| Sales |
Profit |
Sales |
Profit |
| $200,00 |
$50,00 |
$300,000 |
$70,000 |
Novemberwasmoreprodustive
October
November
Sales
Profit
Sales
Profit
$200,00
$50,00
$300,000
$70,000
Novemberwasmoreprodustive
Intheaboveexample,theheaderisrepresentedbythenameofthemonths,thepartwiththefiguresofbothsalesandprofitrepresentsthetablebody,andfinallythepartwiththestatementrepresentsthefooterofourtable.
Anotherimportantthingtonoteisthatatablecanhavemorethanonebodypart.Inascenariolikethiseachbodygroupstherowsthatarerelatedtogether.
HowtoStyleHTMLTablesusingCSS
Eventhoughtablesarewidelyusedtoday,itisveryraretofindonethathasnotbeenstyled.Mostofthemusedifferentformsofstyles,whetherthat'scolors,fonts,highlightingimportantvaluesandsoon.
Stylinghelpsmakethetablesappearproffesionalandappealingtotheeyes.Afterallyouwouldn'twantyourreadertostareatdatadividedbyonlyasinleline.
Unlikestylingwithotherlanguagesortools,inHTMLyouwillneedtogetanextrafilewitha.cssextensioncreatedwhereyouwilladdyourstylesandlinkittoyourHTMLfile.
Below,attachedisacodeplaygroundwithanexampleofastyledtable.Feelfreetoplayaroundwithittoseehowdifferentstylingwillaffectthedisplay.
Thecodeplaygroundabove,wehavecreatedatableandstyleditusingsomeoftheattributeswecoveredinthearticle.
WestyleditusingaCSSfile,wherewehaveaddedthecolorandbordertoourtabletomakeitmorereadableandbeautiful.Thetablealsohasafixedheadersoyoucanscrollthroughthelargeamountofdataandstillseetheheaderofaparticularcolumn.
So,wehaveseenwhatatableis,we'vecreatedafewofthem,andevengoneastepaheadandappliedstyling.
Buthavingtheknowledgeandnotknowinghowtoapplyitwon'tbeofanyhelp.Sothatbeingsaid,whereorwhendoyouneedtomakeuseoftablesinyourdesign?
WhentoUseaTable
Therearemanysituationswheretablesmightcomeinhandywhendevelopingyourprojects:
YoucanusetableswhenyouwanttocompareandcontrastdatawithsharedcharacteristicslikethedifferencesbetweenAandBorscoresofteamXtothoseofY.
Youcanalsouseoneifyouwanttogiveanoverviewofnumericaldata.AgoodexampleofthisiswhenyouaretryingtorepresentmarksofstudentsoreventhescoresofteamsliketheEPLtable.
Andatablecanhelpreadersquicklyfindspecificinformationlaidoutinaclearway.Forexampleifyouaregoingthroughalonglistofnameatablecanbeusedtosubdevidethelistwhichmakeiteasyforreaders.
WrapUp
Tablesareagreatwaytorepresenttabulardata,andyoucancreatethemusingbasicHTMLelementslike,,| .
AndyoucanalsoaddsomestylingtomakethemlookgoodandpresentthedataclearlywiththehelpofaCSSfile.
Beforewewrapup,let'sdoonemoretask:
Createatableusingwhatwelearnedtosummarizewhatwehavecoveredinthearticletoday.Afterthatcompareyourdesignwithmypinnedcodeplaygroundbelow:
HillaryNyakundi
GrowingDeveloper||Python&Open-Source❤||TechEnthusiasts&Writer✍"EverydayisalearningDay"
Ifyoureadthisfar,tweettotheauthortoshowthemyoucare.Tweetathanks
Learntocodeforfree.freeCodeCamp'sopensourcecurriculumhashelpedmorethan40,000peoplegetjobsasdevelopers.Getstarted
|
