국비지원학원/HTML,JavaScript,jQ

67일차-HTML_table tag

초코맛 2019. 1. 26. 23:32
반응형
-table_tag
  • 표:데이터를 보여줄 때 사용 <<로 썻었으나 지금은 div를 더 많이 사용 HTML5에서는 지원하지 않는다 -호완성이 좋아 다 써지긴함>>
  • <table>,<tr>,<th>,<td>,<thead>,<tbody>,<tfoot>로 구성
  • 테이블 시작
    • <table border="테두리선 두께" width="테이블의 넓이" height="테이블의 높이" align="테이블의 정렬(수평정렬로 left,center,right)" bordercolor="선색 변경(영어|RGB)" bordercolordark="진한선 색변경" bordercolorlight="밝은선(흐린선) 색" bgcolor="바닥색 변경" background="이미지" cellspacing(칸사이 여백을 의미)="td사이 여백" cellpadding(테이블이 만들어지면 cell이라는 칸안에 여백이 생기는데 그 여백)="td내 여백">
    • <<대부분~~거의 쓰지 말라고 나올것! 다 CSS에서 하는 일이다.>>
  • 행만들기
    • <tr bgcolor="행의 바닥색" background="이미지" height="행높이" align="정렬(tr하위에 있는 td정렬로 letf,center,right)" valign="정렬(td하위에 있는 td정렬로 top,middle,bottom">
  • 테이블 컬럼명(table header) 만들기 -들어가는 문자열은 자동으로 진하고 가운데 정렬이 된다.
    • <th width="넓이" hight="높이" align="letf,center,right" valign="top,middle,bottom" colspan="합칠 칸의 수" rowspan="합칠 행의 수">
  • 테이블의 칸(컬럼) 만들기-들어가는 문자열은 일반글자,왼쪽정렬이 기본
    • <td width="넓이" height="높이" align="letf,center,right" valign="top,middle,bottom" colspan="합칠 칸의 수" rowspan="합칠 행의 수" background="바닥 이미지" bgcolor"바닥색"> 

        

  • theader,tbody,tfoot이 테이블을 보기 편하게 만들어 준다.

    테이블의 구성중  header부분(-컬럼명부분 의미적)을 명시              

    • <thead>
           <tr>
                <th>       </th>
           </tr>
      </thead>
    • 눈에 보여지지 않고 코드상의 데이터를 구분하는 용도로 사용 <<이걸쓰면 무조건 브라우저의 맨위에서 보여준다.>>
    • 소스의 작성 위치에 상관없이 가장 위로가서 보여진다.
  • 테이블의 구성중 body(데이터를 보여주는)부분 명시
    • <tbody>
         <tr>
             <td>       </td>
         </tr>
         <tr>
             <td>       </td>
         </tr>
      </tbody>
  • 테이블의 구성중 footer 부분 명시
    • <tfoot>
           <tr>
                <td>           </td>          =>결과를 보여주는 코드
           </tr>
      </tfoot>
    • 눈에 보이지 않고 코드상의 결과를 보여주는 용도로 사용
    • 소스작성 위치에 상관없이 가장 아래부분에 뿌려진다.
<<테이블은 속성의 상속이 가능하여 td하나하나 속성을 줘도 되지만, tr에 속성을 주면 td에 전부 적용된다.>>
<<table 속성에는 valign 이 없고  tr속성에는 width가 없다..>>

 

 


*복잡한 모양의 테이블
  • 칸 합치기 : colspan ="합칠 칸의 수"
    •  테이블의 크기(2*2,2*4,,,같은)만큼 데이터를 넣는다고 가정했을때 그수만큼 td를 넣게되는데, 칸을 합칠경우 합치는 칸의 수-1만큼 칸을 밀어내기 때문에 그만큼의 td를 제거해야 한다.
  • 행 합치기 : rowspan="합칠 행의 수"
    •  마찬가지로 행을합쳐 그만큼 밀어내는데, 밀어내는게 컬럼을 위처럼 똑같이 오른쪽으로 밀어낸다. 따라서 합치는 칸의 수-1만큼 바로아래의 줄부터 합치는 행의 해당하는컬럼의 td를 줄수만큼 지워내야 한다.

       

      =>칸은 옆을 지우고 행은 아래의 td들을 지워준다 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자주가는 site</title>
</head>
<body>
<strong>자주가는 site 목록</strong><br/>
<table border="1" cellspacing="0" bordercolor="#555555">
     <thaed>
     <tr>
           <th width="40">번호</th>
           <th width="120">이름</th>
           <th width="100">나이</th>
           <th width="300">자주 방문하는 site</th>
     </tr>
     </thaed>
     <tbody>
     <tr>
           <td>1</td><td>ooo</td><td>10</td>
           <td>
                <a href="https://google.com"><img  src="../common/images/google.png" width="60" alt="구글"/></a>
                (<a href="https://google.com"  target="_new">새창으로</a>)
                <!-- 이미지로 링크를 넘겨주려면 앞뒤 공백을 주면  안된다 이상해짐 -->
           </td>
     </tr>
     <tr>
           <td>2</td><td>***</td><td>15</td>
           <td>
                <a href="https://daum.net"><img  src="../common/images/daum.png" width="60" alt="다음"/></a>
                (<a href="https://daum.net"  target="_new">새창으로</a>)
                <!-- 이미지로 링크를 넘겨주려면 앞뒤 공백을 주면  안된다 이상해짐 -->
           </td>
     </tr>
     <tr>
           <td>3</td><td>%%%</td><td>18</td>
           <td>
                <a href="https://naver.com"><img  src="../common/images/naver.png" width="60" alt="네이버"/></a>
                (<a href="https://naver.com"  target="_new">새창으로</a>)
                <!-- 이미지로 링크를 넘겨주려면 앞뒤 공백을 주면  안된다 이상해짐 -->
           </td>
     </tr>
     </tbody>
     <tfoot>
     <tr>
           <td colspan="2" align="center">총계</td><td colspan="2" align="center">총 3개의 site</td>
     </tr>
     </tfoot>
</table>
</body>
</html>


-Markup Language의 특수문자 태그
  • 특별한 기능을 가진 문자열
  • 문법 : &문자열 ;
    • <<공백을 아무리 띄어도 하나밖에 들어가지 않는데 이 특수문자를 쓰면 공백을 여러개 넣을수 있다>>
    • 공백 : &nbsp;
    • <<마크업언어는 <로 시작하기 때문에 <를 붙여 마크업언어를 작성해야 태그로 인식>>
    • < : &lt;
    • > : &gt;
    • <<특수문자의 시각문자라 구분위함>>
    • & : &amp;
    • <<원형안에 문자>>
    • c : &copy;
    • <<잘쓰진않지만 모르면 아쉬워>>
    • " : &guot;

<!DOCTYPE html>

 

<html>

<head>
<meta charset="UTF-8">
<title>특수문자</title>
</head>
<body>
<!-- 공백 (white space: space bar, tab을 눌러 공백을 입력한 경우 -->
<!-- 웹 브라우저는 여러번의 공백을 입력하여도 한번의 공백만 출력한다. -->
<!-- &nbsp; -공백처리 -->
오늘은&nbsp;&nbsp;&nbsp;&nbsp;불금입니다.<br/>
<!-- <는 태그를 시작할 때 사용하는 기호 -->
&lt;br/&gt; : 줄변경에 대한 일 <br/>
&lt;p&gt; : 문단을 나누는 일<br/>
&amp;nbsp; : 공백한칸을 만드는 일.<br/>
copyright &copy;ⓒ<br/>
오늘은 &quot;금요일&quot; 입니다.<br/>
</body>
</html>

 




반응형
저작자표시

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

69일차-CSS  (0) 2019.01.30
68일차-HTML Form Control  (0) 2019.01.29
67일차-HTML_div tag  (0) 2019.01.27
66일자-HTML Tag  (0) 2019.01.25
65일차-HTML  (0) 2019.01.24

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글67일차-HTML_table tag

관련글

티스토리툴바