rowspans and colspans merge the specified number of cells vertically or horizontally : table column : Table Style HTML CSS TUTORIALS

HTML CSS TUTORIALS » Table Style » table column »

rowspans and colspans merge the specified number of cells vertically or horizontally


 

<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <title> - Tables</title>
   </head>

   <body>
      <table border = "1">
         <thead>
            <tr>
               <!-- merge two rows -->
               <th rowspan = "2">
                  Picture
               </th>
               <!-- merge four columns -->
               <th colspan = "4" valign = "top">
                  <h1>this is a test. </h1><br />
               </th>
            </tr>

            <tr valign = "bottom">
               <th>#</th>
               <th>I</th>
               <th>S</th>
               <th>P</th>
            </tr>

         </thead>

         <tbody>

            <tr>
               <th>C</th>
               <td>2</td>
               <td>A</td>
               <td rowspan = "2">L</td>
               <td rowspan = "2">L</td>
            </tr>

            <tr>
               <th>L</th>
               <td>1</td>
               <td>A</td>
            </tr>

         </tbody>

      </table>

   </body>
</html>