<table> 태그

 

- 테이블을 사용하면 웹 개발자가 데이터를 행과 열로 정렬할 수 있다.

 

 

테이블 예시
- 출처 : W3CSchool Tables -

 

테이블 행

 

- 각 테이블 행은 <tr>태그로 정의된다.

 

테이블 셀

 

- 각 테이블 셀은 <td> 태그로 정의된다.

<tr> <td> 태그 예시

 

 

실습 코드 - table1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, th, td{
            border : 1px solid black;
        }
    </style>
</head>
<body>
    <h2>표예제</h2>
    <table style = "width: 100%;">
        <tr><!--tr : 행-->
            <!-- td : 행 안의 데이터 -->
            <!-- 높이는 px, 너비는 % -->
            <th style = "width : 30%;">회사</th>
            <th style = "width : 50%;">담당자</th>
            <th style = "width : 20%;">국가</th>
        </tr>
        <tr style = "height: 300px;">
            <td>오라클</td>
            <td>홍길동</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>구글</td>
            <td>이순신</td>
            <td>UK</td>
        </tr>
        <tr>
            <td>마이크로소프트</td>
            <td>강감찬</td>
            <td>KOREA</td>
        </tr>
       

    </table>
</body>
</html>

 

Document

표예제

회사 담당자 국가
오라클 홍길동 USA
구글 이순신 UK
마이크로소프트 강감찬 KOREA

 

실습 코드 - table2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            table, th, td{
                border:1px solid black;

            }
    </style>
</head>
<body>
    <h2>열(셀) 병합</h2>
    <table>
        <tr>
            <td colspan="2">Name1</td>
            <!--<td>Name2</td> -->
            <td>Age</td>
        </tr>

        <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
       
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>60</td>
        </tr>

    </table>
</body>
</html>

 

Document

열(셀) 병합

Name1 Age
Jill Smith 50
Eve Jackson 60

 

실습 코드 - table3.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
            table, th, td{
                border:1px solid black;

            }
    </style>
</head>
<body>
    <h2>행 병합</h2>
    <table>
        <tr>
            <td>Name1</td>
            <td>Name2</td>
            <td>Age</td>
        </tr>

        <tr>
            <!-- rowspan : 행병합-->
            <td rowspan="2">Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
       
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>60</td>
        </tr>

    </table>
</body>
</html>

 

Document

행 병합

Name1 Name2 Age
Jill Smith 50
Eve Jackson 60

 

실습 코드 - table4.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         table, th, td{
                border:1px solid black;

            }
    </style>
</head>
<body>
    <h2>표 3행4열 예제 - 합치기</h2>
    <table>

        <tr>
            <td colspan="4">1</td>
        </tr>

        <tr>
            <td colspan="2" rowspan="2">2</td>
            <td>3</td>
            <td>4</td>
        </tr>

        <tr>
            <td>5</td>
            <td>6</td>
        </tr>

    </table>
</body>
</html>

 

Document

표 3행4열 예제 - 합치기

1
2 3 4
5 6

 

실습 코드 - table5.html
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two columns:</p>

<table style="width: 100%;">
<colgroup>
  <col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>

 

Colgroup

Add the a colgroup with a col element that spans over two columns to define a style for the two columns:

MON TUE WED THU FRI SAT SUN
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28

 

 

iframe
현재 HTML 문서 내에 다른 문서를 포함하기 위해 사용

 

실습 코드 - iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>iframe 태그 사용</h3>
    <iframe src="table01.html" width="500" height="700"style = "border:none;"></iframe>
    <!-- 외부 사이트도 사용 가능(일부)-->
    <iframe src="https://www.daum.net" width="500" height="700"></iframe>
   
    <br>
    <iframe src="table01.html" width="500" height="700"style = "border:none;"name = "iframe_a"></iframe>
    <br>
    <p><a href = "https://www.daum.net" target="iframe_a">Daum</a></p>
</body>
</html>
저작자표시 비영리 변경금지

'Devlopment > HTML & CSS' 카테고리의 다른 글

[HTML] Form 태그 (2) - 전화번호 입력, 회원정보 실습  (2) 2024.01.04
[HTML] Form 태그 (1) - 이론 및 간단한 예제 실습  (0) 2024.01.04
[HTML] Image/Image Map 이론 및 실습  (0) 2024.01.04
[HTML] Links <a> 링크 태그 이론 설명 및 실습 예제  (1) 2024.01.04
[HTML] HTML 시작 - 기본 이론 및 간단한 예제 실습  (2) 2024.01.03

티스토리툴바