HTML table alignHTML table center

HTML Table - javatpoint

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

HTML Table Example ·

· · ·  ... ⇧SCROLLTOTOP Home HTML XHTML CSS JavaScript Bootstrap jQuery PHP XML JSON Python C++ Java C# SQL InterviewQ HTMLTutorial IntroductiontoHTML WhatisHTML HTMLTextEditors HTMLBuildingBlocks HTMLtags HTMLAttributes HTMLElements HTMLFormatting HTMLHeading HTMLParagraph HTMLPhraseTags HTMLAnchor HTMLImage HTMLTable HTMLLists HTMLOrderedList HTMLUnorderedList HTMLDescriptionList HTMLForm HTMLFormInput HTMLFormAttribute HTMLwithCSS HTMLClasses HTMLId HTMLIframes HTMLJavaScript HTMLComments HTMLFilePath HTMLHead HTMLLayout HTMLLayoutTechniques HTMLResponsive HTMLComputercode HTMLEntities HTMLSymbols HTMLCharset HTMLURLEncode HTMLAttributes HTMLGlobalAttributes HTMLEventAttributes HTMLTagsList HTMLTagsList HTML5Tags HTMLTag HTMLTag HTMLTag HTMLTag HTML
Tag HTMLTag HTMLTag HTML
Tag HTML
Tag HTMLTag HTMLTag HTMLTag HTML
Tag HTMLTag HTML
Tag HTMLTag HTMLTag HTMLTag HTML
Tag HTML
Tag HTML
Tag HTMLTag HTMLTag HTML
Tag HTML
Tag HTML
Tag HTMLTag HTML
Tag HTML
Tag HTMLTag HTMLTag HTML

toTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTMLTag HTML<section>Tag HTML<select>Tag HTML<small>Tag HTML<source>Tag HTML<span>Tag HTML<strike>Tag HTML<strong>Tag HTML<style>Tag HTML<sub>Tag HTML<summary>Tag HTML<sup>Tag HTML<svg>Tag HTML<table>Tag HTML<tbody>Tag HTML<td>Tag HTML<template>Tag HTML<textarea>Tag HTML<tfoot>Tag HTML<th>Tag HTML<thead>Tag HTML<time>Tag HTML<title>Tag HTML<tr>Tag HTML<track>Tag HTML<tt>Tag HTML<u>Tag HTML<ul>Tag HTML<var>Tag HTML<video>Tag HTML<wbr>Tag HTML5Advance HTML5tutorial HTML5UserManual HTML5Tags HTML5NewElements HTMLEventAttributes HTMLGoogleMaps HTML5Semantics HTML5Migration HTMLAudio HTMLVideo HTMLSVG HTMLCanvas HTMLAPI HTMLDrag&Drop HTMLGeolocation HTMLWebStorage HTMLWebWorkers HTMLSSEvent HTMLColorNames HTMLColorNames HTMLMisc HTMLButtononClick HTMLCheckboxTag HTMLcodeTag HTMLfavicon HTMLLoginForm HTMLRadioTag HTMLRegistrationForm HTMLRequiredAttribute HTMLSpaceCode HTMLTextTag HTMLBackground-color HTMLDate HTMLFormAction HTMLIdAttribute HTMLListBox AddJavaScripttoHTML HTMLBackgroundImage HTMLButtonType HTMLHideElement HTMLResetButton HTMLSearchBox HTMLSelectedAttribute SimpleHTMLPages CreateHTMLPage HTMLButtonDisabled HTMLFontColor HTMLFontSize HTMLImageButton HTMLNestedTable WhatDoesHTMLStandFor HowtoInsertImageinHTML HowtoChangeFontinHTML HowtoChangeTextColorinHtml HowtoChangeBackgroundColorinHtml HowtoCommentinHtml HowtoLinkCSStoHtml HowtoaddBackgroundImageinHtml HowtoConvertHtmltoPDF HowtoaddLinkinHtml HowtoMakeaTableinHtml HowtoChangeFontSizeinHtml HowtomakeaButtoninHtml HowtoAddaFaviconinHtml HowtoChangeImageSizeinHtml HowtoaligntextinHtml HowtoalignimageinHtml HowtoaddVideoinHtml HowtoChangeLinkcolorinHtml HowtomakeanImageaLinkinHtml HowtoaddSpaceinHtml HowtoEmbedYoutubeVideoinHtml HowtoaddaLineinHtml HowtoMakeaDropdownMenuinHtml HowtocallaJavaScriptFunctioninHtml HowtoCreateaForminHtml HowtomakeaListinHtml HowtoRotateImageinHtml HowtoaddjQuerytoHtml HowtoMoveImageinHtml HowtoCreateTextBoxinHtml HowtomoveaTextinHtml Whatdoesbrmeaninhtml HowtoaddborderinHtml WhatdoesDivmeaninHtml HowtoWraptextinHtml WhatdoesspandoinHtml HowtomakeaNavigationBarinHtml HowtousePHPinHtml HowtoHighlighttextinHtml WhatdoespmeaninHtml HowtoaddPaddinginHtml WhatdoesulmeaninHtml HowtoaddSocialMediaIconsinHtml HowtomakeaFooterinHtml HowtomakeaSearchbarinHtml HowtoWrapTextaroundanimageinHtml HTMLvsHTML5 HTMLCounter IntermediateExcelTest DownloadpdffileusingHTML PasswordhideinHTML HTMLCalculator HowtosorttabledatainHTMLusingJavaScript HTMLColorPicker HowtoincludeimageinHTML HTML5signaturepadtoimage hiddenvsaria-hiddenattributesinHTML HowtomutevideoinHTML HTMLvsASP HTML5Spellcheckattribute HTML5acceptattribute HTMLColorStyles HowtoaddaVerticalLineinHtml HowtocreateanEmailNewsletterusingHTMLandCSS HowtoalignaplaceholdertextinHTML HowtoCreateBrowsersWindowusingHTMLandCSS MCQ HTMLMCQ InterviewQuestions HTMLInterviewQuestions next→ ←prev HTMLTable HTMLtabletagisusedtodisplaydataintabularform(row*column).Therecanbemanycolumnsinarow. Wecancreateatabletodisplaydataintabularform,using<table>element,withthehelpof<tr>,<td>,and<th>elements. InEachtable,tablerowisdefinedby<tr>tag,tableheaderisdefinedby<th>,andtabledataisdefinedby<td>tags. HTMLtablesareusedtomanagethelayoutofthepagee.g.headersection,navigationbar,bodycontent,footersectionetc.Butitisrecommendedtousedivtagovertabletomanagethelayoutofthepage. HTMLTableTags TagDescription <table>Itdefinesatable. <tr>Itdefinesarowinatable. <th>Itdefinesaheadercellinatable. <td>Itdefinesacellinatable. <caption>Itdefinesthetablecaption. <colgroup>Itspecifiesagroupofoneormorecolumnsinatableforformatting. <col>Itisusedwith<colgroup>elementtospecifycolumnpropertiesforeach column. <tbody>Itisusedtogroupthebodycontentinatable. <thead>Itisusedtogrouptheheadercontentinatable. <tfooter>Itisusedtogroupthefootercontentinatable. HTMLTableExample Let'sseetheexampleofHTMLtabletag.Itoutputisshownabove. <table> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> TestitNow Output: First_NameLast_NameMarks SonooJaiswal60 JamesWilliam80 SwatiSironi82 ChetnaSingh72 Intheabovehtmltable,thereare5rowsand3columns=5*3=15values. HTMLTablewithBorder TherearetwowaystospecifyborderforHTMLtables. ByborderattributeoftableinHTML ByborderpropertyinCSS 1)HTMLBorderattribute YoucanuseborderattributeoftabletaginHTMLtospecifyborder.Butitisnotrecommendednow. <tableborder="1"> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table> TestitNow Output: First_NameLast_NameMarks SonooJaiswal60 JamesWilliam80 SwatiSironi82 ChetnaSingh72 2)CSSBorderproperty ItisnowrecommendedtouseborderpropertyofCSStospecifyborderintable. <style> table,th,td{ border:1pxsolidblack; } </style> TestitNow Youcancollapseallthebordersinoneborderbyborder-collapseproperty.Itwillcollapsetheborderintoone. <style> table,th,td{ border:2pxsolidblack; border-collapse:collapse; } </style> TestitNow Output: Name LastName Marks SonooJaiswal60 JamesWilliam80 SwatiSironi82 ChetnaSingh72 HTMLTablewithcellpadding Youcanspecifypaddingfortableheaderandtabledatabytwoways: BycellpaddingattributeoftableinHTML BypaddingpropertyinCSS ThecellpaddingattributeofHTMLtabletagisobseletenow.ItisrecommendedtouseCSS.Solet'sseethecodeofCSS. <style> table,th,td{ border:1pxsolidpink; border-collapse:collapse; } th,td{ padding:10px; } </style> TestitNow Output: Name LastName Marks SonooJaiswal60 JamesWilliam80 SwatiSironi82 ChetnaSingh72 HTMLTablewidth: WecanspecifytheHTMLtablewidthusingtheCSSwidthproperty.Itcanbespecifyinpixelsorpercentage. Wecanadjustourtablewidthasperourrequirement.Followingistheexampletodisplaytablewithwidth. table{ width:100%; } Example: <!DOCTYPEhtml> <html> <head> <title>table</title> <style> table{ border-collapse:collapse; width:100%; } th,td{ border:2pxsolidgreen; padding:15px; } </style> </head> <body> <table> <tr> <th>1header</th> <th>1header</th> <th>1header</th> </tr> <tr> <td>1data</td> <td>1data</td> <td>1data</td> </tr> <tr> <td>2data</td> <td>2data</td> <td>2data</td> </tr> <tr> <td>3data</td> <td>3data</td> <td>3data</td> </tr> </table> </body> </html> TestitNow Output: HTMLTablewithcolspan Ifyouwanttomakeacellspanmorethanonecolumn,youcanusethecolspanattribute. Itwilldivideonecell/rowintomultiplecolumns,andthenumberofcolumnsdependonthevalueofcolspanattribute. Let'sseetheexamplethatspantwocolumns. CSScode: <style> table,th,td{ border:1pxsolidblack; border-collapse:collapse; } th,td{ padding:5px; } </style> HTMLcode: <tablestyle="width:100%"> <tr> <th>Name</th> <thcolspan="2">MobileNo.</th> </tr> <tr> <td>AjeetMaurya</td> <td>7503520801</td> <td>9555879135</td> </tr> </table> TestitNow Output: Name MobileNo. AjeetMaurya 7503520801 9555879135 HTMLTablewithrowspan Ifyouwanttomakeacellspanmorethanonerow,youcanusetherowspanattribute. Itwilldivideacellintomultiplerows.Thenumberofdividedrowswilldependonrowspanvalues. Let'sseetheexamplethatspantworows. CSScode: <style> table,th,td{ border:1pxsolidblack; border-collapse:collapse; } th,td{ padding:10px; } </style> HTMLcode: <table> <tr><th>Name</th><td>AjeetMaurya</td></tr> <tr><throwspan="2">MobileNo.</th><td>7503520801</td></tr> <tr><td>9555879135</td></tr> </table> TestitNow Output: NameAjeetMaurya MobileNo.7503520801 9555879135 HTMLtablewithcaption HTMLcaptionisdiplayedabovethetable.Itmustbeusedaftertabletagonly. <table> <caption>StudentRecords</caption> <tr><th>First_Name</th><th>Last_Name</th><th>Marks</th></tr> <tr><td>Vimal</td><td>Jaiswal</td><td>70</td></tr> <tr><td>Mike</td><td>Warn</td><td>60</td></tr> <tr><td>Shane</td><td>Warn</td><td>42</td></tr> <tr><td>Jai</td><td>Malhotra</td><td>62</td></tr> </table> TestitNow StylingHTMLtableevenandoddcells CSScode: <style> table,th,td{ border:1pxsolidblack; border-collapse:collapse; } th,td{ padding:10px; } table#altertr:nth-child(even){ background-color:#eee; } table#altertr:nth-child(odd){ background-color:#fff; } table#alterth{ color:white; background-color:gray; } </style> TestitNow Output: NOTE:YoucanalsocreatevarioustypesoftablesusingdifferentCSSpropertiesinyourtable. SupportingBrowsers ElementChromeIEFirefoxOperaSafari <table>YesYesYesYesYes NextTopicHTMLtbodyTag ←prev next→ ForVideosJoinOurYoutubeChannel:JoinNow Feedback SendyourFeedbackto[email protected] HelpOthers,PleaseShare LearnLatestTutorials Splunk SPSS Swagger Transact-SQL Tumblr ReactJS Regex ReinforcementLearning RProgramming RxJS ReactNative PythonDesignPatterns PythonPillow PythonTurtle Keras Preparation Aptitude Reasoning VerbalAbility InterviewQuestions CompanyQuestions TrendingTechnologies ArtificialIntelligence AWS Selenium CloudComputing Hadoop ReactJS DataScience Angular7 Blockchain Git MachineLearning DevOps B.Tech/MCA DBMS DataStructures DAA OperatingSystem ComputerNetwork CompilerDesign ComputerOrganization DiscreteMathematics EthicalHacking ComputerGraphics SoftwareEngineering WebTechnology CyberSecurity Automata CProgramming C++ Java .Net Python Programs ControlSystem DataMining DataWarehouse JavatpointServicesJavaTpointofferstoomanyhighqualityservices.Mailuson[email protected],togetmoreinformationaboutgivenservices.WebsiteDesigningWebsiteDevelopmentJavaDevelopmentPHPDevelopmentWordPressGraphicDesigningLogoDigitalMarketingOnPageandOffPageSEOPPCContentDevelopmentCorporateTrainingClassroomandOnlineTrainingDataEntryTrainingForCollegeCampusJavaTpointofferscollegecampustrainingonCoreJava,AdvanceJava,.Net,Android,Hadoop,PHP,WebTechnologyandPython.Pleasemailyourrequirementat[email protected]Duration:1weekto2weekLike/Subscribeusforlatestupdatesornewsletter

First_Name Last_Name Marks
Sonoo Jaiswal 60
James
Tag HTML
Tag HTMLTag HTMLTag HTML

請為這篇文章評分？

延伸文章資訊