Html table Complex layout column span and row span - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table Row

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table Row

Description

Html table Complex layout column span and row span

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum do</title> 
 </head> <!--from   w  w  w .j a  v a2s. com-->
 <body> 
  <table border="1" align="center" cellpadding="10px"> 
   <thead> 
    <tr> 
     <th rowspan="3">Lor</th> 
     <th colspan="3">Lorem i</th> 
    </tr> 
    <tr> 
     <th colspan="2">Lorem ip</th> 
     <th rowspan="2">Lorem</th> 
    </tr> 
    <tr> 
     <th>Lorem</th> 
     <th>Lor</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td rowspan="2">Lorem </td> 
     <td rowspan="2">Lorem ip</td> 
     <td rowspan="2">Lorem ip</td> 
     <td>Lorem ipsum dolor s</td> 
    </tr> 
    <tr> 
     <td>Lorem ipsum dolor sit amet</td> 
    </tr> 
    <tr> 
     <td rowspan="4">Lorem i</td> 
     <td>Lorem ip</td> 
     <td>Lorem ips</td> 
     <td rowspan="2">Lorem</td> 
    </tr> 
    <tr> 
     <td rowspan="2">Lorem ips</td> 
     <td rowspan="2">Lorem ip</td> 
    </tr> 
    <tr> 
     <td rowspan="2">Lorem ipsum dolor </td> 
    </tr> 
    <tr> 
     <td>Lorem ip</td> 
     <td>Lorem ip</td> 
    </tr> 
    <tr> 
     <td>Lorem ips</td> 
     <td>Lorem ip</td> 
     <td>Lorem ips</td> 
     <td>Lorem ipsum dolor sit </td> 
    </tr> 
   </tbody> 
  </table>  
 </body>
</html>

Related Tutorials