<table> 태그는 HTML 문서에서 표를 만드는 태그다.
행과 열을 넣기 위해 <tr>, <td>등을 태그 안에 함께 작성한다.
이전에는 웹 페이지의 레이
아웃을 구성할 때 <table> 태그를 이용하여 많이 구성하였다고 한다.
하지만 적당한 사용 방법이 아니므로
레이아웃 구성시에는 <div> 태그와 CSS를 이용하는 것이 좋다.
먼저 테이블 태그를 열어보자
<table border = "1" align="center"></table>
테이블 내부에 border라는 속성은 테두리를 의미한다.
픽셀 값을 넣어 테이블의 윤곽을 설정한다.
픽셀 값, 줄 종류, 줄 색상
ex) 1px, solid, #777
같은 형태로 다양한 값 적용이 가능하다.
픽셀만 정해주도록 하자.
이제 테이블 내부에 tr, td로 행과 열을 넣어야 할 것이다.
align은 맞추다, 즉 정렬의 의미를 가진 속성이다.
VS code에서 작성 시 center, left 등 다양한 내부 값을 자동완성으로 확인할 수 있다.
보기 좋게 화면 가운데 표시되게 center를 주자.
이 border 속성은 내부에 있는 모든 행과 열 요소에도 적용된다.
<table border = "1" align="center">
<tr>
<td>번호</td>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
</table>
<tr> 태그는 표의 행을 나타낸다.
<td> 태그는 열을 나타내고 <tr> 태그 하위에 위치한다.
워드 작업처럼 표의 행과 열을 미리 정하고 작성하는 것이 아닌,
행을 선언하고 그 행의 가로로 쭉 쌓이는 열을 작성하는 방식이다!
이해하기 쉬운 이미지
처음엔 어색하게 느껴져도 이해하면 충분히 쉽게 사용 가능하다.
결과
번호 | 이름 | 성별 | 주소 |
rowspan과 colspan
표를 작성하다 보면 표의 내부 내용을 합쳐야 할 때가 있다.
그런 경우에 rowspan과 colspan을 사용하면 된다.
row = 행, span = 너비
rowspan = 행의 너비
직관적으로 알 수 있다.
<!-- 3행 4열 -->
<table border = "1" align="center">
<tr>
<td>번호</td>
<td>이름</td>
<td>성별</td>
<td>주소</td>
<td rowspan="4">행 합치기</td>
</tr>
<tr>
<td>1</td>
<td>안한량</td>
<td>남</td>
<td>안양</td>
</tr>
<tr>
<td>2</td>
<td>노한량</td>
<td>남</td>
<td>노원</td>
</tr>
<tr> <!-- colspan, rowspan 열, 행 합치기 -->
<td colspan="4">열 합치기</td>
</tr>
</table>
속성을 선언하고 내부에 합칠 칸의 개수를 넣어주면 완성이다.
위 코드를 천천히 읽어보고 결과를 예상해봅시다!
번호 | 이름 | 성별 | 주소 | 행 합치기 |
1 | 안한량 | 남 | 안양 | |
2 | 노한량 | 남 | 노원 | |
열 합치기 |
이렇게 테이블을 만들 수 있는 테이블 태그이다.
'웹 프론트엔드(Web FrontEnd)' 카테고리의 다른 글
[HTML] <video> 태그 사용 방법 (인코딩, controls 속성) (0) | 2022.07.17 |
---|---|
[HTML] <li> 태그 {<ul>, <ol>, 목록(list) 만들기} (0) | 2022.07.17 |
[HTML] <a> 앵커 태그 (href, target, 새 탭으로 열기) (0) | 2022.07.17 |
[HTML] 블록과 인라인의 개념 (특징, 주의할 점) (0) | 2022.07.17 |
[HTML] 태그란? (사용 방법, 태그 종류, 실습) (0) | 2022.07.17 |