HTML | colspan Attribute – GeeksforGeeks

Posted on by mtoplistChuyên mục:Top List

The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as “merge cell” in a spreadsheet program like Excel.
Usage: It can be used with <td> and <th> element while creating an HTML Table.
 

Attribute Values: It contains a value i.e number Which specify the number of columns that a cell should span. 

Note: colspan=”0″ tells the browser to span the cell to the last column of the column group (colgroup). 

  • <td>: The colspan attribute when used with <td> tag determines the number of standard cells it should span. 
    Syntax:
<td colspan = "value">table content...</td>

The value specifies the number of columns that the cell fills. The value must be an integer. 
Example: 
 

Tóm Tắt

html




<!DOCTYPE html>

<html>

 

<head>

    <title>HTML colspan Attribute</title>

    <style>

     

        table, th, td {

            border: 1px solid black;

            border-collapse: collapse;

            padding: 6px;

            text-align:center;

        }

 

    </style>

</head>

 

<body>

    <center>

        <h1 style="color: green;">GeeksforGeeks</h1>

        <h2>HTML colspan Attribute</h2>

        <table>

            <tr>

                <th>Name</th>

                <th>Expense</th>

            </tr>

            <tr>

                <td>Arun</td>

                <td>$10</td>

            </tr>

            <tr>

                <td>Priya</td>

                <td>$8</td>

            </tr>

 

            

            <tr>

                

                

                <td colspan="2">Sum: $18</td>

            </tr>

        </table>

    </center>

</body>

 

</html>                







Output: 
 


colspan


    

  • <th>: The colspan attribute when used with <th> tag determines the number of header cells it should span. 
    Syntax:
    • 



<th colspan = "value">table content...</th>


The value specifies the number of columns that the cell fills. The value must be a integer. 
Example: 


html



















<!DOCTYPE html>


<html>


 


<head>


    <title>HTML colspan Attribute</title>


    <style>


        table,


        th,


        td {


            border: 1px solid black;


            border-collapse: collapse;


            padding: 6px;


            text-align: center;


        }


    </style>


</head>


 


<body>


    <center>


        <h1 style="color: green;">GeeksforGeeks</h1>


        <h2>HTML colspan Attribute</h2>


 


        <table>


            <tr>


                <th colspan="2">Expense</th>


            </tr>


 


            <tr>


                <td>Arun</td>


                <td>$10</td>


            </tr>


 


            <tr>


                <td>Priya</td>


                <td>$8</td>


            </tr>


        </table>


    </center>


</body>


 


</html>    












Output: 


colspan


Supported Browsers: The browser supported by colspan attribute are listed below:  


    

  • Google Chrome
    • 

  • Internet Explorer
    • 

  • Firefox
    • 

  • Opera
    • 

  • Safari
    • 



 


HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.










My Personal Notes


arrow_drop_up






	
	

				

					

					

					

			mtoplist