블로그 노트 : 표(테이블) 출력 방식에 따른 고정형 vs 반응형 vs 이미지 비교

 

블로그에서 표현되는 표의 형태를 고정형, 반응형, 그리고 이미지 형태로 각각 구현한 예시입니다.

---

1. 고정형 표

고정형 표는 크기가 고정되어 화면 크기에 따라 조정되지 않습니다. HTML 코드 예시는 다음과 같습니다:

<table style="width: 600px; border-collapse: collapse; border: 1px solid #ddd;">
    <thead>
        <tr style="background-color: #f4f4f4;">
            <th style="border: 1px solid #ddd; padding: 8px;">플랫폼</th>
            <th style="border: 1px solid #ddd; padding: 8px;">점유율</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;">WordPress</td>
            <td style="border: 1px solid #ddd; padding: 8px;">62.7%</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;">Shopify</td>
            <td style="border: 1px solid #ddd; padding: 8px;">6.4%</td>
        </tr>
        <tr>
            <td style="border: 1px solid #ddd; padding: 8px;">Wix</td>
            <td style="border: 1px solid #ddd; padding: 8px;">3.9%</td>
        </tr>
    </tbody>
</table>

결과 미리보기:

플랫폼	점유율
WordPress	62.7%
Shopify	6.4%
Wix	3.9%

 

고정형 표는 화면 크기에 상관 없이 너비가 고정됩니다.

---

2. 반응형 표

반응형 표는 화면 크기에 따라 자동으로 크기가 조정됩니다. 스킨에 따라 CSS를 수정해야 구현되는 경우도 있습니다.

<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f4f4f4;
    }
</style>

<table>
    <thead>
        <tr>
            <th>플랫폼</th>
            <th>점유율</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>WordPress</td>
            <td>62.7%</td>
        </tr>
        <tr>
            <td>Shopify</td>
            <td>6.4%</td>
        </tr>
        <tr>
            <td>Wix</td>
            <td>3.9%</td>
        </tr>
    </tbody>
</table>

결과 미리보기:

플랫폼	점유율
WordPress	62.7%
Shopify	6.4%
Wix	3.9%

 

반응형 표는 PC, 태블릿, 모바일 등 다양한 화면 크기에 따라 너비가 자동으로 조정됩니다.

---

3. 이미지 형태

 

이미지 형태의 표는 디자인을 자유롭게 커스터마이징할 수 있습니다.

---

정리

• 고정형은 가독성이 좋아 간단한 구조에 적합하지만 좁은 화면에서는 내용이 잘리는 등 유연성이 떨어집니다.
• 반응형은 다양한 디바이스에 적용 가능하나 너비, 높이가 계속해서 바뀌어 가독성을 해칠 수 있습니다.
• 이미지는 시각적 강조나 꾸미기에 유리하지만 내용의 수정이 어렵고 로딩 속도에 영향을 줄 수 있습니다.

사용자의 필요성, 편의성에 따라 적절한 방식을 선택하여 사용합니다.