반응형
HTML 테이블에는 여러 행 및/또는 열에 걸쳐 있는 셀이 있을 수 있다.
HTML 테이블 - Colspan
여러 열에 걸쳐 셀 범위를 설정하려면 colspan 속성을 사용한다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>두 열에 걸쳐 있는 셀</h2> <p>셀 범위를 둘 이상의 열로 만들려면 colspan 속성을 사용합니다.</p> <table style="width:100%"> <tr> <th colspan="2">이름</th> <th>나이</th> </tr> <tr> <td>길동</td> <td>홍</td> <td>43</td> </tr> <tr> <td>철수</td> <td>이</td> <td>57</td> </tr> </table> </body> </html> |
참고: colspan 속성의 값은 스팬할 열 수를 나타낸다.
HTML 테이블 - Rowspan
여러 행에 걸쳐 셀 범위를 설정하려면 rowspan 속성을 사용한다:
| <!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } </style> </head> <body> <h2>두 행에 걸쳐 있는 셀</h2> <p>셀 범위를 둘 이상의 행으로 만들려면 rowspan 속성을 사용합니다.</p> <table style="width:100%"> <tr> <th>이름</th> <td>길동</td> </tr> <tr> <th rowspan="2">전화번호</th> <td>555-1234</td> </tr> <tr> <td>555-8745</td> </tr> </table> </body> </html> |
참고: rowspan 특성의 값은 범위를 지정할 행 수를 나타낸다.
마무리
이번 글에서는 행 혹은 열에 걸쳐 있는 셀을 어떻게 서식하는지 실습하였다.
이를 위해서는 colspan과 rowspan 속성값을 활용하여 테이블의 행이나 열을 편집하였다.
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 테이블 Colgroup (0) | 2023.05.12 |
|---|---|
| HTML 테이블 스타일 (0) | 2023.05.11 |
| HTML 테이블 채우기와 간격(HTML Table Padding & Spacing) (0) | 2023.05.09 |
| HTML 테이블 헤더(Table Headers) (0) | 2023.05.08 |
| HTML 테이블 크기(Table Sizes) (0) | 2023.05.07 |
댓글