Front-end/HTML5

5. HTML_Table

JUTABI 2020. 6. 6. 15:51 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table, th, td{
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td{
            padding: 15px;
        }
    </style>
</head>
<body>
    <!--"border"는 표 테두리의 두께를 지정한다.(CSS 의 border property 를 사용하는게 더 좋은 방법)-->
    <table border="1">
        <!--"tr"은 표 내부의 행 (table row)-->
        <tr>
            <!--"th"는 행 내부의 제목 셀 (table heading)-->
            <th>First name</th>
            <th>Last name</th>
            <th>Score</th>
        </tr>
        <tr>
            <!--"td"는 행 내부의 일반 셀 (table data)-->
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Eve</td>
            <td>Jackson</td>
            <td>94</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
        </tr>
    </table>
    <h2>2개의 culumn을 span</h2>
    <table>
        <tr>
            <th>Name</th>
            <!--"colspan"은 해당 셀이 점유하는 열의 수를 지정합니다.-->
            <!--한사람당 전화번호를 두개 출력하기 위해서 telephone 에는 2개의 속성값이 존재-->
            <th colspan="2">Telephone</th>
        </tr>
        <tr>
            <!--열 값이 차례대로 들어가는데 두번째와 세번째 값은 telephone 에 들어가는 것처럼 보임-->
            <td>Bill Gates</td>
            <td>555 77 854</td>
            <td>555 77 855</td>
        </tr>
    </table>

    <h2>2개의 row를 span</h2>
    <table>
        <!--첫번째 줄-->
        <tr>
            <th>Name:</th>
            <!--헤더 값들이 열로 들어가기 때문에 Name 의 속성을 바로 적어줌.-->
            <td>Bill Gates</td>
        </tr>
        <!--두번째 줄-->
        <tr>
            <!--"rowspan"은 해당 셀이 점유하는 행의 수를 지정합니다.-->
            <th rowspan="2">Telephone:</th>
            <!--여기는 두번째 줄 자리이기 때문에 "555 77 854" 만 적어줍니다.-->
            <td>555 77 854</td>
        </tr>
        <!--세번째 줄-->
        <tr>
            <!--세번째 줄 자리에 와서 새로운 속성값을 적어줍니다.-->
            <td>555 77 855</td>
        </tr>
    </table>
</body>
</html>
저작자표시