[HTML 기초] 웹페이지에 테이블 태그로 표만들기

[HTML 기초] 웹페이지에 테이블 태그로 표만들기

안녕하세요, 친절한효자손 이에요~

오늘은 HTML 태그를 써서, 간단한 표를 만들어 보는 시간을 가졌어요^^

까먹기 전에 얼른 포스팅을 해 놓도록 할께요~!

물론 웹에디터 처럼 고급 프로그램으로 한번에 다 할수 있지만,

그래도 기본은 정말 중요하기에~ 그래서 저도 배우는 것이구요^^

분명 잘 익혀두면, 언젠간 유익하게 사용할 날이 올거에요~

이번에 배운 HTML 수업에서는, 표를 넣어보는 방법을 배우는데요~

표를 HTML에 넣기 위해서는 <table> 태그를 사용해요.

벌써 HTML 포스팅 세번째 인데, 전혀 HTML에 대해 모르고 계신다면,

처음부터 찬찬히 읽어 보시면, 아마 이해가 되실 꺼에요^^;

위에서 예제로 들어놓은 방법에서는,

기본 <table> 태그가 들어가고, 그 안에, <tr> 그리고, <th>, <td> 등의 태그를 보실 수 있는데요,

<tr> : 표에서 가로(행) 를 지정해줄때 쓰이는 태그에요. 반드시 <tr> 먼저 들어가게 되어 있구요~

<th> : 셀 하나를 만들고, 가운데 정렬 및 굵은 글씨를 표현할때 쓰는 태그에요. 주로 표 중에서 메뉴 항목에서 많이 쓰이죠?

<td> : 마찬가지로, 셀 하나를 만드는 태그이며, 보통 글씨로 되고 왼쪽 정렬이 기준이 되지요.

자~ 이렇게 HTML에서 표현이 되는 것이죠^^

이번엔, 셀 테두리의 굵기를 바꿔보도록 하지요.

태그는, <table border="숫자"> 이렇게 쓰이구요, 테이블 태그 안에다가 보더만 쓰면 되지요^^

이런식으로 저는 굵기를 5 정도로 줘봤어요.

그러면, 이렇게 굵게 테두리가 나오게 되지요^^

이번엔 셀 테두리 색상 및 샐 안쪽 색상을 변경해 볼까요??

아까, 굵기를 바꾸는데 border 태그를 쓴다고 했죠?? 그럼 응용해서 생각해 보자면??

그렇죠~ 테두리 색상 변경은, bordercolor 가 태그명령어가 되겠지요^^

그리고, 셀안쪽 색상은, bgcolor 로 넣으면 되구요~

중요한 것은, 이 모든 태그명령어가 table 태그 안쪽에 들어가야 정상적용이 되는것!

아시겠지요??

짜잔~! 이렇게 들어가게 되는 것이지요^^

이제 색상변경등으로 응용을 해 보자구요^^

이렇게 응용이 가능하게 되지요^^

하나하나 따라하면, 절대로 어렵지 아니해요~!!

행을 더 만들기 위해서는, <tr> 을 그만큼 많이 쓰면 행이 늘어나구요~

안쪽에 셀 갯수가 많이 들어가기 위해서는, <th> 또는 <td> 태그가 그마만큼 많이 쓰이면, 셀 갯수도 가로로 많이 늘어나게 될 것이에요^^

예시만 해 보면 실력이 안늘어요.

기본을 바탕으로 응용까지 해 보시는 것이야말로~!

진짜 고수로 가는 지름길이죠^^

다음 포스팅때는, 테이블 태그를 이용해서, 셀 가로로 합치기와 세로로 합치기를 알아볼께요^^

기대해 주세요~!