HTML 테이블 병합의 구체적인 구현 방법

저자：Eve Cole 업데이트 시간：2024-12-18 10:51:45

HTML 양식을 만들 때

이것은 매우 불공평하다는 것을 알 수 있습니다. 셀 병합이 필요합니다.

주요 단계:

1. 먼저 오른쪽으로 병합할지(열 병합), 아래쪽으로 병합할지(행 병합) 확인하세요.

2. 병합해야 할 셀을 찾으세요.

3. 병합된 셀에 내용이 있거나 위치를 점유하고 있는 경우 소스코드에서 병합된 셀을 삭제할 수 있습니다.

특별한 주의 :

셀을 병합할 때 병합된 셀에 내용이 있으면 병합에는 영향을 미치지 않지만 병합된 셀의 내용은 어떤 방식으로든 처리되지 않기 때문에 셀은 자동으로 뒤로 이동합니다.

해결 방법 : 추가 셀을 삭제하면 됩니다.

주요 코드:

여러 행 병합: rowspan="병합된 셀 수"

여러 열 병합: colspan="병합된 셀 수"

상해:

표적 세포:

1: 교차 행: 상단 셀이 대상 셀이므로 병합 코드를 작성합니다.

2: 교차 열: 가장 왼쪽 셀이 대상 셀이므로 병합 코드를 작성합니다.

그런 다음 주요 단계를 따릅니다.

초기형 <본문>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th>올스타 정보 수집</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <일></일>
      <th>이름</th>
      <th>성별</th>
      <th>나이</th>
      <th>취미</th>
    </tr>
    <tr>
      <td></td>
      <td>형님</td>
      <td>남성</td>
      <td>24</td>
      <td>노래하고, 춤추고, 랩하고, 농구</td>
    </tr>
    <tr>
      <td></td>
      <td>리탕</td>
      <td>남성</td>
      <td>20</td>
      <td>코드 측정 및 날카로운 조각 5</td>
    </tr>
    <tr>
      <td></td>
      <td>멩레이</td>
      <td>남성</td>
      <td>27</td>
      <td>명검은 탑을 훔치고 최고의 사냥꾼이 되었습니다</td>
    </tr>
  </table>
</body>

위 사진처럼 나오네요

교차 행 병합(rowspan): 다음과 같은 효과를 원하면 rowspan 속성을 사용해야 합니다.

<본문>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th rowspan="5">올스타 정보 수집</th><!--요구사항에 따라 제목을 찾아 rowspan 속성을 쓰고 첫 번째 행에서 다섯 번째 행을 병합하는 것을 의미하는 매개변수 5를 씁니다. 동시에 각 줄의 첫 번째 열을 주석 처리합니다 -->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <!-- <번째></th> -->
      <th>이름</th>
      <th>성별</th>
      <th>나이</th>
      <th>취미</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>형님</td>
      <td>남성</td>
      <td>24</td>
      <td>노래하고, 춤추고, 랩하고, 농구</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>리탕</td>
      <td>남성</td>
      <td>20</td>
      <td>코드 측정 및 날카로운 조각 5</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>멩레이</td>
      <td>남성</td>
      <td>27</td>
      <td>명검은 탑을 훔치고 최고의 사냥꾼이 되었습니다</td>
    </tr>
  </table>
</body>

열 간 병합(colspan): 다음과 같은 효과를 원하면 colspan 속성을 사용해야 합니다.

<본문>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th colspan="5">올스타 정보 수집</th><!--요구 사항에 따라 제목을 찾아 colspan 속성을 쓰고 첫 번째 열에서 다섯 번째 열을 병합하는 것을 의미하는 매개변수 5를 쓰고, 동시에 각 열의 첫 번째 줄을 주석 처리합니다 -->
      <!-- <td></td>
      <td></td>
      <td></td>
      <td></td> -->
    </tr>
    <tr>
      <!-- <번째></th> -->
      <th>이름</th>
      <th>성별</th>
      <th>나이</th>
      <th>취미</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>형님</td>
      <td>남성</td>
      <td>24</td>
      <td>노래하고, 춤추고, 랩하고, 농구</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>리탕</td>
      <td>남성</td>
      <td>20</td>
      <td>코드 측정 및 날카로운 조각 5</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>멩레이</td>
      <td>남성</td>
      <td>27</td>
      <td>명검은 탑을 훔치고 최고의 사냥꾼이 되었습니다</td>
    </tr>
  </table>
</body>

이것으로 HTML 테이블 병합의 특정 구현에 대한 기사를 마칩니다. 더 많은 관련 HTML 테이블 병합 콘텐츠를 보려면 downcodes.com에서 이전 기사를 검색하거나 아래에서 관련 기사를 계속 찾아보세요. com!