표-table

이번 시간에는 table 태그를 정리하려고 합니다.

table 태그는 문자열 또는 이미지를 [행]과 [열]로 표시하는 태그인데요.

웹화면의 구성 요소를 원하는 형태로 배치할 때,

데이터베이스에서 데이터를 가져와 출력할 때 많이 사용 됩니다.

그럼 태그 예제 형식에 대해 공부해봅시다.

 

table을 만들 때의 가장 쉬운 예

표를 구현한 모습

<table>태그는 테이블을 만드려면 선언해야 하는 태그에요.

<table>태그 안에 이제 <tr>,<th>,<td> 같은 행과 셀을 위한 태그가 있습니다.

<tr>은 한 행을 지배하는 태그로, 그 안에 <th>나 <td>를 가지고 있습니다.

<th>는 한 셀을 지배하는 태그로, 문자가 자동으로 중앙 배치되고 글자가 두꺼워지는 특징이 있습니다.

<td>도 한 셀을 지배하는 태그지만, 문자가 자동으로 왼쪽으로 배치되고 글자가 두껍지 않은 특징이 있습니다.

 

여기서 응용을 한 번 해봅시다.

 

코드는 이렇게

 

결과입니당.

table을 선언할 때 옆에 속성들이 적혀있는데

border는 표 전체의 선 두께값 설정

cellspacing은 셀과 셀 사이의 여백을 설정

cellpadding은 셀과 셀 안의 문자 사이 여백을 설정하는 속성입니다.

tr 에 bgcolor란 배경색을 설정하는 속성입니다.

 

예문을 보면 김씨가 전공총점과 부전공총점이 4.0으로 같기 때문에 열을합치는 colspan을 사용해

좀 더 보기편하게 만들었습니다.

rowspan을 사용하면 지정한 개수의 행만큼 셀을 합치는 기능도 있습니다.(저는 사용안함!)