-
HTML.3 행과 열 및 tableHTML 2020. 11. 4. 17:01728x90
<table>
table > tr > th, td
table > caption
결론
: Row = 행 ( 가로 ) :
: Col = 열( 세로 ) :
<table> : table - 표
<tr> : table row - 표의 한 열
<th> : table header - 각 열, 행의 머리
속성
역할
값
scope
무엇(행/열)의 머리인지 표시
col, row...
<td> : table data - 표의 각 칸
속성
역할
값
colspan
가로로 n개 칸 병함
칸 개수 숫자값
rowspan
세로로 n개 칸 병함
칸 개수 숫자값
★ 다른 태그들을 포함할 수 있음.
<caption> : 표의 제목
<!-- 표의 시각화를 위한 CSS 코드 --> <style> table { border-collapse: collapse; } th, td { border: 1px solid black; padding: 8px; } </style> </head> <body> <table> <caption>ㅇ식단표</caption> <tr> <td></td> <th scope="col">아침</th> <th scope="col">점심</th> <th scope="col">저녁</tH> </tr> <tr> <th scope="row">밥</th> <td>현미밥</td> <td rowspan="2">호박죽</td> <td>흰쌀밥</td> </tr> <tr> <th scope="row">국</th> <td>콩나물국</td> <td>갈비탕</td> </tr> <tr> <th scope="row">반찬</th> <td colspan="3">배추김치</td> </tr> <tr> <td> </td> </tr> </table> </body>- 컴퓨터가 이해하기 쉬운 착한 사이트를 만들기 위해 scope를 사용해주면 무엇 행/열의 머리 인지를 표현해 주면 더 좋다.
- <th>아침밥</th> => <th scope=“row/col”>아침밥</th>
::
[예제]
주의 레이아웃, 디자인 용도로 사용하지 말 것!
- 위 목적으로는 이후에 배울 CSS를 사용하세요.
row는 행(가로)이고 col은 열(세로)입니다.
아래 테이블은 4행 3열 테이블입니다.
첫째 줄이 1행, 둘째 줄이 2행...이고, 첫째 열이 1열, 둘째 열이 2열...입니다.1행 1열
1행 2열
1행 3열
2행 1열
2행 2열
2행 3열
3행 1열
3행 2열
3행 3열
4행 1열
4행 2열
4행 3열
rowspan은 행을 합치는 것이기 때문에 위아래가 합쳐지고,
colspan은 열을 합치는 것이기 때문에 좌우가 합쳐지게 됩니다.
마찬가지로 textarea에서 row는 행 수를 늘리므로 세로 폭이 커지는 것이고,
col은 열의 글자 수를 늘리므로 가로 폭이 커지는 것입니다.728x90'HTML' 카테고리의 다른 글
HTML.7 Semantic web 과 Semantic Tags (0) 2020.11.17 HTML.6 Lable , Input 태그 및 속성 (0) 2020.11.04 HTML.5 < li, ol, ul > (0) 2020.11.04 HTML.2 HTML 코드 관련 (0) 2020.11.04 HTML.1 HTML Semantic 요소 (0) 2020.11.04