1. 먼저 표 테이블의 기본 구성요소에 대해서 설명 드리겠습니다. HTML 파일을 열어 다음과 같은 코드를 작성합니다.
<body>
<table>
<thead> -------------------- 제목으로 구성된 열들을 가진 행을 표시
<th>제목 열1</th> ------- 제목으로 구성된 각 열을 표시
<th>제목 열2</th>
</thead>
<tbody> -------------------- 표의 내용을 나타내는 행들을 표시
<tr> -------------------- 표의 내용을 나타내는 각 행들을 표시
<td>내용 열1</td> --- 표의 내용을 나타내는 각 열들을 표시
<td>내용 열2</td>
</tr>
<tr>
<td>내용 열3</td>
<td>내용 열4</td>
</tr>
</tbody>
<tfoot> -------------------- 표의 마지막 행을 표시
<tr>
<td>표의 마지막 열1</td>
<td>표의 마지막 열2</td>
</tr>
</tfoot>
</table>
</body>
</html>thead, tbody, tfoot 은 html5에서 정의된 태그로, tr과 td로만 구성해도 문제없습니다.
해당 코드를 실행하면 웹 화면에 다음과 같이 출력됩니다.
뭔가 이상하죠? 우리가 알고 있는 표 테이블이 아닙니다. 표에 테두리 선이 없기 때문입니다.
테두리 선은 CSS의 style을 적용하여 표현할 수 있습니다.
<head> </head> 안에 해당 style을 작성해서 넣으면 스타일이 적용됩니다.
<style>
table {
width: 70%;
border: 1px solid #222;
border-collapse: collapse;
}
thead {
background: #eee;
}
th, td {
border: 1px solid #ccc;
padding: 5px;
font-size:0.8em;
}
</style>코드 실행하면 다음과 같이 화면에 출력됩니다.
style이 적용되었습니다.
추가로 행과 열을 확장하는 속성을 알려드리겠습니다.
[colspan, rowspan]
| 속성 | 설명 | 주요 값 |
| colspan | td 태그에서 사용, 열을 확장 | 확장할 열의 숫자 |
| rowspan | td 태그에서 사용, 행을 확장 | 확장할 행의 숫자 |
<table>
<thead>
<th>제목 열1</th>
<th>제목 열2</th>
</thead>
<tbody>
<tr>
<td colspan="2">열 확장(내용행1,2 합침)</td>
</tr>
<tr>
<td rowspan="2">행 확장(내용행3,5 합침)</td>
<td>내용 열4</td>
</tr>
<tr>
<td>내용 열6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>표의 마지막 열1</td>
<td>표의 마지막 열2</td>
</tr>
</tfoot>해당 코드를 출력하면 다음과 같습니다.
열 확장과 행 확장이 조금 헷갈릴 수 있습니다.
열 확장: colspan="?" 에서 ?에 해당하는 숫자 만큼 열을 차지한다고 생각하시면 편합니다.
ex) colspan="4" 는 열 4개를 합치는 행의 크기.
행 확장: rowspan="?" 에서 ?에 해당하는 숫자 만큼 행을 차지한다고 생각하시면 편합니다.
ex) rowspan="5" 는 행 5개를 합치는 행의 크기.
'개발 > HTML + CSS + JS' 카테고리의 다른 글
| 웹 사이트 만들고 배포_서버는? (1) | 2023.01.25 |
|---|
