Tag - 테이블(table) 관련
테이블
웹 문서에서 자료를 정리할 때 자주 사용하는 요소가 바로 행과 열로 이뤄진 테이블이다.
행은 가로 줄을 열은 세로 열을 지칭한다.
|
열 (column) |
열 (column) |
열 (column) |
열 (column) |
|
|
행 (row) |
1행 2열 |
1행 3열 |
1행 4열 |
1행 5열 |
|
행 (row) |
2행 2열 |
2행 3열 |
2행 4열 |
2행 5열 |
|
행 (row) |
3행 2열 |
3행 3열 |
3행 4열 |
3행 5열 |
|
행 (row) |
4행 2열 |
4행 3열 |
4행 4열 |
4행 5열 |
테이블 만들기
|
<td>~</td> |
<td>~</td> |
<td>~</td> |
|
<td>~</td> |
<td>~</td> |
<td>~</td> |
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
테이블은 <table> 태그를 쓰고 그 안에 행(가로줄)을 나타내는 <tr>을 쓰고 그 안에 또 <td>를 통해 그 안에 내용을 적어준다.
그러면 가로줄을 기준으로 하는 테이블이 완성된다.
제목 쓰기
|
<th>~</th> |
<td>~</td> |
<td>~</td> |
|
<th>~</th> |
<td>~</td> |
<td>~</td> |
<body>
<table>
<tr>
<th> </th>
<td> </td>
<td> </td>
</tr>
<tr>
<th> </th>
<td> </td>
<td> </td>
</tr>
</table>
</body>
테이블에서 제목 부분은 보통 강조해주거나 하는 경우가 많다.
테이블 내부에 내용을 넣어줄 때 <th>를 이용해 제목을 만들어주면 <th>안에 있는 텍스트는 자동 bold처리된다.
테이블의 이름 붙이기
마트목록
|
이마트 |
롯데마트 |
홈플러스 |
|
빅마트 |
이마트 트레이더스 |
코스트코 |
<body>
<table>
<caption> 마트 목록 </caption>
<tr>
<td> 이마트 </td>
<td> 롯데마트 </td>
<td> 홈플러스 </td>
</tr>
<tr>
<td> 빅마트 </td>
<td> 이마트 트레이더스 </td>
<td> 코스트코 </td>
</tr>
</table>
</body>
테이블의 이름이 필요한 경우도 있다. 그럴땐 <table> 태그를 달아준 다음 <caption> 태그를 달고 테이블의 이름을 붙여주면 된다.
테이블의 이름 붙이기 2
마트 목록
|
이마트 |
롯데마트 |
홈플러스 |
|
빅마트 |
이마트 트레이더스 |
코스트코 |
<body>
<table>
<figcaption> 마트 목록 </figcaption>
<tr>
<td> 이마트 </td>
<td> 롯데마트 </td>
<td> 홈플러스 </td>
</tr>
<tr>
<td> 빅마트 </td>
<td> 이마트 트레이더스 </td>
<td> 코스트코 </td>
</tr>
</table>
</body>
<caption>이 테이블의 이름을 테이블 상단 중간에 붙여줬다면 <figcaption>은 왼쪽 상단에 테이블 이름을 출력해준다.