컴퓨터 관련/태그

html table 태그 완전정복

승명 2016. 3. 11. 14:07

 

html table 태그 완전정복!

2016.02.29. 13:49

URL 복사
본문 기타 기능

html table 태그 완전정복!

html 소스를 활용하다보면
table을 사용해야 할때가 많은데요.

특히 저같은 경우는
위와 같이 색상코드를 정리할때 사용하곤합니다.
그럼 오늘 html table 태그를 완정 정복해보도록하겠습니다! :)


!!! 일단 아래 테이블태그 소개는
기본으로 html 편집기를 사용할줄 아는단계부터 소개되고있습니다.

html 편집기와 html 기본구조 사용법은 아래포스팅을 확인해주세요.
http://blog.naver.com/gnfnfnr04/220623571797



일단 html table 관련 태그는 아래와 같이 구성됩니다.

 

테이블 태그


<table border="선굵기" width="가로" height="세로" bordercolor="선색"
cellpadding="셀간여백" cellspading="셀과내용의여백" background="테이블배경이미지"
frame="바깥쪽테두리" rules="안쪽테두리(none,cols,rows) align="정렬">
<tr>줄
<td>칸</td>
</tr>
</table>

 

table 태그안에는 <tr>과 <td>태그로 구성이 되어있는데요.

셀의 세부내용은 <td>에서 설정합니다.


<td bgcolor="셀배경색" colspan="가로병합" rowspan="세로병합" align="가로정렬"
vlign="상하정렬(top,middle,bottom)" nowrap(셀줄바꿈금지)>

그럼 위의 그림에 있는 표처럼
html table 태그를 작성하려면 어떻게 해야할까요?

 

테이블태그 소스

<table border="1" bordercolor="#cccccc" width="300" height="300" cellpadding="10" cellspacing="0">
<tr>
<td width="300" height="100" colspan="3">
첫줄 첫째칸 </td>
</tr>
<tr>
<td height="200" rowspan="2">두번째줄 첫째칸</td>
<td>두번째줄 둘째칸</td>
<td>두번째줄 셋째칸</td>
</tr>
<tr>
<td>세번째줄 둘째칸</td>
<td>세번째줄 셋째칸</td>
</tr>
</table>

위와같이 colspan과 rowspan을 이용하여
테이블 셀크기를 병합할수있습니다.

그럼 html table 태그를 응용해보도록 하겠습니다.

테이블안에 이미지 배경을 넣거나,
셀안에 이미지 삽입이 가능합니다.

배경색변경은 <bgcolor="색상">을 원하는 태그안에삽입합니다.

배경이미지는 원하는 태그안에 <background="주소">를 넣어주고,
셀안의 이미지삽입은 <td>태그안에 <img src="주소">태그를 넣어주면 됩니다.

이미지 태그 삽입방법은 다음 포스팅을 참고해주세요.
http://blog.naver.com/gnfnfnr04/220629858454

 

테이블 셀안에 또 테이블을 작성하여 중첩테이블이 가능합니다.

또한 테이블 셀안의 정렬을 할경우
valign="top,middle,bottom"으로 상하정렬이 가능하며
align="center,left,right"로 좌우정렬이 가능합니다.

아래 예시를 확인해주세요.

테이블 태그 소스

<table border="1" bordercolor="#cccccc" width="300" height="300" cellpadding="0" cellspacing="0" background="img/bg-checkpink.jpg">
<tr bgcolor="pink">
<td width="300" height="100" colspan="3" align="center">

/* 테이블하나추가 */ <table border="1" bordercolor="#ffffff" cellspacing="0" width="150" height="50" align="center">
<tr>
<td align="center"> 중첩테이블 </td>
</tr>
</table> /* 중첩테이블끝 */

</td></tr>

<td height="200" width="100" rowspan="2" valign="top">
위로정렬 </td>

<td><img src="img/img1.jpg" width="100" height="100">이미지삽입</td>

 <td valign="top" align="right">오른위정렬</td>

</tr>

<tr>
<td width="100" height="100" valign="bottom">아래정렬</td>
<td align="right" bgcolor="#ffffff">오른정렬</td>
</tr>

</table>

 

 

 

지금까지 테이블 만드는 기본방법에 대하여 소개해드렸는데요.

html5가 나오면서
이제 태그를
<head>부분에 <style>태그안에 작성하게 되었죠.

위 그림에서 html 태그안에 head 태그 안에
style 태그안에 table 태그가 보이실겁니다.

table 태그를 위처럼 작성하게되는건데요.


 

그럼 위 html table 태그를 한번 작성해보겠습니다.

일단 body 태그안에 div 태그를 만들어야겠죠.

div 태그 안에 <h1>태그를 이용하여 제목을 작성해줍니다
<h1> Pantone Fashion Colors Spring 2016 </h1>

html5 table 태그

<body>

<div id="table">  
  /*여기서 id는 자신이 원하는 id로 지정해줍니다 */
