'셀 테두리와 셀 내용'에 해당되는 글 1건

html과 html5의 테이블 속성 알아보기

지난 번에 테이블에 관해서 설명을 한적이 있는 것 같은데
오늘은 좀 더 쉽게 이해할 수있도록 포스팅을 작성합니다.

기본 html에서도
<table>~</table>, <tr>~</tr>, <td>~</td>, <th>~</th>와

같은 속성들은 html5에서 적용을 어떻게 하느냐 하는 것인데요

제가 몇몇 html5의 index파일을 보았는데 좀처럼
위 테이블 속성이 보이지 않았어요

아무튼 기초적인 것들을 다시 한번 학습하고 html5에서
테이블 속성을 알아 보겠습니다.

1. <table>~</table>

이 태그는 표를 만들기 위해서 태그가 여러 개가 사용이 되는데

그 것들의 시작과 끝을 나타내는 태그입니다.

2. <tr>~</tr>

이​ 태그는 행을 추가하는 태그입니다.

3. <td>~</td>

이 태그는 <tr>~</tr> 태그 안에서 사용이 되며

셀 하나를 추가하는 태그입니다.

4. <th>~</th>

이 태그는 <td>~</td> 태그와 마찬가지로 셀 하나를 추가하는 태그로

내용을 셀의 가운데 배치하고 굵게 표시하여

제목을 나타내는데 많이 사용되는 태그입니다.

<table>~</table>로 표의 시작과 끝은 지정해 주고

그 사이에 <tr>~</tr>태그를 표를 만들어 주었습니다.

그런 후 각각의 <tr>~</tr>태그 사이에

<th>~</th>태그로 그 행의 제목을 지정해 주고

<td>~</td>태그를 2개씩 작성을 해줘서

제목 열을 빼고 3행 2열의 표를 작성 해주었습니다.

웹페이지에 표를 작성 하실 때 글씨가 있는 부분에

각각의 원하는 내용들을 적어 주시면 됩니다.

하지만 이 태그를 이용해서 표를 작성을 하면 CSS를 이용해서

스타일을 지정하지 않는 이상 표의 모양은 나타나지 않습니다.
​

아직은 CSS에 대해서 배우지 않았으니

간단히  CSS를 이용하지 않아도

표의 모양을 나타낼수 있는

​이 태그의 몇가지 속성에 대해서 말씀드리겠습니다.

기본 형태는 <table 속성="속성값">의 형태입니다.

위의 사진을 보면 맨위에

 <table width="300" height="200" border="1" cellpadding="5" cellspacing="1">

이라고 쓰여진 것을 보실수 있으실 것입니다.

이 것이 표의 모양을 나타내기 위해서  사용해준 속성들 입니다.

(1) width : 표의 넓이를 나타내는 속성입니다.

              픽셀 단위와 %단위로 속성값을 지정할수 있습니다.

(2) height : 표의 높이를 나타내는 속성입니다.

              픽셀 단위와 %단위로 속성값을 지정할수 있습니다.

(3) border : 테이블 테두리의 두께를 지정하는 속성입니다.

(4) cellpadding : 셀 테두리와 셀 내용 사이의 간격을 지정하는 속성입니다.

(5) cellspacing : 각 셀간의 간격 지정을 하는 속성입니다.

직장을 다니면서 투잡(알바/부업)으로 월급 많큼 수익을 얻고 싶으시다면  

아래 접속하셔서 상담받아 보실 수 있습니다. (믿음의 재택부업회사)