5. HTML_table

📌 HTML 테이블 만들기 정리

웹페이지에서 데이터를 표 형태로 표시할 때 사용하는 태그는 <table> 입니다.
행(tr), 열(td), 속성(rowspan, colspan)을 조합해서 다양한 구조의 표를 만들 수 있습니다.

 

---

✅ 테이블 기본 속성

• border : 테두리 두께
• width / height : 테이블 크기
• bordercolor : 테두리 색상
• cellspacing : 셀과 셀 사이 간격
• cellpadding : 셀 내부 여백
• align : 정렬 (left / center / right)
• bgcolor : 배경색 지정 (16진수 HEX 코드, 예: #ffc7c6)

---

✅ 기본 테이블 예제

<table border="1" width="400" height="300" bordercolor="red"
        cellspacing="10" cellpadding="10" align="center" bgcolor="#e7e3ff">
    <tr bgcolor="#ffc7c6">
        <td bgcolor="#FFE400">1</td>
        <td bgcolor="#FFFF66">2</td>
        <td>3</td>
    </tr>

    <tr align="center">
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

✅ rowspan & colspan 예제

 

• rowspan : 행을 세로로 병합
• colspan : 열을 가로로 병합

<table border="1" width="400" height="300" bordercolor="red"
        cellspacing="10" cellpadding="10" align="center" bgcolor="#e7e3ff">
    <tr bgcolor="#ffc7c6">
        <td bgcolor="#FFE400" rowspan="2">1</td>
        <td bgcolor="#FFFF66">2</td>
        <td>3</td>
    </tr>

    <tr align="center">
        <td colspan="2">4</td>
    </tr>
</table>

 

 

 

 

 

---

✅ 응용 테이블 예제

<table border="1" width="400" height="300" 
       bordercolor="#000000" align="center" style="text-align:center;">
    <!-- 1행 -->
    <tr>
        <td rowspan="3" bgcolor="#e7efff">1</td>
        <td colspan="3" bgcolor="#ffff66">2</td>
    </tr>

    <!-- 2행 -->
    <tr>
        <td colspan="2" bgcolor="#ceaaad">3</td>
        <td rowspan="3" bgcolor="#ccffcc">4</td>
    </tr>

    <!-- 3행 -->
    <tr>
        <td bgcolor="#999999">5</td>
        <td bgcolor="#ffffcc">6</td>
    </tr>

    <!-- 4행 -->
    <tr>
        <td colspan="3" bgcolor="#b58a7b">
            <font color="#f0f0f0"><strong>7</strong></font>
        </td>
    </tr>
</table>