HTML Tables
http://www.w3schools.com/html/html_tables.asp
HTML Tables| Apples | 44% | | Bananas | 23% | | Oranges | 13% | | Other | 10%
|
|
직접 해보세요 - 예제
표
HTML 문서에서 표를 어떻게 사용하는지 보여줍니다.
표 테두리
이 예제는 다양한 표 테두리를 보여줍니다.
이 페이지의 아래에 더 많은 예제가 있습니다.
표
표는 <table> 태그로 나타냅니다. 표는 행으로 나누어 지고(<tr> 태그를 이용하여), 각 행은 데이터 셀로 나눠집니다(<td> 태그를 사용하여). td는 데이터 셀의 내용인 "table data"의 약자입니다. 데이터 셀은 텍스트, 이미지, 목록, 문단, 폼, 가로 줄, 표 등을 포함할 수 있습니다.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> |
브라우저에서 이렇게 보입니다.
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2
|
표와 테두리(border) 속성
만약 여러분이 명시적으로 테두리 속성을 나타내지 않으면 표는 테두리 없이 표시될 것입니다. 때론 이것이 편리하겠지만 대부분의 경우 여러분은 테두리를 보이길 원할 겁니다.
표의 테두리를 보이려면 border 속성을 사용하면 됩니다.
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
|
제목 셀
제목 셀은 <th> 태그로 나타냅니다.
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table> |
브라우저에서 이렇게 표시됩니다.
| Heading | Another Heading |
|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2
|
빈 셀
내용이 없는 셀은 대부분 브라우저에서 보기 좋게 표시되지 않습니다.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table> |
브라우저에서 이렇게 표시됩니다.
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
|
빈 셀의 테두리는 표시되지 않습니다. (Mozilla Firefox는 테두리를 보여줍니다)
이렇게 되는 것을 방지하려면 빈칸을 나타내는 를 추가하여 테두리가 보이도록 합니다.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td> </td>
</tr>
</table> |
브라우저에서 이렇게 보입니다.
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 |
|
유용한 팁
<thead>, <tbody>, <tfoot> 엘리먼트는 드물게 나쁜 브라우저를 지원하기 위해 사용됩니다. 이것은 다음 버전의 XHTML에서 변경될 것입니다. 만약 여러분이 Internet Explorer 5.0 이상을 가지고 있다면 우리의 XML 튜토리얼에서 실제 예제를 볼 수 있습니다.
※ 번역이 올바른지 확실하지 않네요.
The <thead>, <tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in out XML tutorial.
추가 예제
테두리가 없는 표
이 예제는 테두리가 없는 표를 보여줍니다.
제목 셀
이 예제는 제목 셀이 어떻게 표시되는지 보여줍니다.
빈 셀
이 예제는 내용이 없는 셀을 다루기 위해 " "를 어떻게 사용하지는 보여줍니다.
표 캡션
이 예제는 표 캡션을 보여줍니다.
둘 이상의 행/열을 병합한 셀
이 예제는 어떻게 둘 이상의 행이나 열을 병합한 셀을 정의하는지 보여줍니다.
표 내부의 태그
이 예제는 엘리먼트의 내부에 다른 엘리먼트를 어떻게 나타내는지 보여줍니다.
셀 내부여백
이 예제는 셀 내용과 테두리 사이에 공간을 만들기 위해 cellpadding을 어떻게 사용하는지 보여줍니다.
셀 간격
이 예제는 셀 사이의 간격을 늘리기 위해 cellspacing을 어떻게 사용하지는 보여줍니다.
표 배경색 혹은 배경 그림을 넣기
이 예제는 표 배경을 어떻게 넣는지 보여줍니다.
셀 배경색 혹은 배경 그림을 넣기
이 예제는 하나 또는 다수의 셀에 배경을 어떻게 넣는지 보여줍니다.
셀 내용의 정렬
이 예제는 보기 좋은 표를 만들기 위해 "align" 속성을 이용하여 셀의 내용을 정렬하는 법을 보여줍니다.
frame 속성
이 예제는 표 전체의 테두리를 다루기 위해 "frame" 속성을 사용하는 법을 보여줍니다.
frame과 border 속성
표 전체의 테두리를 다루기 위해 "frame"과 "border" 속성을 어떻게 사용하는지 보여줍니다.
표 태그
<table> : 표를 나타냅니다.
<th> : 제목 셀을 나타냅니다.
<tr> : 표의 행을 나타냅니다.
<td> : 셀을 나타냅니다.
<caption> : 표 캡션을 나타냅니다.
<colgroup> : 열의 그룹을 나타냅니다.
<col> : 표의 하나 또는 다수의 셀의 속성 값을 나타냅니다.
<thead> : 표의 헤더를 나타냅니다.
<tbody> : 표의 몸체를 나타냅니다.
<tfoot> : 표의 푸터를 나타냅니다.
최근 덧글