(기초)그래서 뭘 배운거야?/HTML&CSS

HTML&CSS-16-table : 테이블 생성

Soheny.P 2021. 8. 19. 18:41
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 테두리 지정하기 -->
    <!-- 테두리 크기 조정 -->
    <style>
        table,tr,td,th {
            border: 1px solid red;
        }
        table {
            width: 400px;
            height: 200px;
        }
    </style>
</head>

<body>
    <!-- table>tr*열수>td{내용$}*행수 : 테이블 생성태그 | 내부에 tr, td 태그 통해 행, 열 표현 -->
    <!-- tr(행), td(셀), th(제목) | tr 안에 td 넣어 열 표현 가능 | td 대신 th넣어 제목 행 표현 -->
    <!-- td, th 차이점 : th는 글자 중앙위치, 볼드체 -->
    <table>
        <!-- tr>th{제목$}*3 : 제목 추가하기 -->
        <tr>
            <th>제목1</th>
            <th>제목2</th>
            <th>제목3</th>
        </tr>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
            <td>내용3</td>
        </tr>
        <tr>
            <td>내용4</td>
            <td>내용5</td>
            <td>내용6</td>
        </tr>
    </table>
</body>

</html>

 

 

예시

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td,tr,th {
            border: 1px solid black;
            border-collapse: collapse;
        }
        
        table {
            width: 500px;
            height: 200px;
            padding: 5px;
        }
    </style>
</head>


<body>
    <h1>우리집 설거지 당번 비율(%)</h1>
    <table>
        <tr>
            <th></th>
            <th>어미모</th>
            <th>아비부</th>
            <th>장녀</th>
            <th>차녀</th>
            <th>유령</th>
        </tr>
        <tr>
            <th>2020년</th>
            <td>77.1</td>
            <td>58.3</td>
            <td>32.4</td>
            <td>16.7</td>
            <td>22.1</td>
        </tr>
        <tr>
            <th>2021년</th>
            <td>73.8</td>
            <td>51.0</td>
            <td>40.1</td>
            <td>28.1</td>
            <td>14.7</td>  
        </tr>
    </table>
</body>

</html>

 

위 예시의 제목을 Caption태그로 만들기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table, th, td {
            /* 테두리 */
            border: 1px solid gray;
            /* 표 선 합치기 */
            border-collapse: collapse; 
        }

        th, td {
            /* 너비 */
            width: 100px;
            /* 안쪽 여백 */
            padding: 5px;
        }
    </style>
</head>

<body>
    <!-- table>(tr>th*6)+(tr*2>(th+td*5)) : 테이블 만들기 -->
    <table>
        <!-- caption : 제목 넣는 태그 -->
        <caption><b>우리집 설거지 당번 비율(%)</b></caption>
        <tr>
            <th></th>
            <th>어미모</th>
            <th>아비부</th>
            <th>장녀</th>
            <th>차녀</th>
            <th>유령</th>
        </tr>
        <tr>
            <th>2020년</th>
            <td>77.1</td>
            <td>58.3</td>
            <td>32.4</td>
            <td>16.7</td>
            <td>22.1</td>
        </tr>
        <tr>
            <th>2021년</th>
            <td>73.8</td>
            <td>51.0</td>
            <td>40.1</td>
            <td>28.1</td>
            <td>14.7</td>
        </tr>
    </table>
</body>

</html>
728x90