오늘은 HTML의 태그중에 table태그입니다.
간단히 말해서 표를 만드는 태그라고 할 수 있는데요.
표를 만들때도 사용하지만 웹사이트의 프레임 구조를 잡을때 더욱 많이 사용한다고 해요!
기본 문법은
<table>
<tr>
<td>
</td>
</tr>
</table>
입니다.
<tr> 태그는 Table Row의 약어로써 테이블의 행을 나타냅니다.
<td>태그는 테이블의 행을 나타냅니다.
간단하게 표를 이렇게 나타낼 수 있습니다.
다음은 table태그에서 사용되는 여러가지 속성들을 알아볼께요!
<table / tr / td 태그 공통속성>
align="정렬방식" (left / right / center 등)
width="숫자" (가로길이_px 또는 %로 입력)
height="숫자" (세로길이_px 또는 %로 입력)
background="파일경로" (배경 이미지 설정)
bgcolor="색상" (배경색 설정)
<table 태그 속성>
border="숫자" (테이블 테두리 두께 지정)
cellspadding="숫자" (셀 내부 여백 지정)
cellspacing="숫자" (셀 사이의 간격을 지정)
<tr 태그 속성>
valign="정렬 방식" (top / middle / bottom 등 행의 수직 정렬 방식 지정)
<td 태그 속성>
valign="정렬 방식" (top / middle / bottom 등 행의 수직 정렬 방식 지정)
rowspan="숫자" (행 칼럼을(세로방향) 숫자만큼 병합)
colspan="숫자" (열 칼럼을(가로방향) 숫자만큼 병합)
HTML문서 전체를
<head></head>
<body></body>
<footer></footer>
로 나누는 것과 마찬가지로
테이블도 나눌 수 있습니다.
<thead> </thead>
<tbody> </tbody>
<tfoot> </tfoot>
으로 나눌 수 있습니다.
사용 문법이 조금 다른데요....
사용 하는 순서는
<thaed> </thead>
<tfoot> </tfoot>
<tbody> </tbody>
이런 문법으로 써야 보여질때 바로 보여진답니다!
이 사진을 보고 활용해서 만들어 볼께요!!ㅎㅎ
출처(http://blog.naver.com/wsdcaptain/220552500066)입니다.
네이버에서 그냥 이미지 하나 가져와 봤어요!ㅎㅎ
제가 짠 소스에 대한 결과는 이렇게 나왔습니다!
'Web > HTML' 카테고리의 다른 글
| HTML 의 반응형 (0) | 2017.03.06 |
|---|---|
| HTML의 Image넣기 (0) | 2017.03.02 |
| HTML에서 목록으로 나타내기 (0) | 2017.03.02 |
| HTML의 Link속성 (0) | 2017.03.02 |
| HTML 글씨체 (0) | 2017.03.02 |
댓글