03_표 관련 태그

기본적인 표 만들기

표 : 문서에 다량의 데이터를 정리해서 표현하고자 할 때 사용
     행과 열로 이루어져 있음.
[표를 구성하는 태그]
table : 기본적으로 표를 생성해주는 태그
tr : 표의 행 한줄을 나타내는 태그
th : 표의 컬럼명 한칸을 나타내는 태그
td : 표의 열 한칸을 나타내는 태그
<body>
        <table border = "1"> 
            <!-- border 속성 : 표의 테두리 두께 -->
            <caption><b>웹 브라우저 종류</b></caption>
            <!--caption : 테이블의 제목 추가(기본위치는 테이블 상단 중앙)-->
            <tr> <!-- width : 가로길이 / height : 세로길이 단위는 px-->
                <th width="130", height = "20">브라우저명</th>
                <th width="80">제조사</th>
                <th width="200">홈페이지</th>
            </tr>
            <tr>
                <td>Internet Explorar</td>
                <td>MS</td>
                <td>http://www.microsoft.com</td>
            </tr>

            <tr>
                <td>Chrome</td>
                <td>Google</td>
                <td>http://www.google.com</td>
            </tr>
            <tr>
                <td>Firefox</td>
                <td>Mozilla</td>
                <td>http://www.mozila.org</td>
            </tr>
        </table>  
</body>

행과 열을 합치는 속성

셀을 만들어주는 태그(th, td)의 속성으로 지정 가능
colspan : 열을 합치는 속성(colspan="2" : 2개의 열을 합침) => 가로로 합침
rowspan : 행을 합치는 속성(rowspan="2" : 2개의 행을 합침) => 세로로 합침
<body>
        <h3>이력서</h3>
        <table border="1">
            <tr>
                <td width="130" height="130" colspan="2" rowspan = "2">사진</td>
                <td width="80">이름</td>
                <td width="200"></td>
                <!--
                <td></td>
                -->
            </tr>
            <tr>
                <td>연락처</td>
                <td></td>
                <!--
                <td></td>
                <td></td>
                -->
            </tr>
            <tr>
                <td width="70" height ="50">주소</td>
                <td colspan="3"></td>
                <!--
                <td></td>
                <td></td>
                -->
            </tr>
            <tr>
                <td height ="250">자기소개</td>
                <td colspan="3"></td>
                <!--
                <td></td>
                <td></td>
                -->
            </tr>

        </table>
</body>

테이블 내에 구조 나누기

<style>
  /* html의 주석이 먹히지 않음.*/
            
  /*thead에 스타일 적용*/
  thead{
 	 	background-color: magenta; /*배경색*/
     	color : white; /*글자색*/
  }

  /*tfoot에 스타일 적용*/
  tfoot{
 	 	background-color: darkgreen;
  	 	color:yellow;
  }

  /*tbody에 스타일 적용*/
  /*
  tbody{
 		background-color: lightgray;
  }
  => 모든 테이블에 적용됨.
  */
  
  #tt{ 
  		background-color: lightgray;
  }
  /* => id 속성값이 tt인 요소만 스타일을 적용함.*/  
</style>  

<body>
        <table border="1">
            <!-- thead : 테이블의 머리부, 테이블 당 1개씩만 존재-->
            <thead>
                <tr>
                    <th>이름</th>
                    <th>나이</th>
                    <th>주소</th>
                </tr>
            </thead>
            <!-- tbody : 테이블의 몸체부, 여러개 존재 가능-->
            <tbody id = "tt"> <!-- id속성 : 각 문서마다 해당 요소를 구분-->
                <tr>
                    <td>홍길동</td>
                    <td>23</td>
                    <td>서울</td>
                </tr>
                <tr>
                    <td>김갑생</td>
                    <td>30</td>
                    <td>부산</td>
                </tr>
    
                <tr>
                    <td>박말똥</td>
                    <td>54</td>
                    <td>경기</td>
                </tr>
            </tbody>
            <!-- tfoot : 테이블의 말단부, 테이블 당 1개씩만 존재, 반드시 thead뒤에 있어야함.-->
            <tfoot>
                <tr>
                    <th colspan="2"> 총 인원</th>
                    <td>3명</td>
                </tr>
            </tfoot>
        </table>  
</body>
[BOJ] 9019 DSLR
[Java] 자료구조 - Array, List, Map, Set, Stack, Queue

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage