table attributes in html

💢 TABLE TAG </>ATTRIBUTES💢




In HTML, the <table> element is used to create a structured grid of data, commonly referred to as a table. Tables are composed of rows (`<tr>`) and columns (`<td>` or `<th>`).

The attributes commonly used with the `<table>` element are:

1.border: 
Specifies the width of the border around the table cells. This attribute is no longer recommended, and it's preferred to use CSS for styling.


HERE ARE SOME EXAMPLES :


1.BORDER COLOR

<html>

    <head>

        <title></title>

    </head>

    <body>

        <table border="3" bordercolor="red">

            <tr>

                <th>name</th>

                <th>class</th>

                <th>age</th>

            </tr>

            <tr>

                <td>udit</td>

                <td>12th</td>

                <td>20</td>

            </tr>

        </table>

    </body>

</html>

 

Output:



4.width:
 Specifies the width of the table. It can be defined in pixels, percentage, or as a relative value.

5. height: 
Specifies the height of the table. Similarly to width, it can be defined in pixels, percentage, or relative value.

6. align: 
Specifies the horizontal alignment of the table within its containing element. The possible values are "left," "center," or "right."


2. ROWSPAN & COLSPAN

<html>

    <head>

        <title></title>

    </head>

    <body>

        <table border="3" bordercolor="red">

            <tr>

                <th colspan="4">student data</th>

            </tr>

            <tr>

                <th>name</th>

                <th>class</th>

                <th>age</th>

                <th rowspan="3">male</th>

            </tr>

            <tr>

                <td>udit</td>

                <td>12th</td>

                <td>20</td>

            </tr>

            <tr>

                <td>rahul</td>

                <td>12th</td>

                <td>21</td>

            </tr>

            <tr>

                <td>priya</td>

                <td>12th</td>

                <td>23</td>

                <th rowspan="2">female</th>

            </tr>

            <tr>

                <td>diya</td>

                <td>12th</td>

                <td>25</td>

            </tr>

        </table>

    </body>

</html>

 

 

OUTPUT:




bgcolor: 

Specifies the background color of the table.




3.DATA BACKGROUND COLOR

<tr>

    <th BGCOLOR="GREEN" >name</th>
   
    <th BGCOLOR="GREEN">class</th>
   
    <th BGCOLOR="GREEN">age</th>
   
    <TH BGCOLOR="BLACK"></TH>
   
</tr>

OUTPUT:





 


4. IMAGE ADD INTO THE TABLE

<html>

<head><title>udit</title>

</head>

<body>

<table border="1" WIDTH="20%" HEIGHT="40%">

<tr>

<td>country name</td>

<td>country flag</td>

<td>weather</td>

</tr>

<tr>

<td>INDIA</td>

<td><IMG SRC="file:///C:/Users/udit%20khode/Desktop/Flag_of_India.png"></td>

<td>30 DEGREE CELCIUS</td>

</tr>

</table>

</body>

</html>

 

OUTPUT:



 



cellpadding:
 Specifies the amount of space between the cell content and the cell border.

cellspacing: 
Specifies the amount of space between cells.


5. Cell-padding & Cell-spacing

<table cellpadding="30" cellspacing="10" border="1" WIDTH="90%" HEIGHT="40%">

 

Output:



Post a Comment

0 Comments