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>

Related examples in the same category

1.	'td' Example
2.	'choff' is a decimal number specifying an offset from the beginning of the table cell
3.	'headers' specifies a list of 'th' elements
4.	tr and td
5.	Line break in a table cell
6.	use table cell as block
7.	Hide empty cell
8.	Empty table header cell
9.	Table cell hover
10.	Right-offset Shrinkwrapped Table
11.	Table with Spanned Rows and Cells
12.	Boxed Table and Cells
13.	td font-weight: bold;
14.	table cell hover with class
15.	td:empty
16.	table cell overflow hidden
17.	Selecting cells in body
18.	Set style for an anchor in table cell
19.	Set style for image in a table cell
20.	Table cell with different class
21.	Table cell with line height setting
22.	Add different cell space
23.	empty-cells: hide
24.	td width:6em;
25.	td overflow: hidden;
26.	td font-size: 130%;
27.	td color: #303030;
28.	td font-size: 0.9em;
29.	td line-height:1.5; line-height:1.5em; line-height:75%;}
30.	Table with column span 2
31.	Table with number column
32.	css is for the table layout
33.	Selecting cells in column
34.	Column widths
35.	Hiding column
36.	col width: 200px;
37.	col color: crimson;
38.	Column highlight

rowspans and colspans merge the specified number of cells vertically or horizontally : td « Tags « HTML / CSS

Related examples in the same category