Bright Java Tutorial

is brought to you by DoITBright LLC

HTML

Combine or Merge Table Columns

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 columns into as single column. Let us look into the table below. The table is very simple and without any merged columns.

  <html>
    <head>
      <title>Combine or Merge Table Columns 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>
                           
However, we wish to have an additional header that will categorize the "EMAIL" and "CELL" headers as "CONTACT INFO" and "STUDENT ID", "FIRST NAME" and "LAST NAME" as "STUDENT INFO". One way of accomplishing this goal is to add an additional row on top of the table headers. This newly added HTML table row will serve as higher level of categorizing the headers. Let us look at the HTML code below.

  <html>
    <head>
      <title>Combine or Merge Table Columns in HTML</title>
    </head>
    <body>
      <table border="1">
        <tr>
          <th colspan="3">STUDENT INFO</th>
          <th colspan="2">CONTACT INFO</th>
        </tr>
        <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>
                           
We used the "colspan" attribute of the <th>. When we say colspan = "3", this means, this column will span through 3 columns. If you have noticed, for that row, we have colspan = "3" and colspan = "2". If you sum it up, we have 5 columns. That is the number of columns in the other rows. This "colspan" attribute is also applicable in <td> tag.


Back    Next