-
Tag - 테이블(table) 관련 2프론트엔드/HTML 2020. 8. 19. 02:51
colspan과 rowspan
테이블을 이용하다보면 가끔 테이블 셀을 합칠 일이 생긴다.
그럴 때면 <colspan>과 <rowspan>으로 나눠진다.
<col>은 세로줄을 나타내고, <span>은 가로줄을 나타낸다.
하지만 span에서 <colspan>은 가로 방향으로 셀을 합쳐주고 <rowspan>은 세로 방향으로 셀을 합친다.
<colspan>과 <rowspan> 모두 전체 테이블 칸수보다 더 많은 칸을 쓸 수 없다.
예를 들어 테이블 가로 세로 3칸짜리 테이블에서 <colspan>과 <rowspan>에게는 3까지 줄 수 있다.
그 이상의 숫자는 주어져도 동작을 하지 않는다.
<colspan> 태그 - 가로방향 셀 병합
대형 마트 목록
이마트
롯데마트
홈플러스
<body> <table> <tr> <td colspan="3"> 대형마트 목록 </td> </tr> <tr> <td> 이마트 </td> <td> 롯데마트 </td> <td> 홈플러스 </td> </tr> </table> </body><colspan> 태그를 쓰면 가로 방향으로 셀을 병합할 수 있다. 이때 <colspan>의 최대 범위는 3이다.
<rowspan> 태그 - 세로 방향 셀 병합
마트 목록
이마트
롯데마트
홈플러스
빅마트
이마트 트레이더스
코스트코
하나로마트
홈플러스 익스프레스
GS슈퍼
<body> <table> <tr> <td rowspan="3"> 마트 목록 </td> <td> 이마트 </td> <td> 롯데마트 </td> <td> 홈플러스 </td> </tr> <tr> <td> 빅마트 </td> <td> 이마트 트레이더스 </td> <td> 코스트코 </td> </tr> <tr> <td> 하나로마트 </td> <td> 홈플러스 익스프레스 </td> <td> GS 슈퍼 </td> </tr> </table> </body><rowspan> 태그를 쓰면 세로 방향으로 셀을 병합할 수 있다. 이때 <rowspan>의 최대 범위는 3이다.
'프론트엔드 > HTML' 카테고리의 다른 글
Tag - 테이블(table) 관련 4 (0) 2020.08.19 Tag - 테이블(table) 관련 3 (0) 2020.08.19 Tag - 테이블(table) 관련 (0) 2020.08.19 Tag - 목록(list) 관련 2 (0) 2020.08.19 Tag - 목록(list) 관련 (0) 2020.08.19