How To Split a Table Colspan and Rowspan In HTML | Tutorial

Split a Table Colspan and Rowspan In HTML Tutorial

Colspan and Rowspan

A table is isolated into lines and each column is separated into cells. In a few circumstances, we require the Table Cells traverse crosswise over (or combined) more than one segment or line. In these circumstances, we can utilize Colspan or Rowspan characteristics.

Colspan

The colspan trait characterizes the quantity of sections a cell ought to traverse (or union) on a level plane. That is, you need to consolidation at least two Cells in succession into a solitary Cell.

<td colspan=2 >

The above code will combine two Cells as one Cell on a level plane.

Rowspan

The rowspan trait determines the quantity of lines a phone ought to traverse vertically. That is , you need to union at least two Cells in an indistinguishable segment from a solitary Cell vertically.

<td rowspan=2 >

The above code will consolidate two Cells as one Cell vertically.

Source Code

<html>
   <head>
      <title>split the table </title>
   </head>
       <body>
	      <h1> table split </h1>
		  <table border  height="300px" width="60%">
		   <caption>USER INFORMATION</caption>
		   <tr>
		      <th colspan="2">User Name</th>
			  <th rowspan="3">City</th>
			  <th colspan="3">contact</th>
		    </tr>
            <tr>
			   <th rowspan="2">First Name</th>
			   <th rowspan="2">Last Name</th>
			   <th rowspan="2">Mobile </th>
			   <th colspan="2">Email</th>
             </tr>	
                 <tr>
                    <th>Gmail</th>
                     <th>Others</th>
                  </tr>
               <tr>
			     <td> Id1</td>
				 <td>Id a1</td>
				 <td>U.s </td>
				 <td>1234567898</td>
				 <td>xxxx@gmail.com</td>
				 <td>zyz@yahoo.com</td>
                </tr>

           <tr>
			     <td> Id2</td>
				 <td>Id a</td>
				 <td>U.s </td>
				 <td>098776543</td>
				 <td>zzzzz@gmail.com</td>
				 <td>zyz@yahoo.com</td>
                </tr>	
                   				  
		  </table>
	    </body>
</html>

 

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x