HTML Table & Display table

Table and Display table

How to use Table

<caption>caption</caption>

<th>tag</th>	<th>description</th>	<th>Etc</th>
<th>th</th>	table head 의 약자로 표의 제목을 쓰는 역할	기본값은 굵은 글씨체에 중앙정렬
<tr>tr</tr>	table row 의 약자로 가로줄을 만드는 역할	기본값은 보통 글씨체에 왼쪽정렬
<td>td</td>	table data 의 약자로 셀을 만드는 역할	기본값은 보통 글씨체에 왼쪽정렬
<td colapan='2'>colspan</th>	column span 의 약자로 셀(가로줄)을 합치는 개수를 지정
<td rowspan='2'>rowspan</td>	row span 의 약자로 셀(세로줄)을 합치는 개수를 지정
border	테이블 경계선 굵기를 지정
width	너비를 지정
height	높이를 지정
cellpadding	셀과 경계선 사이의 여백지정
cellspacing	셀과 셀 사이의 여백
align	셀의 가로줄을 right, left, center 등으로 정렬
valign	셀의 세로줄의 top, middle, bottom 등으로 정렬
bgcolor	배경색 지정
border	경계선의 색깔 지정
위 속성중 빨강색은 HTML5에서 지원되지 않으므로 css를 통해서 지정하는 것이 바람직합니다. rules, summary,frame
table 관련 css 속성
padding	셀의 여백
border-spacing	셀 간격	가로값, 세로값
border-collapse	선 합치기	collapse
border-width	선 두께	픽셀,thin, medium, thick
border-style	선 모양	none, dotted, dashed, solid, double, ridge, inset, outset
border-color	선 색상	색상 이름, RGB,색상코드
background-color	배경 색상	collapse
text-align	block 요소 안에 있는 inline 요소를 정렬한다.	left, right, center, justify
float	묶음 태그(div, p ol. ul, table, img) 에만 사용할 수 있음	left, right, none

How to use Display table

table <table>과 같음

table-row<tr>처럼 가로 줄을 그음

table-cell<td>처럼 셀을 만듬

table-caption<caption>테이블 제목

table-column<col>

table-column-group<colgroup>

table-header-group<thead>

table-row-group<tbody>

table-footer-group<tfoot>

inline-table인라인 블록 안에 테이블을 만듬