행과 열 병합하기
Coddy HTML 여정의 기초 섹션에 포함된 레슨. 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 문서를 작성하세요. 표의 구조는 다음과 같아야 합니다.
- 세 개의 열에 걸쳐 있고
Student Report텍스트가 들어 있는 헤더 셀(<th>)이 있는 표 행(<tr>). Name이라고 적힌 헤더 셀(<th>),Subject라고 적힌 헤더 셀(<th>),Grade라고 적힌 헤더 셀(<th>)이 있는 또 다른 표 행(<tr>).John Doe이라고 적힌 데이터 셀(<td>),Math라고 적힌 데이터 셀(<td>),A라고 적힌 데이터 셀(<td>)이 있는 또 다른 표 행(<tr>).- 두 행에 걸쳐 있고
Jane Smith텍스트가 들어 있는 데이터 셀(<td>),Science라고 적힌 데이터 셀(<td>),B라고 적힌 데이터 셀(<td>)이 있는 또 다른 표 행(<tr>). History라고 적힌 데이터 셀(<td>)과A라고 적힌 데이터 셀(<td>)이 있는 마지막 표 행(<tr>).
직접 해보기
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- 여기에 코드를 작성하세요 -->
</table>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
기초의 모든 레슨
직접 연습해 보세요: Web 플레이그라운드