행과 열 병합하기
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가 아침과 저녁 근무조 모두에서 일한다는 것을 보여 주는 데 사용됩니다.
같은 table에서 colspan과 rowspan을 모두 사용하여 복잡한 레이아웃을 만들 수 있습니다. 병합된 셀을 수용할 수 있도록 각 행의 셀 수를 그에 맞게 조정해야 한다는 점만 기억하세요.
챌린지
쉬움여러 행과 열에 걸쳐 있는 셀이 포함된 HTML 문서를 작성하세요. table은 다음 구조를 가져야 합니다:
- 세 개의 열에 걸쳐 있고
"Student Report"텍스트를 포함하는 헤더 셀(<th>)이 있는 table 행(<tr>)입니다. "Name"이라고 표시된 헤더 셀(<th>),"Subject"라고 표시된 헤더 셀(<th>),"Grade"라고 표시된 헤더 셀(<th>)이 있는 또 다른 table 행(<tr>)입니다."John Doe"라고 표시된 데이터 셀(<td>),"Math"라고 표시된 데이터 셀(<td>),"A"라고 표시된 데이터 셀(<td>)이 있는 또 다른 table 행(<tr>)입니다.- 두 개의 행에 걸쳐 있고
"Jane Smith"텍스트를 포함하는 데이터 셀(<td>),"Science"라고 표시된 데이터 셀(<td>),"B"라고 표시된 데이터 셀(<td>)이 있는 또 다른 table 행(<tr>)입니다. "History"라고 표시된 데이터 셀(<td>)과"A"라고 표시된 데이터 셀(<td>)이 있는 마지막 table 행(<tr>)입니다.
직접 해보기
<!DOCTYPE html>
<html>
<body>
<table border="1">
<!-- 여기에 코드를 작성하세요 -->
</table>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
Fundamentals의 모든 레슨
직접 연습해 보세요: Web 플레이그라운드