[HTML] table 태그 (생성, 색상, 정렬, 크기, 셀병합)
표, table 🔻표 생성 순서 이해하기🔻 [2행 2열 상자 만드는 순서] 1. 큰 틀 하나를 만든다. 2. 가로 길이가 전체 길이와 같고 세로길이는 전체 길이의 1/2인 틀 2개를 만든다. 3. 2에서 만든 틀의 가로
steady-record.tistory.com
테이블 구성요소에는 table, tr, th, td로 구성되어 있다고했는데 사실 정확한 table의 구조는 아니다.
아래처럼 table, thead, tbody, tfoot, tr, th, td로 구성되어 있다.
하지만, thead는 th로 많이 사용하고, tfoot은 거의 사용되지 않아 간략하게 사용되고 있다.
<body>
<h1>원형 테이블 구조</h1>
<table border>
<thead>
<tr>
<th>컬럼명</th>
</tr>
</thead>
<tbody>
<tr>
<td>데이터</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>바닥글</td>
</tr>
</tfoot>
</table>
</body>
다만, CSS 선택자에서 주의해야 할 것은 tr은 table의 자식이 아닌 자손이라는 것이다.
그러므로 tr 선택할 때에는 자식선택자인 '>'가 생략된 자손선택자를 사용해야 한다.
'WEB' 카테고리의 다른 글
| [WEB] 자바 웹 프로젝트에 파비콘 설정하기 (1) | 2023.10.30 |
|---|---|
| [WEB] 웹 크롤링, 스크래핑 (+ Jsoup 라이브러리) (0) | 2023.10.24 |
| [Web] Emmet, Zen-coding / lorem(로렘) (0) | 2023.09.25 |
| 내 컴퓨터 IP주소 확인 (0) | 2023.09.20 |
| [Web] 기초환경설정(아파치 톰캣 다운로드, 이클립스 연동) (0) | 2023.09.19 |
