본문 바로가기
WEB/HTML

표 - table

by DeveloperCat 2024. 2. 5.
반응형
<html>
    <body>
        <table border="2">
            <thead>
                <tr>
                    <th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>최진혁</td> <td>남</td> <td rowspan="2">청주</td> <td>1500</td>
                </tr>
                <tr>
                    <td>안나라</td> <td>여</td> <!--td>인천</td--> <td>2800</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">합계</td> <!--td></td> <td></td--> <td>1500</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

<!-- table : table tr : 행구분, td : 셀구분-->
<!-- border : 테이블 선 그려주기, 숫자로 굵기 조절 가능-->
<!-- thead와 tbody로 테이블을 구분해준다. 그 다음 th를 사용하면 테이블 제목?부분 글자가 진해지는 것을 볼 수 있다.-->
<!-- tfoot 테이블 결과값 부분을 뜻한다.-->
<!-- rowspan : 열병합, colspan : 행병합-->

 

개인적인 생각으로 html의 꽃(?)이라고 부르는 테이블 만들기이다.

html 중 가장 복잡한 부분이면서 결코 빼놓을 수 없는 태그이다.

확실히 알아두도록 하자.

반응형

'WEB > HTML' 카테고리의 다른 글

텍스트 입력  (0) 2024.02.05
입력양식 - form  (0) 2024.02.05
줄바꿈 - br  (0) 2024.02.05
단락 - p  (0) 2024.02.05
웹사이트 만들기  (0) 2024.02.05