table (표)

<body>
    <table>
        <tr>
            <td>  </td>
            <td>  </td>
        </tr>
    </table>
</body>

<table>
- width`
  - 표의 넓이
- border
  - 표의 선 두께
<td>
- rowspan
  - 세로로 병합
- colspan
  - 가로로 병합
- 태그 사이에 값 없으면
  - 표에도 빈칸 처리 됨

예제1

rowspan/colspan 연습

코드 보러가기

<!DOCTYPE html>
<html>
    <body>
        <table width="100%" border="1">
            <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Address</th>
                <th colspan="2">Class</th>
            </tr>
            <tr>
                <td rowspan="2">A</td>
                <td>B</td>
                <td>C</td>
                <td colspan="2">D</td>
            </tr>
            <tr>
                <!-- <td>E</td> -->
                <td>F</td>
                <td>G</td>
                <td colspan="2">H</td>
            </tr>
            <tr>
                <td>I</td>
                <td>J</td>
                <td colspan="3">K</td>
            </tr>
            <tr>
                <td>L</td>
                <td>M</td>
                <td>N</td>
                <td>O</td>
                <td>P</td>
            </tr>
        </table>
    </body>
</html>

결과

결과5

예제2

기본 이력서 만들기

코드 보러가기

<!DOCTYPE html>
<html>
<body>
    <table width="100%" border="1">
        <tr>
            <td rowspan="4">사진</td>
            <td colspan="4">이력서</td>
        </tr>
        <tr>
            <td rowspan="2">성명</td>
            <td rowspan="2" colspan="2">
                <input type="text" name="name">
            </td>
            <td>주민등록번호</td>
        </tr>
        <tr>
            <td>111111-2222222</td>
        </tr>
        <tr>
            <td>생년월일</td>
            <td colspan="3">년 월 일 일생 (만 세)</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

결과

결과6

LIST