본문 바로가기

프론트엔드개발/HTML,CSS,BS

[HTML]step.6 table 태그 colspan / rowspan

<table colspan="셀 갯수">

가로 셀 병합 , <table colspan="3"> // 셀 3칸까지 가로 병합시킴 

<table rowspan="셀 갯수">

세로 셀 병합,<table rowspan="3"> // 셀 3칸까지 세로병합

 

 

잔재미코딩 blog
상세 정보
항목 1 2 3
4 5 6
7 8 9

 

 

<!-- 아래 차시 학습 시 활용하세요 :) 
16. HTML table 태그로 복잡한 표 작성하는 방법 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>잔재미코딩 blog</title>
    </head>
    <body>
        <center>
            <table border ="3" width ="600" cellspacing="0">

        <tr>
            <td></td>
            <td colspan ="3">상세 정보</td>
            </tr>
        <tr>
            <td rowspan="3">항목</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>

             
            </tr>


            </table>
            
        </center>
    
    </body>
</html>
반응형