HTML 도표
도표 형태를 <table> 태그로 표현할 수 있습니다.
이 테이블은 다시 <tr> 태그로 테이블 열로 나뉘고, 그 안에서 <td> 태그로 테이블 데이터를 표현합니다.
td 는 '테이블 데이터'를 의미하는데, 이는 모든 HTML 요소들 즉, 문자, 이미지, 목록 또는 다른 테이들도 포함합니다.
테이블 열에서 <td> 태그 대신에 <th> 태그를 사용하면 도표의 머리글로 표현됩니다.
<table style="width:100%;">
<tbody>
<tr>
<th style="text-align:center;">성</th>
<th style="text-align:center;">이름</th>
<th style="text-align:center;">나이</th>
</tr>
<tr>
<td>장</td>
<td>나리</td>
<td>30</td>
</tr>
<tr>
<td>박</td>
<td>봄에</td>
<td>32</td>
</tr>
</tbody>
</table>
테두리는 border 속성으로 표현합니다.
<table style="width: 100%;" border="1">
boder 속성은 표준 문법이 아니기 때문에, CSS 스타일을 사용하는 것이 좋습니다.
<style>
table, th, td {
border: 1px solid black;
}
</style>
이와 같이 CSS 스타일을 적용하면 테이블 뿐아니라 테이블 안의 셀까지도 테두리가 적용됩니다.
셀에 패딩(안쪽 여백)을 적용하면 셀의 내용과 테두리 사에에 여백이 지정됩니다.
별도의 패딩을 지정하지 않으면, 이 테이블 셀은 패딩없이 표시됩니다.
CSS padding 속성을 사용하여 안쪽 여백을 지정할 수 있습니다.
<style>
th, td {
padding: 10px;
text-align: center;
}
</style>
CSS border-spacing 속성으로 테두리 바깥 쪽에 여백을 설정할 수 있습니다.
<table style="width: 100%; border-spacing: 1px;">
몇 개의 셀(Column)을 병합하려면, colspan 속성을 사용합니다.
<style>
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
table {
width: 100%; border-spacing: 1px;
}
</style>
<table style="width:100%;"><caption>옆으로 병합</caption>
<tbody>
<tr>
<th>이름</th>
<th colspan="2">휴양지</th>
</tr>
<tr>
<td>박 봄에</td>
<td>강원도</td>
<td>강릉시 경포대</td>
</tr>
</tbody>
</table>
옆으로 병합
| 이름 |
휴양지 |
| 박 봄에 |
강원도 |
강릉시 경포대 |
이번엔 아래쪽으로 몇개의 셀(Rows)을 병합하려면, rowspan 속성을 사용합니다.
<table style="width:100%;"><caption>아래로 병합</caption>
<tbody>
<tr>
<th>이름</th>
<td>장 나리</td>
</tr>
<tr>
<th rowspan="2">휴양지</th>
<td>경상남도</td>
</tr>
<tr>
<td>오륙도</td>
</tr>
</tbody>
</table>
아래로 병합
| 이름 |
장 나리 |
| 휴양지 |
경상남도 |
| 오륙도 |
위에서 추가로, <caption> 태그를 사용하여 표의 상단에 표 제목을 삽입할 수 있었습니다.
[광고] Udemy 동영상 강의로 보기
