[html기초]테이블(table) 태그로 표 만들기!
html에서 표를 만들어야 할 일이 있을 때 사용하는 태그는 <table> 태그입니다. 블로그도 그렇고 워드프로세서, 엑셀 등 다른 프로그램에서도 표를 만들어야 할 일들이 많은데, 이런 프로그램들로 만들 때는 마우스 한 번만 클릭하면 되는데, html로 만들려고 하니, 어렵지는 않은데 손이 많이 가는 것은 사실이네요ㅠㅎ 그래도 html을 이용하면 보여지는 기능이 아닌 많은 기능들을 사용할 수 있다는 장점이 있다고 생각이 됩니다. <table> 태그를 이용하여 다양하게 응용하여 색다른 표를 만들 수 있을 것 같습니다!
표 만들기
| 태그 | 내용 | |
| <table> | 표를 만드는 태그 | |
| <th> | 표의 제목 부분을 만드는 태그 | |
| <tr> | 표의 행(가로)을 만드는 태그 | |
| <td> | 표의 열(세로)을 만드는 태그 |
테이블을 만드는 순서
-
<table></table> 태그를 만들어 줍니다. (테이블 시작 태그를 했다면, 반듯이 끝나는 </> 태그도 해줍니다.)
-
<th></th> 태그를 만들어 제목 부분의 태그를 만듭니다. (기본값으로 '진하게'와 '가운데 정렬'이 됩니다.)
-
행을 만드는 <tr> 태그입니다.
-
그 밑으로 <td> 태그를 이용하여 열을 만들어 줍니다.
<table> 태그 안으로 제목 줄을 넣는 <th> 태그, 그리고 그 밑으로 <tr> 태그로 한 줄 바꾸고, <td> 태그를 넣어 한 칸을 삽입합니다.
* <table> 태그에 선을 넣기 위해서 <table border="1">을 넣어줍니다. "1"은 선 굵기로 숫자가 커지면 선의 두께가 굵어집니다!
표의 디자인 변경
| 속성 | 내용 | |
| 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은 셀의 세로를 합병시켜 줍니다.
표를 꾸밀 수 있는 디자인을 만들어 봤습니다. 프로그램을 이용하면 마우스 한 번이면 가능했던 일들이 이런 노가다로 만들어지네요...ㅎ