table 태그
: 표 생성에 사용
요소
- tr : 행
- th / td : 열 (한칸)
- th : 제목, 합계 ( 가운데 정렬, 굵은 글씨 )
- td : 일반 ( 왼쪽 정렬, 보통 글씨 )
- thead / tbody / tfoot
- 사용하지 않는 경우 tbody 자동생성
- 순서는 thead > tbody > tfoot
- 순서가 달라져도 무조건 thead는 상단에 표시 된다
설정
: 보통 css에서 설정 가능
- border : 테두리 두께 설정
- bordercolor : 테두리 색상
- width : 가로길이
셀 병합
colspan : 열 병합 (가로)
rowspan : 행 병합 (세로)
단, 병합을 하려면 병합될 칸을 삭제하기!
생성 예시
3x4 : 3행 4열 : tr * 3 / td * 4
tr*3 > td*4로 한번에 생성 가능
사용
<table border="1" width="50%">
<!-- %표시는 반응형 (화면에 맞게 크기 조절) -->
<tr>
<th colspan="2">1</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
<table border="1" width="50%" bordercolor="blue">
<thead>
<tr >
<th>과목</th>
<th>이름</th>
<th>성적</th>
</tr>
</thead>
<tbody>
<tr>
<td>국어</td>
<td>홍길동</td>
<td>90</td>
</tr>
<tr>
<td>국어</td>
<td>이순신</td>
<td>85</td>
</tr>
<tr>
<td>국어</td>
<td>홍길순</td>
<td>70</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">합계</th>
<th>70</th>
</tr>
</tfoot>
</table>
'HTML - CSS > html 공부' 카테고리의 다른 글
[HTML] img 태그 (0) | 2023.04.05 |
---|---|
[HTML] ifame 태그 (0) | 2023.04.05 |
[HTML] list 태그 (0) | 2023.04.05 |
[HTML] textarea 태그 (0) | 2023.04.05 |
[HTML] select 태그 (0) | 2023.04.05 |