① 태그 소스

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>테이블</title>

</head>

<body>

        <!-- 테이블은 메인페이지에서 사용금지 -->

        <!-- 1. 느리기 때문에 -->

        <!-- 2. 테이블의 구동방식 : 다른 태그들이 자리를 잡은 후에 테이블이 자리를 밀어내고 

  만들어진다. -->

        <table border="1" align = "center" width="500"> <!-- border : attribute -->

               <tr> <!-- Table row : -->

                       <td colspan="2">1 1</td>

                       <td rowspan="2">1 2</td>

               </tr>

               <tr> <!-- Table row : -->

                       <td>2 1</td>

                       <td>2 2</td>

               </tr>

        </table>

        <br />

        <br />

        <br />

        <table border="5" align = "center" width ="200">

               <tr> <!-- 테이블 헤더 -->

                       <th>구분</th>

                       <th>1</th>

                       <th>2</th>

                       <th>3</th>

                       <th>4</th>

               </tr>

               <tr align = "center" valign="top">

                       <th>1</th>

                       <td rowspan="3" >a1</td>

                       <td colspan="3" >a2</td>

               </tr>

               <tr align = "center" valign="top">

                       <th>2</th>

                       <td rowspan="2" >b1</td>

                       <td colspan="2" >b2</td>

               </tr>

               <tr align = "center" valign="top">

                       <th>3</th>

                       <td >c1</td>

                       <td rowspan="2" >c2</td>

               </tr >

               <tr align = "center" valign="top">

                       <th>3</th>

                       <td colspan="2">d1</td>

                       <td>d2</td>

               </tr >

        </table>

</body>

</html>


② 실행화면

테이블

1행 1열 1행 2열
2행 1열 2행 2열



구분 1열 2열 3열 4열
1행 a1 a2
2행 b1 b2
3행 c1 c2
3행 d1 d2


블로그 이미지

모데스티

,