[html기초]테이블(table) 태그로 표 만들기!

html에서 표를 만들어야 할 일이 있을 때 사용하는 태그는 <table> 태그입니다. 블로그도 그렇고 워드프로세서, 엑셀 등 다른 프로그램에서도 표를 만들어야 할 일들이 많은데, 이런 프로그램들로 만들 때는 마우스 한 번만 클릭하면 되는데, html로 만들려고 하니, 어렵지는 않은데 손이 많이 가는 것은 사실이네요ㅠㅎ 그래도 html을 이용하면 보여지는 기능이 아닌 많은 기능들을 사용할 수 있다는 장점이 있다고 생각이 됩니다. <table> 태그를 이용하여 다양하게 응용하여 색다른 표를 만들 수 있을 것 같습니다!

---

표 만들기

	태그	내용
	<table>	표를 만드는 태그
	<th>	표의 제목 부분을 만드는 태그
	<tr>	표의 행(가로)을 만드는 태그
	<td>	표의 열(세로)을 만드는 태그

테이블을 만드는 순서

• <table></table> 태그를 만들어 줍니다. (테이블 시작 태그를 했다면, 반듯이 끝나는 </> 태그도 해줍니다.)

• <th></th> 태그를 만들어 제목 부분의 태그를 만듭니다. (기본값으로 '진하게'와 '가운데 정렬'이 됩니다.)

• 행을 만드는 <tr> 태그입니다.

• 그 밑으로 <td> 태그를 이용하여 열을 만들어 줍니다.

table.html

<table> 태그 안으로 제목 줄을 넣는 <th> 태그, 그리고 그 밑으로 <tr> 태그로 한 줄 바꾸고, <td> 태그를 넣어 한 칸을 삽입합니다.

* <table> 태그에 선을 넣기 위해서 <table border="1">을 넣어줍니다. "1"은 선 굵기로 숫자가 커지면 선의 두께가 굵어집니다!

table.html의 결과

---

표의 디자인 변경

	속성	내용
	border	표의 테두리 넣기
	bordercolor	표의 테두리 색상
	width	표의 가로 크기
	height	표의 세로 크기
	align	정렬 (right, left, center)
	bgcolor	표의 배경색
	colspan	가로 합병
	rowspan	세로 합병

• table에 테두리 선을 설정해 주는 속성입니다. {border:1px;} 하면 테이블의 선이 1로 나타납니다. 픽셀이 커질수록 선이 두꺼워집니다.

•  bordercolor는 테두리의 색상을 지정! {bordercolor:red}로 하면 테이블의 선색이 빨간색이 됩니다.

• width값은 테이블의 가로 크기를 지정해줍니다.

• height값은 테이블의 세로 크기를 지정해줍니다.

• align은 테이블 안에 들어가는 값들을 좌, 우, 가운데로 정렬시켜줍니다. ex) {text-align:center;}

• bgcolor는 태그의 배경색을 변경시켜 줍니다.

• colspan은 셀의 가로를 합병시켜 줍니다.

• rowspan은 셀의 세로를 합병시켜 줍니다.

표 디자인 변경.html

표를 꾸밀 수 있는 디자인을 만들어 봤습니다. 프로그램을 이용하면 마우스 한 번이면 가능했던 일들이 이런 노가다로 만들어지네요...ㅎ