7/10/20

HTML TABLES :- Elements and Attributes


HTML TABLES 

In Html, table is used to represent data in tabular form. It is composed of columns and rows of cells that contain data in it.  To create a table in your Html document we have to use <table> tag in our document.

Table Elements in HTML 

  • <thead> :-  define a table header
  • <tbody> :- define a table body
  • <tfoot> :- define a table footer
  • <tr> :- define a table row
  • <th> :- define a table heading
  • <td> :- define a table data 

Table Attributes 


  • align:- define the alignment of a table
  • colspan:- define how many columns should a cell span have.
  • rowspan:- define how many rows should a cell span have.
  • Cellpadding:- defines the space between the content of the cell and its border
  • Cellspacing:-  It defines the space between two cells
  • Bgcolor:- It defines the background color of the cell. 
  • Border:- It defines the border of the cell. 

Let Us See through an example:- 

Creating a simple table:- 

<body>
    <table>
        <thead>
            <tr>
                <th> Name </th>
                <th> Roll No </th>
                <th> Age </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th> Ramesh </th>
                <th> 05 </th>
                <th> 18 </th>
            </tr>
            <tr>
                <th> Mahesh </th>
                <th> 06 </th>
                <th> 17 </th>
            </tr>
            <tr>
                <th> Rakesh </th>
                <th> 07 </th>
                <th> 15 </th>
            </tr>
        </tbody>
    </table>

Output:- 



Adding colgroup, width, background color, and border in an Html table.

Example:-

    <table style=" background-color : purple; 
   border:3px solid black; 
   width:50%" >
<colgroup>
<col style = "background-color: orange">
<col style = "background-color: yellow">
<col style = "background-color: green">
</colgroup>
        <thead>
            <tr>
                <th> Name </th>
                <th> Roll No </th>
                <th> Age </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th> Ramesh </th>
                <th> 05 </th>
                <th> 18 </th>
            </tr>
            <tr>
                <th> Mahesh </th>
                <th> 06 </th>
                <th> 17 </th>
            </tr>
            <tr>
                <th> Rakesh </th>
                <th> 07 </th>
                <th> 15 </th>
            </tr>
        </tbody>
    </table>

Output:- 


So that it for today guys. I hope you liked the article as well as Html Series. Thank you for your huge support. If you have any quarries related to this article comment below or DM on my social media.

Have a Good day.

Thanks for Visiting Here

PEOPLE ALSO READ:- HTML LIST :- Ordered List, Unordered List, Description List
PEOPLE ALSO READ:-  HTML IMAGES :- INSERT AN IMAGE IN HTML DOCUMENT

"+y+""}else{if(A==5){c+='
  • '+w+""+y+"
  • "}else{if(A==6){c+='
  • "+w+'
    '+u+""+y+"
  • "}else{c+='
  • "+w+"
  • "}}}}}s.innerHTML=c+=""+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]>

    0 comments:

    Post a Comment

    Like us on facebook

    blogger templatesblogger widgets

    Follow on Twitter

    Linkedin

    Categories

    Blog Archive

    Contact Form

    Name

    Email *

    Message *

    Mad About Computer. Powered by Blogger.
    This site is in no way affiliated with or endorsed by specified business. It exists as a compendium of supporting information intended for informational purposes only. If you want to buy this website, please don't hesitate to contact us via e-mail: domain (dot) sales (dot) org @ gmail (dot) com or you can find and buy it on Afternic domain auctions.