Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML에서 표 셀을 병합하는 방법은 무엇입니까?


HTML의 셀을 병합하려면 colspan 및 rowspan 속성을 사용하십시오. rowspan 속성은 셀이 확장되어야 하는 행 수에 대한 반면 colspan 속성은 셀이 확장되어야 하는 열 수에 대한 것입니다.

두 속성 모두 태그 안에 있습니다. 숫자는 숫자 값입니다. 예를 들어, 행 범위인 경우 2행의 경우 2, 열 범위인 경우 2개의 열인 경우 2입니다.

HTML에서 표 셀을 병합하는 방법은 무엇입니까?

예시

먼저 HTML로 3행 3열로 표를 만드는 방법을 알아보겠습니다.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th></th>
            <th></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
           <td></td>
           <td></td>
           <td></td>
         </tr>
      </table>
   </body>
</html>

출력

HTML에서 표 셀을 병합하는 방법은 무엇입니까?

예시

colspan 및 rowspan 속성을 사용하여 셀 병합

<!DOCTYPE html>
<html>
   <head>
      <style>
         table, th, td {
            border: 1px solid black;
            width: 100px;
            height: 50px;
         }
      </style>
   </head>

   <body>
      <h1>Heading</h1>
      <table>
         <tr>
            <th colspan="2"></th>
            <th></th>
         </tr>
         <tr>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
         </tr>
         <tr>
            <td></td>
            <td></td>
         </tr>
      </table>
   </body>
</html>

출력

HTML에서 표 셀을 병합하는 방법은 무엇입니까?