[HTML] 테이블 관련 요소 들

• 테이블 구성 요소
  <table> : 테이블을 만드는 태그
  <th> : 테이블의 헤더부분을 만드는 태그
  <tr> : 테이블의 행을 만드는 태그
  <td> : 테이블의 열을 만드는 태그
  
  
• 기본적인 테이블 디자인 변경 요소
  테이블의 디자인을 바꿀 수 있는 방법은 다양한 방법이 있지만 아래의 요소들이 대표적

속성	의미	예시 or 기능
border	테이블의 테두리	(border="1") 숫자가 높을수록 테두리가 두꺼워짐
bordercolor	테이블의 테두리 색상	(bordercolor="blue") default값은 검정
width	테이블 가로 크기	(width=50px width=100%) 픽셀단위로 크기,비율로 변경 가능
height	테이블 세로 크기	(width=50px width=100%) 픽셀단위로 크기,비율로 변경 가능
align	정렬	테이블안에있는 값들을 정렬
bgcolor	배경색	태그의 배경색을 지정
colspan	가로 합병(열 합병)	셀 합병(열 단위)
rowspan	세로 합병(행 합병)	셀 합병(행 단위)

 

• 테두리 관련 디자인 수정 요소

<table cellspacing="0" style="border-collapse:collapse; width:600px;">
	<tbody>
		<tr>
			<td style="border-bottom:1px solid black; border-left:1px solid black;
            border-right:1px solid black; border-top:1px solid black; height:26px;
            text-align:center; vertical-align:middle; white-space:nowrap; width:249px">
				<h3><strong>좌상단</strong></h3>
			</td>
			<td style="border-bottom:1px solid black; border-left:none;
            border-right:1px solid black; border-top:1px solid black;
            text-align:center; vertical-align:middle; white-space:nowrap; width:274px">
				<h3><strong>우상단</strong></h3>
			</td>
		</tr>
		<tr>
			<td style="border-bottom:1px solid black; border-left:1px solid black;
            border-right:1px solid black; border-top:none; height:51px;
            text-align:center; vertical-align:middle; white-space:nowrap">
				<h3>좌하단</h3>
			</td>
			<td style="border-bottom:1px solid black; border-left:none;
            border-right:1px solid black; border-top:none;
            text-align:center; vertical-align:middle; white-space:normal; width:274px">
				<h3>우하단</h3>
			</td>
		</tr>
	</tbody>
</table>

<셀 단위 테두리 관련 내용>

border-[위치] : 해당 셀의 디자인 적용 위치 (bottom : 하단 / left : 좌 / top : 상단 / right : 우)

none : 테두리 없음
[숫자]px : 테두리의 두께 ( 0: 없음 / 1~ : 숫자가 커질수록 두꺼워짐)
solid : 테두리 선 종류 (solid : 실선 / double : 이중선 / dashed : 파선 / dotted : 점선 / ridge : 입체적으로 튀어나온 느낌의 선 / groove : 입체적으로 들어간 느낌의 선)
black : 색상

<기타 텍스트 관련 내용>
text-align : 글자 정렬 (center : 가운데 정렬 / left : 좌측정렬 / right : 우측정렬)
vertical-align : 셀 안의 글자 높이 정렬 (middle : 중앙 / top : 상단 / bottom : 하단)

• 템플릿

<td style="border-bottom:1px solid black;
			border-left:1px solid black;
            border-right:1px solid black;
            border-top:1px solid black;
            height:26px;
            text-align:center;
            vertical-align:middle;
            white-space:nowrap;
            width:249px">
	<h3><strong>좌상단</strong></h3>
</td>