테이블 크기 조절
style속성에 사용하여 테이블, 행 또는 열의 크기를 지정한다.
- width 넓이
- height 높이
표 만들 때 사용하면 좋은 태그
- <th> </th> 기본적으로 굵게 표시되고 중앙에 정렬되어 표시된다.
- <td>와 같이 사용하거나 <td>의 자리에 대신 사용한다.
- <caption> </caption> 전체 테이블의 제목 역할을 한다.
- 어느 쪽에 써도 화면상에는 표 위쪽에 나타난다.
표 고정 태그
- <thead> </thead> 상단줄 고정
- <tbody> </tbody> 가운데 지정 범위 고정
- <tfoot> </tfoot> 하단바 고정
<table border="1">
<thead>
<tr>
<th>방 이름</th>
<th>대상</th>
<th>크기</th>
<th>가격</th>
</tr>
<tbody>
<tr>
<td>유채방</td>
<td>여성 도미토리</td>
<td rowspan="3">4인실</td>
<td rowspan="4">1인 20,0000원</td>
</tr>
<tr>
<td rowspan="2">동백방</td>
<td>동성 도미토리</td>
</tr>
<tr>
<td>가족1팀</td>
</tr>
<tr>
<td>천혜향방</td>
<td>-</td>
<td>2인실</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">바깥채 전체를 렌트합니다.</td>
</tr>
</tfoot>
</thead>
</table>
셀 합치는 태그
<th>나 <td>의 속성으로 쓰는 태그
- colspan 열 합치기, 속성 값은 확장할 열 수를 나타낸다.
- rowspan 행 합치기, 속성 값은 확장할 행 수를 나타낸다.
주의할 점
행이 다른 행보다 더 적거나 더 많은 셀을 가질 수 있는 경우가 있다.
<td>태그의 갯수에 잘 맞추어서 사용해야 표가 제대로 나온다.
합친부분은 제외하고 작성!
없는 부분은 빈칸으로 출력되거나 뒤에 내용이 앞에 채워진다.
또는 칸이 더 많아져서 옆으로 튀어나오는
이상한 모양으로 표가 출력된다.
예시>
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
}
</style>
</head>
<body>
<table style="width: 100%;">
<caption>시간표</caption>
<colgroup>
<col span="1" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th></th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
</tr>
<tr>
<th>8:00</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan=3">4</td>
<td>5</td>
</tr>
<tr>
<th>9:00</th>
<td colspan="2">6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<th>10:00</th>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<th>11:00</th>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<th>12:00</th>
<td colspan="5">점심 시간</td>
</table>
</body>
</html>
'Front-End > HTML' 카테고리의 다른 글
| HTML 태그 한 눈에 정리하기 1 (0) | 2023.02.16 |
|---|---|
| HTML 태그 - Lists (0) | 2023.02.14 |
| HTML 태그 - table (0) | 2023.02.11 |
| HTML - Favicon이란? (0) | 2023.02.08 |
| HTML 태그 - 서식에 사용되는 태그들 (0) | 2023.02.06 |
