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

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

QA

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

답변 2

본문

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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
filter #css ×
전체 2,086
© SIRSOFT
현재 페이지 제일 처음으로