03表に関連するラベル

27836 ワード
テキストリンク

基本テーブルの作成

표 : 문서에 다량의 데이터를 정리해서 표현하고자 할 때 사용
     행과 열로 이루어져 있음.
[표를 구성하는 태그]
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>
2022-04-18
CrowdHumanテスト