테이블태그기타

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 12:01 |

<!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>
    <title>테이블태그 기타</title>
</head>
<body>

<table border="1" width="400">
    <caption>표1. 별명</caption>
    <colgroup>
        <col width="20%" />
        <col width="80%" />
    </colgroup>
    <thead>
        <tr>
            <th>이름</th>
            <th>별명</th>
        </tr>
    </thead>
    <tbody>  
        <tr>
            <td>홍길동</td><td>HONG</td>
        </tr>
        <tr>
        <td>백두산</td><td>BACK</td>
        </tr>
    </tbody>    
    <tfoot>
        <tr>
            <th colspan="2" align="right">총 2명</th>
        </tr>
    </tfoot>     
</table>

</body>
</html>

//
- caption : 테이블의 이름(제목)
- colgroup/col width : 너비(열) 조절과 관련.
- th : 열 제목. 볼드체로 보여지고 가운데 정렬됨. 

< 실행결과 >




'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

22. I프레임(인라인 프레임)  (0) 2009.07.24
프레임  (0) 2009.07.23
20. 템플릿(가느다란 실선으로 테이블 테두리 표시)  (0) 2009.07.23
19. 테이블  (0) 2009.07.23
18. body속성  (0) 2009.07.23
Posted by holland14
:

20. 템플릿(가느다란 실선으로 테이블 테두리 표시)

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 12:00 |

<!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>
    <title>웹 사이트 뼈대</title>
</head>
<body>

<h3>가느다란 실선으로 테이블 테두리 표시</h3>
<table width="200"
    border="1"
    bordercolorlight="silver"
    bordercolordark="white"
    cellspacing="0"
    >
    <tr>
        <td>1행 1열</td>
        <td>1행 2열</td>
    </tr>
   
</table>

<h3>또 다른 방법</h3>
<table border="0" width="200" cellspacing="1" bgcolor="silver">
    <tr>
        <td bgcolor="white">1행 1열</td>
        <td bgcolor="white">1행 2열</td>
    </tr>
</table>

</body>
</html>

//
첫번째 테이블에서
bordercolordark : 테두리선 그림자
- 가느다란 실선으로 보이기 위해 cellspacing값도 0으로 설정했음.

< 실행결과 >





'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

프레임  (0) 2009.07.23
테이블태그기타  (0) 2009.07.23
19. 테이블  (0) 2009.07.23
18. body속성  (0) 2009.07.23
17. 이미지맵  (0) 2009.07.23
Posted by holland14
:

19. 테이블

.NET프로그래밍/HTML 4.0 / XHTML1.0 2009. 7. 23. 10:56 |

<!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>
    <title></title>
</head>
<body>

<h3>1행1열 테이블</h3>
<table border="1">
    <tr>
        <td>
            1행 1열
        </td>
    </tr>
</table>


<h3>1행2열 테이블</h3>
<table border="1" width="200" height="100">
    <tr>
        <td>1,1</td><td>1,2</td>
    </tr>
</table>


<h3>2행2열 테이블</h3>
<table border="1">
    <tr>
        <td>1,1</td><td>1,2</td>
    </tr>
    <tr>
        <td>2,1</td><td>2,2</td>
    </tr>
</table>

<h3>셀 병합</h3>
<table border="1" width="200">
    <tr>
        <td colspan="2" align="center" bgcolor="yellow">1</td>
    </tr>
    <tr align="center">
        <td rowspan="2" valign="bottom">3</td>
        <td>4</td>
    </tr>
    <tr>
        <td align="center">6</td>
    </tr>
</table>

<h3>주요속성</h3>
<table border="1" width="200" height="200"
    cellpadding="10" cellspacing="15">
    <tr>
        <td>1</td><td colspan="2" align="center"><img src="images/2.jpg" /></td>
    </tr>
    <tr>
        <td>4</td><td rowspan="2" align="right" valign="top">5</td>
        <td background="images/2.jpg">6</td>
    </tr>
    <tr>
        <td>7</td><td bgcolor="yellow">9</td>
    </tr>
</table>   

<h3>표안에 표</h3>
<table border="1" width="200" height="200">
    <tr>
        <td>1</td>
        <td rowspan="2" align="center">
   
            <table border="1" width="100%">
                <tr>
                    <td>2</td>
                </tr>
                <tr>
                    <td>4</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

</body>
</html>
 

//
- tr (table row) : 표의 1행을 가리키는 말
- td (table data) : 표의 셀 하나를 가리킨다.(각 행의 셀을 만듦)
- border : 외곽선(테두리) 굵기 / bordercolor: 외곽선 색
- cellpadding : 셀 테두리와 글자 사이의 내부간격
- cellspacing : 셀 사이의 간격
- colspan : 가로로 셀(열끼리) 합침
- rowspan : 세로로 셀(행끼리) 합침
- valign : 상하정렬 / align : 좌우정렬
- td태그와 img태그 사이 앞 뒤로 공백을 두면 안됨.

< 실행결과 >



'.NET프로그래밍 > HTML 4.0 / XHTML1.0' 카테고리의 다른 글

테이블태그기타  (0) 2009.07.23
20. 템플릿(가느다란 실선으로 테이블 테두리 표시)  (0) 2009.07.23
18. body속성  (0) 2009.07.23
17. 이미지맵  (0) 2009.07.23
16. 이미지링크  (0) 2009.07.22
Posted by holland14
:

티스토리툴바