<h2>제목<h2>

<table>

<tr>
<td>내용작성</td>
</tr>

</table>

</div>

</body>

위와 같이 테이블 기본 구조를 작성한후
<tr><td><td></tr>태그를 이용해
테이블 내용을 작성합니다.

여기서 첫번째줄 pantone / color / cmyk / hex 처럼 4칸짜리 표를 만들경우
첫번째줄 <tr> 태그를 넣은후 </tr>사이에
<td>pantone</td>
<td>color</td>
<td>cmyk</td>
<td>hex</td>
라고 작성해주시면되겠죠.

계속 반복하여 작성해줍니다.
아래 완성본과 한번 비교해보세요.

html5 table 태그 예시

    <div id="table">
     <h2>Pantone Fashion Colors Spring 2016</h2>
     <br>
     <table border="0" cellspacing="0">
     <tr>
      <td >PANTONE</td>
      <td>COLOR</td> 
      <td>CMYK</td> 
      <td>HEX</td>
     <tr>
      <td>13-1520</td>
      <td>Rose Quartz</td>
      <td>0.24.15.0</td>  
      <td>#f7cac9;</td>
     </tr>
     <tr>
      <td>16-1548</td>
      <td>Peach Echo</td> 
      <td>0.65.53.0</td> 
      <td>#f7786b</td>
     </tr>
     <tr>
      <td>15-3919</td>
      <td>Serenity</td> 
      <td>42.24.3.0</td> 
      <td>#91A8d0</td>
     </tr>
     <tr>
      <td>19-4049</td>
      <td>Snorkel Blue</td> 
      <td>100.49.7.13 </td>
      <td>#034f84</td>
     </tr>
     <tr>
      <td>12-0752</td>
      <td>Buttercup</td> 
      <td>2.3.91.0</td> 
      <td>#fae03c</td>
     </tr>
     <tr>
      <td>13-4810</td>
      <td>Limpet Shell</td> 
      <td>34.0.18.0</td> 
      <td>#98ddde</td>      
     </tr>
     <tr>
      <td>16-3905</td>
      <td>Lilac Gray</td> 
      <td>37.31.22.11</td> 
      <td>#9896a4</td>
     </tr>
     <tr>
      <td>17-1564</td>
      <td>Fiesta</td> 
      <td>2.85.89.0</td> 
      <td>#dd4132</td>
     </tr>
     <tr>
      <td>15-1040</td>
      <td>Iced Coffee</td> 
      <td>21.36.57.18</td> 
      <td>#b18f6a</td>
     </tr>
     <tr>
      <td>15-0146</td>
      <td>Green Flash</td> 
      <td>49.0.83.0</td> 
      <td>#79c753</td>
     </tr>
     </table>

테이블 태그를 작성한 후에는
head태그안에 style 태그에서 작성합니다.

일단 스타일을 시작할때
* {margin:0; padding:0; color:#666666;}
로 margin 과 padding 초기화를 시켜논후 작업을 진행하였습니다.

일단 셀각각의 크기를 지정해줍니다

td {width:가로크기px; height:높이크기px; text-align:정렬; color:글씨색;}

그뒤 nth-child 선택자태그를 통해
각 줄의 배경색을 설정해주었습니다.

tr:nth-child(선택번호) {background-color:배경색;}
tr:nth-child(선택번호) td {color:글씨색;} /*선택한 태그의 td의 글씨색을 설정합니다.


    table {}
    
    td {width:130px; height:30px; text-align:center; color:#ffffff;}
    tr:nth-child(1) {background-color:#cccccc;}
     tr:nth-child(1) td {color:#333333;}
    tr:nth-child(2) {background-color:#f7cac9;}
    tr:nth-child(3) {background-color:#f7786b;}
    tr:nth-child(4) {background-color:#91A8d0;}
    tr:nth-child(5) {background-color:#034f84;}
    tr:nth-child(6) {background-color:#fae03c;}
    tr:nth-child(7) {background-color:#98ddde;}
    tr:nth-child(8) {background-color:#9896a4;}
    tr:nth-child(9) {background-color:#dd4132;}
    tr:nth-child(10) {background-color:#b18f6a;}
    tr:nth-child(11) {background-color:#79c753;}

이밖에도 다양한 방법으로

테이블을 원하는 입맛에 따라
설정하실 수있으실텐데요

html table 태그에 관해
궁금한점이 있으시다면!
바로 댓글달아주세요

즐거운하루되세요 :)

'컴퓨터 관련 > 태그' 카테고리의 다른 글

태그 하이퍼링크 걸기  (0) 2017.01.14
각종 글자 태그  (0) 2016.03.20
HTML 태그배우기(태그소스-750개)  (0) 2016.02.27
태그100가지  (0) 2016.02.27
[스크랩] 태그제한 수정하는 방법  (0) 2016.02.14

'컴퓨터 관련/태그'의 다른글

  • 현재글html table 태그 완전정복

관련글

티스토리툴바