[HTML/CSS] table 구조 및 CSS 이용 간단한 형태 제작

Table : 표 형식으로 이루어진 페이지

• 행과 열로 이루어진 표
• 기본 가로 행 내부에 여러 셀을 담아 제작하도록 되어있다.
• HTML 요소내부에 디자인하는 경우도 있으나 현대에는 CSS에서 제작
• 예시 : 게시판, 주식관련 표

---

Table 기본 구조

• caption : 테이블의 제목
• tr : 테이블의 행
• td : 테이블의 열
• th : 테이블의 헤더 부분
  • 작성 순서 — tr코드 먼저 입력한 뒤 th와 td 코드 입력<th>헤더</th><td>열1</td><td>열2</td>
  • </tr>
  • <tr>
• thead(제목), tbody(본문), tfoot(통계) : 내부에서 역할을 처리하기 위해 만든 영역으로, tr을 감싸는 요소. thead와 tfoot은 생략가능, 순서 바꾸기 가능
• colgroup : 열을 그룹으로 묶을 수 있도록 해주는 태그
• col : colgroup의 자손으로, 열단위를 나눌 수 있음. class 속성 이용해 각 열 이름 지정 가능, span 속성 이용해 열 그룹으로 묶기 가능
  • ex) <col class=”001”; span=”2”>

가로/세로 셀 병합 방법

• colspan=”2” → 자기 자신을 포함해 밑으로 두 칸 셀 병합
• rowspan=”2” → 자기 자신을 포함해 오른쪽으로 두 칸 셀 병합
• 셀 병합 한 뒤 밑/오른쪽 행의 열 부분 (th,td)을 지워야 정상적으로 병합됨. 삭제 안하면 한 칸씩 밀림

---

Table 내 CSS 사용

기본 문법 : <style> 요소 선택 {속성명:속성;} </style>

단위값이 0인 경우에는 별도의 단위명을 사용하지 않는다.

서로 다른 영역에 동시 적용 가능

(ex. th, tr {border-color : white;} → th와 tr에 동시에 테두리 색이 하얀색으로 적용됨

• border-style : 테두리 스타일
• border-width : 테두리 두께
• border-color : 테두리 색, 기본색 검정
• width : 테이블 너비
• height : 테이블 높이
• min-height : 아무 데이터도 없을 때 최소 테이블 높이
• font-weight : 폰트 굵기
• background-color : 배경색
• color : 글자 색
• align : 정렬
• border-spacing : 테두리 간 간격
• border-collapse : collapse → 중첩, 테두리 간 간격 0

 

코드 입력시 나타나는 결과