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

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.