th rowspan='' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:th

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. th

Introduction

To create irregular tables, use the colspan and rowspan attributes of the td and th elements.

The following code shows how to use these attributes to create an irregular table.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}
[colspan], [rowspan] {font-weight:bold; border: medium solid black}
thead [colspan], tfoot [colspan] {text-align:center; }

      </style> 
   </head> 
   <body> 
      <table> 
         <thead> 
            <tr> 
               <th>Rank</th>
               <th>Name</th>
               <th>Level</th> 
               <th colspan="2">Size &amp; Votes</th> 
            </tr> 
         </thead> 
         <tbody> 
            <tr> 
               <th>Favorite:</th>
               <td>Java</td>
               <td>SQL</td> 
               <td>CSS</td>
               <td>500</td> 
            </tr> 
            <tr> 
               <th>2nd Favorite:</th>
               <td>Type</td>
               <td>Layout</td>
               <td>Item</td>
               <td>450</td> 
            </tr> 
            <tr> 
               <th>3rd Favorite:</th>
               <td>No Name</td> 
               <td colspan="2" rowspan="2"> This is a test. This is a test. This is a test. This is a test. </td> 
               <td>203</td> 
            </tr> 
            <tr> 
               <th rowspan="2">Joint 4th:</th> 
               <td>Oracle</td> 
               <td rowspan="2">100</td> 
            </tr> 
            <tr> 
               <td>Python</td> 
               <td>Ruby</td> 
               <td>Javascript</td> 
            </tr> 
         </tbody> 
         <tfoot> 
            <tr> 
               <th colspan="5">? 2019 java2s.com </th> 
            </tr> 
         </tfoot> 
      </table>  
   </body><!--  www . java2s.c om-->
</html>

Related Tutorials