-
Tag - 테이블(table) 관련프론트엔드/HTML 2020. 8. 19. 02:15
테이블
웹 문서에서 자료를 정리할 때 자주 사용하는 요소가 바로 행과 열로 이뤄진 테이블이다.
행은 가로 줄을 열은 세로 열을 지칭한다.
열
(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>은 왼쪽 상단에 테이블 이름을 출력해준다.
'프론트엔드 > HTML' 카테고리의 다른 글
Tag - 테이블(table) 관련 3 (0) 2020.08.19 Tag - 테이블(table) 관련 2 (0) 2020.08.19 Tag - 목록(list) 관련 2 (0) 2020.08.19 Tag - 목록(list) 관련 (0) 2020.08.19 Tag - 텍스트 관련 2 (0) 2020.08.18