간혹 쿼리를 하다보면 다음과 같은 결과를 종종 보시게 될겁니다.
┌───┬───┬───┬───┬───┐
│  key1│  a(0)  | b(0)  │ c(0)  │ d(0)  │
├───┼───┼───┼───┼───┤
│  key1 │  a(1) │ b(1)  │ c(1)  │ d(1)  │
├───┼───┼───┼───┼───┤
│  key2 │  a(2) │ b(2)  │ c(2)  │ d(2)  │
├───┼───┼───┼───┼───┤
│  key2 │  a(3) │ b(3)  │ c(3)  │ d(3)  │
├───┼───┼───┼───┼───┤
│  key3 │  a(4) │ b(4)  │ c(4)  │ d(4)  │
└───┴───┴───┴───┴───┘
이렇게 되면 key가 되는부분이 중복으로 처리되어 보기싫어지죠..

보통 이런경우는 같은 값의 셀들은 병합시켜주면 보기 좋습니다.
아래처럼요..
┌───┬───┬───┬───┬───┐
│        │  a(0)  | b(0)  │ c(0)  │ d(0)  │
│  key1├───┼───┼───┼───┤
│        │  a(1) │ b(1)  │ c(1)  │ d(1)  │
├───┼───┼───┼───┼───┤
│        │  a(2) │ b(2)  │ c(2)  │ d(2)  │
│  key2├───┼───┼───┼───┤
│        │  a(3) │ b(3)  │ c(3)  │ d(3)  │
├───┼───┼───┼───┼───┤
│  key3 │  a(4) │ b(4)  │ c(4)  │ d(4)  │
└───┴───┴───┴───┴───┘

이렇게 하기위해서는 여러방법이 있겠지만,, 저는 기냥 스크립트로 해결해 봤습니다.
장점이라고 하면,, 재사용이 가능하다는거.. ㅎㅎ


그럼 소스 보시겠습니다...



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Merge Row </title>
<script>
/* ****************************************************************************
 * 함 수 명 : mergeRows([Object oTbl][, Integer iCell])
 * 기    능 : 이전 Row의 지정한 Cell과 현재 Row, Cell의 값이 동일하면 이를 합쳐줌
 * 사 용 법 : mergeRows(document.body.getElementsByTagName('TABLE')[0], 0);
 * 사 용 예 : <body onload="mergeRows(document.body.getElementsByTagName('TABLE')[0], 0);">
 * 작 성 자 : 이기덕
 * 작 성 일 : 2006-10-18
 * 수 정 일 : 2006-10-18
 * ***************************************************************************/
function mergeRows() {
  var argu  = mergeRows.arguments;
  var cnt  = 1;                                        // rowspan 값
  var oTbl  = argu[0];                                  // 비교할 Table Object, default=첫번째 테이블
  var oRow;                                            // 현재 Row Object
  var oCell;                                            // 현재 Cell Object
  var iRow;                                            // 이전에 일치했던 Row Index
  var iCell = argu[1] == null ? 0 : argu[1];            // 비교할 Cell Index, default=0
  var vPre;                                            // 이전에 일치했던 값
  var vCur;                                            // 현재 값
  var bChk  = false;                                    // 처음 일치인지 여부

  try {
    for (var i=0; i<oTbl.rows.length; i++) {            // Row Index만큼 Loop
      for (var j=0; j<oTbl.rows[i].cells.length; j++) { // Cell Index 만큼 Loop
        if (iCell == -1 || iCell == j) {                              // 비교할 Cell Index와 현재 Cell Index가 동일하면,,
          vCur = oTbl.rows[i].cells[j].outerText;

          if (vPre == vCur) {                          // 이전값과 현재값이 동일하면,,
            if (bChk == false) {                        // 처음 일치시에만 적용
              iRow = i-1;
              bChk = true;
            } // end of if

            cnt++;
            oTbl.rows[iRow].cells[j].rowSpan = cnt;
            oTbl.rows[i].deleteCell(j);
          } else {                                      // 이전값과 현재값이 다르면,,
            cnt = 1;
            vPre = vCur;
            bChk = false;
          } // end of if

          break;
        } // end of if
      } // end of for
    } // end of for
  } catch (e) {
    alert(e.description);
  } // end of try{} catch{}
} // end of function
</script>
</head>

<body onload="mergeRows(nTbl, 0);">
  <p>원래는 이 테이블<br>
  <table border=1 id="x">
    <tr>
      <td>aaa</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
    </tr>
  </table>

  <p>병합된 테이블<br>
  <table border=1 id="nTbl">
    <tr>
      <td>aaa</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
    </tr>
  </table>
</body>
</html>

출처 : php스쿨