괴발개발/Html+CSS

html_표만들기

moonday 2021. 6. 7. 00:43

<!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>기본 예제</title>
</head>
<body>
    <!-- 
        - table 태그 : 표를 만들 때 사용하는 태그
        - caption, thead, tbody, tfoot, tr, th, td 태그가 안에서 사용된다.
        - caption : 표 제목
        - thead : 표 앞의 행으로 속성값들의 제목을 표기
        - tbody : 표 가운데 행들의 모임으로 실제 값들을 표기
        - tfoot : 표 마지막 행들의 모임으로 합계와 같은 값들을 표기
        - thread와 tbody와 tfoot은 순서를 바꿔도 tbody가 우선순위로 순서가 유지
        - tr : 한 행을 의미하는 태그
        - th/td : 한 행의 한 열을 의미하는 태그로, th는 가운데 정렬 굵은 글씨,
                    td는 왼쪽 정렬 얇은 글씨
    -->
    <table border="1"> <!-- border라는속성은 테두리가 생기지만 구식이라 CSS에서 사용하는 걸 권장-->
        <caption>과일 가격표</caption>
        <thead>
            <tr>
                <th>과일명</th>
                <th>가격</th>
            </tr>
        </thead>
        <!-- tfoot이랑 tbody순서랑 상관없이 tbody가먼저나옴ㅋ-->
        <tfoot>
            <tr>
                <td>딸기</td>
                <td>3000원</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>사과</td>
                <td>1000원</td>
            </tr>
            <tr>
                <td>배</td>
                <td>1500원</td>
            </tr>
        </tbody>

    </table>


</body>
</html>

'괴발개발 > Html+CSS' 카테고리의 다른 글

Html_자기소개,수학문제 예제  (0) 2021.06.07
Html_블록태그와 글의 구조  (0) 2021.06.07
Html_ a태그  (0) 2021.06.07
html_이미지태그(img tag), 리스트 출력  (0) 2021.06.07
Html_기본구성, 태그 종류  (0) 2021.06.06