✳ 테이블 태그
#<table> : 표 만들기
#<tr> : 표의 한 열(가로)
#<th> : 각 열, 행의 머리(세로)
scope = "col or row" : 열과 행 중 무엇의 머리인지 표시
#<td> : 표의 각 칸
ㄴ colspan="병합할 숫자 칸" : 가로로 n 개 병합
ㄴ rowspan="병합할 숫자 칸" : 세로로 n 개 병합
#<caption> : 표의 제목
<head>
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid black; padding: 8px; }
</style>
</head>
<table>
<caption>오늘자 식단표</caption>
<tr>
<td></td>
<th scope="col">아침</th>
<th scope="col">점심</th>
<th scope="col">저녁</th>
</tr>
<tr>
<th scope="row">밥</td>
<td>현미밥</td>
<td rowspan="2">호박죽</td>
<td>흰쌀밥</td>
</tr>
<tr>
<th scope="row">국</td>
<td>콩나물국</td>
<td>갈비탕</td>
</tr>
<tr>
<th scope="row">반찬</td>
<td colspan="3">배추김치</td>
</tr>
</table>
'HTML5' 카테고리의 다른 글
| 📚 HTML5 입력, 선택 태그, 속성 알아보기 (0) | 2023.01.10 |
|---|---|
| 📚 HTML5 시멘틱태그 (0) | 2023.01.10 |
| 📚 HTML5 인라인 요소와 블록 요소 (0) | 2023.01.10 |
| 📚 HTML5 ul, ol, li 태그 (0) | 2023.01.10 |
| 📚 HTML5 기본 태그 (0) | 2023.01.10 |
댓글