Bright Java Tutorial

is brought to you by DoITBright LLC

HTML

Combine or Merge Table Cells Vertically

Whenever we work on data that are presented in a tabular manner like in a spread sheet, at one point, we will face a need to combine or merge 2 or more cells vertically into as single cell. Let us look into the table below. The table is very simple and straight forward.

  <html>
    <head>
      <title>Combine or Merge Table Cells Vertically in HTML</title>
    </head>
    <body>
      <table border="1">
        <tr>
          <th>STUDENT ID</th>
          <th>FIRST NAME</th>
          <th>LAST NAME</th>
          <th>EMAIL</th>
          <th>CELL</th>
        </tr>
        <tr>
          <td>100000</td>
          <td>Andres</td>
          <td>Bonifacio</td>
          <td>andress@testemail.com</td>
          <td>602-111-1001</td>
        </tr>
        <tr>
          <td>100001</td>
          <td>Jose</td>
          <td>Rizal</td>
          <td>jose@testemail.com</td>
          <td>602-111-1002</td>
        </tr>
        <tr>
          <td>100002</td>
          <td>Antonio</td>
          <td>Luna</td>
          <td>antonio@testemail.com</td>
          <td>602-111-1003</td>
        </tr>
      </table>
    </body>
  </html>
                           
Let us say, both Jose Rizal and Andres Bonifacio share the same phone number. For some weird reason, since the rows Jose Rizal and Andres Bonifacio are on top of each other, we wanted to display their phone number only once. Thus, we thought it might be a good idea to merge or combine their phone number cells into a single cell. Look at the out come below.

  <html>
    <head>
      <title>Combine or Merge Table Cells Vertically in HTML</title>
    </head>
    <body>
      <table border="1">
        <tr>
          <th>STUDENT ID</th>
          <th>FIRST NAME</th>
          <th>LAST NAME</th>
          <th>EMAIL</th>
          <th>CELL</th>
        </tr>
        <tr>
          <td>100000</td>
          <td>Andres</td>
          <td>Bonifacio</td>
          <td>andress@testemail.com</td>
          <td rowspan="2">602-111-1001</td>
        </tr>
        <tr>
          <td>100001</td>
          <td>Jose</td>
          <td>Rizal</td>
          <td>jose@testemail.com</td>
        </tr>
        <tr>
          <td>100002</td>
          <td>Antonio</td>
          <td>Luna</td>
          <td>antonio@testemail.com</td>
          <td>602-111-1003</td>
        </tr>
      </table>
    </body>
  </html>
                           
We used the "rowspan" attribute of the <td>. When we say rowspan = "2", this means, this cell will span through 2 rows. In effect, we needed to remove one <td> in the next row since the cell that spans 2 rows occupied it's space. This "rowspan" attribute is also applicable to the <th> tag.


Back    Next