table colspan, rowspan 이미지처럼 만들려면 어케야하죠..

table colspan, rowspan 이미지처럼 만들려면 어케야하죠..

QA

table colspan, rowspan 이미지처럼 만들려면 어케야하죠..

본문

table은 진짜 너무 어려운것 같아요.

아래 이미지처럼 만들어보려햇는대.. 도무지.... 안되네요

 

237506203_1728009753.1853.jpg

 

 


<table class="table">
    <thead>
        <tr>
            <th></th>
            <th colspan="4"></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td colspan="8"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>            
    </tbody>
</table>

 

 

이 질문에 댓글 쓰기 :

답변 2



<table class="table " >
    <thead>
    <tr>
        <th rowspan="2"></th>
        <th colspan="4"></th>
        <th rowspan="2"></th>
        <th rowspan="2"></th>
        <th rowspan="2"></th>
        <th rowspan="2"></th>
    </tr>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td colspan="8"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
</table>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Preview - Corrected</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }
        td {
            border: 1px solid black;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td rowspan="2" style="width: 20%;">1</td>
            <td colspan="4" style="width: 40%;">2</td>
            <td rowspan="2" style="width: 10%;">3</td>
            <td rowspan="2" style="width: 10%;">4</td>
            <td rowspan="2" style="width: 10%;">5</td>
            <td rowspan="2" style="width: 10%;">6</td>
        </tr>
        <tr>
            <td style="width: 10%;">7</td>
            <td style="width: 10%;">8</td>
            <td style="width: 10%;">9</td>
            <td style="width: 10%;">10</td>
        </tr>
        <tr>
            <td style="width: 20%;">11</td>
            <td colspan="8">12</td>
        </tr>
        <tr>
            <td style="width: 20%;">13</td>
            <td style="width: 10%;">14</td>
            <td style="width: 10%;">15</td>
            <td style="width: 10%;">16</td>
            <td style="width: 10%;">17</td>
            <td style="width: 10%;">18</td>
            <td style="width: 10%;">19</td>
            <td style="width: 10%;">20</td>
            <td style="width: 10%;">21</td>
        </tr>
    </table>
</body>
</html>

thumb-3667132586_1728023724.4931_730x179.png

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT