행과 열 병합하기
Coddy HTML 여정의 Fundamentals 섹션에 포함된 레슨 — 60개 중 50번째.
HTML에서 rowspan 및 colspan 속성을 사용하여 테이블 셀이 여러 행이나 열에 걸치도록 만들 수 있습니다. 이러한 속성을 사용하면 셀을 병합하여 더 복잡한 테이블 레이아웃을 만들 수 있습니다.
colspan 속성은 셀이 차지할 열의 수를 지정하는 데 사용됩니다. 이 속성은 확장하려는 셀의 <td> 또는 <th> 태그에 추가됩니다.
다음은 colspan을 사용하는 방법에 대한 예시입니다:
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>이 예제에서, "Name"이라는 텍스트가 있는 헤더 셀은 두 개의 열에 걸쳐 있습니다. 이는 여러 열을 아우르는 헤더를 만드는 데 유용합니다. 결과는 다음과 같습니다:
rowspan 속성은 셀이 차지할 행의 수를 지정하는 데 사용됩니다. 또한 확장하려는 셀의 <td> 또는 <th> 태그에 추가됩니다.
다음은 rowspan을 사용하는 방법의 예시입니다:
<table border="1">
<tr>
<th>Employee</th>
<th>Shift</th>
</tr>
<tr>
<td rowspan="2">Alex</td>
<td>Morning</td>
</tr>
<tr>
<td>Evening</td>
</tr>
</table>여기서 rowspan은 이름을 반복하지 않고 Alex가 오전과 오후 교대 근무를 모두 수행함을 보여주기 위해 사용됩니다.
동일한 테이블 내에서 colspan과 rowspan을 모두 사용하여 복잡한 레이아웃을 만들 수 있습니다. 병합된 셀에 맞춰 각 행의 셀 수를 적절하게 조정해야 한다는 점을 기억하세요.
챌린지
쉬움여러 행과 열에 걸쳐 있는 셀을 포함하는 HTML 문서를 만드세요. 테이블은 다음과 같은 구조를 가져야 합니다:
- 테이블을 정의하기 위한
<table>태그를 사용하며, 가시성을 위해border속성을 "1"로 설정합니다. - 두 개의 열에 걸쳐 있고 "Student Information"이라는 텍스트를 포함하는 헤더 셀(
<th>)이 있는 테이블 행(<tr>)을 만듭니다. - "Name"이라고 표시된 헤더 셀(
<th>)과 두 개의 행에 걸쳐 있고 "John Doe"라는 텍스트를 포함하는 데이터 셀(<td>)이 있는 또 다른 테이블 행(<tr>)을 만듭니다. - "Age"라고 표시된 헤더 셀(
<th>)이 있는 또 다른 테이블 행(<tr>)을 만듭니다. - "Jane Smith"라고 표시된 데이터 셀(
<td>)과 "25"라고 표시된 데이터 셀(<td>)이 있는 마지막 테이블 행(<tr>)을 만듭니다.
치트 시트
셀이 여러 열에 걸쳐 있게 하려면 colspan을 사용하세요:
<th colspan="2">Name</th>셀이 여러 행에 걸쳐 있게 하려면 rowspan을 사용하세요:
<td rowspan="2">John</td>두 가지 병합 속성을 모두 사용한 테이블 예시입니다:
<table border="1">
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Exams</th>
</tr>
<tr>
<th>Math</th>
<th>Science</th>
</tr>
<tr>
<td>Kim</td>
<td>A</td>
<td>B+</td>
</tr>
</table>직접 해보기
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- 여기에 코드를 작성하세요 -->
</table>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
