본문으로 이동

HTML/표

링크 추가
위키책, 위키책

최소한의 테이블

[+/-]

먼저 간단한 예를 살펴보겠습니다.: 

 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>

<td> 모든 테이블은 <table> 태그로 시작하고 </table> 태그로 끝납니다. table 태그에서 나중에 볼 수 있는 것처럼 테이블의 속성을 정의할 수 있습니다.

테이블에는 <tr> 테이블 행 태그로 시작하고 선택적으로 </tr> 태그로 끝나는 행이 포함됩니다. 행은 테이블 안에 있어야 합니다.

행에는 셀이 포함되어 있으며 각각은 <td> 테이블 데이터 태그로 시작하고 선택적으로 </td> 태그로 끝납니다. 셀은 행 안에 있어야 합니다.

테이블 셀을 행 외부에 배치하거나 셀, 행 또는 테이블을 닫는 것을 잊어버리면 예측할 수 없는 결과가 나타납니다. 테이블에 있어야 하는 텍스트가 테이블 외부의 예기치 않은 위치에 나타날 수 있습니다. 최악의 경우 테이블의 전체 내용이 표시되지 않습니다.

예를 들어 IE 및 Firefox에서:

  • 행 외부의 셀은 해당 수직 위치에서 별도의 행으로 처리됩니다.
  • 행에 있든 없든 셀 외부의 모든 내용은 발생한 순서대로 전체 테이블 앞에 놓입니다. IE는 각 항목을 새 줄에 넣습니다. Firefox는 그렇지 않지만 경우에 따라 항목 사이에 공백을 넣습니다.

선택적 </td> 및 </tr>을 넣지 않으면 위의 내용은 첫 번째 행 앞의 내용을 참조하고 첫 번째 요소 앞의 행만 참조합니다. </table>은 필수 항목입니다. 잊어 버린 경우 다음 내용은 모두 마지막 행의 마지막 셀, 추가 테이블의 일부로 간주됩니다.

작업 - 테이블 만들기

  1. default.htm을 열고 해당 폴더에 table.htm으로 저장합니다.
  2. 문서 본문에 이 HTML 코드를 만듭니다.
 <table>
 <tr><th>Food</th><th>Price</th></tr>
 <tr><td>Bread</td><td>$2.99</td></tr>
 <tr><td>Milk</td><td>$1.40</td></tr>
 </table>
  1. 파일을 저장하고 브라우저에서 봅니다.

결과는 다음과 같습니다:

FoodPrice
Bread$2.99
Milk$1.40

아직 테이블처럼 보이지 않지만 곧 추가할 예정입니다.

참고: 이 테이블은 두 개의 행(두 개의 <tr> 태그 확인)으로 구성되며 각 행에는 두 개의 데이터 항목(두 개의 <td> 태그)이 있습니다.

표를 스프레드시트와 비교할 수 있습니다. 이것은 데이터를 포함하는 4개의 셀을 만드는 2개의 행과 2개의 열이 있습니다. ( 2행 x 2열 = 4셀)

캡션 및 제목

[+/-]

간단한 예부터 시작하겠습니다.: 

<table>
<caption>Formulas and Results</caption>
<tr><th>Formula</th><th>Result</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

캡션 은 테이블의 내용을 정의하거나 설명하는 데 유용합니다. 선택 사항입니다. caption 표에 캡션을 추가하려면 다음과 같이 요소 내부에 캡션 텍스트와 함께 caption 여는 태그 뒤에 요소를 입력합니다. 

<table>
<caption>Formulas and Results</caption>
...
</table>

캡션은 일반적으로 상단의 표 테두리 외부에 표시됩니다. 캡션의 정확한 모양과 배치는 CSS 스타일에 따라 달라집니다.

테이블 headings 은 테이블 열의 내용을 정의하는 방법입니다. 일반적으로 첫 번째 <tr> 테이블 행에서만 사용됩니다.

셀에 <td>를 사용하는 대신 <th>를 사용합니다.

기본적으로 테이블 머리글의 텍스트는 굵게 중앙에 표시됩니다.

구문은 <tr><th>text</th><th>text</th></tr>입니다.

작업 - 표 캡션 및 머리글

  1. table.html 파일 열기
  2. 표에 나만의 캡션 추가
  3. 결과 보기
  4. 테이블 제목 ITEMS 및 $ PRICE 추가
  5. 결과 보기


테두리

[+/-]

표 주위의 테두리는 선택 사항입니다. 때로는 표를 정의하는 데 도움이 되며 때로는 표가 없는 경우 표가 더 좋아 보입니다. 그러나 테이블을 생성하는 동안 테두리를 켜는 것은 테이블 작업을 훨씬 쉽게 만들기 때문에 매우 좋은 생각입니다. 테이블이 완성되면 테두리를 제거할 수 있습니다.

이 테이블의 테두리 너비는 1픽셀입니다.


이 테이블의 테두리 너비는 5픽셀입니다.

기본값은 0(즉, 경계선 없음)입니다.

테두리는 테이블 태그의 속성입니다. 구문은 다음과 같습니다.

<table border=X> 여기서 X는 테두리 크기(픽셀)입니다.

Internet Explorer 태그 전용이지만 테두리 색상을 지정할 수도 있습니다. 구문은 다음과 같습니다.

<table bordercolor="#000000">

HTML을 사용하여 테두리 색상을 지정하는 것은 권장되지 않습니다 . 이 용도로 CSS 를 사용하는 것이 훨씬 좋습니다 .

작업 - 테이블 주위에 테두리 만들기

  1. table.htm 파일을 엽니다.
  2. <table> 태그에 border="2"
    를 추가합니다
  3. 파일을 저장하고 봅니다.
  4. 테두리의 크기를 변경하십시오(즉, 0, 10을 시도하고 미친 숫자를 시도하십시오).
  5. 이동하면서 결과를 봅니다.

바깥쪽 테두리만 커지는 것을 발견하셨나요?

높이와 너비

[+/-]

기본적으로 테이블은 입력된 데이터만큼 큽니다.

테이블의 전체 높이와 너비를 변경하여 원하는 크기로 만들 수 있습니다.

크기를 절대 픽셀로 지정하거나 화면 크기의 상대 백분율로 지정할 수 있습니다.

구문은 다음과 같습니다. <table height=??? width=???> where ??? is the size in pixels or percentage.

개별 테이블 셀 또는 행의 치수를 제어하는 ​​것도 가능합니다.

예: <tr height="80"> <td width="50%">

절대 및 상대 높이와 ​​너비를 혼합할 수 있습니다.

패딩을 변경하여 CSS에서도 동일한 작업을 수행할 수 있습니다.

작업 - 테이블 크기 정의

  1. table.htm 파일을 엽니다.
  2. <table border="2"> 태그에서 높이와 너비를 추가합니다

. e.g. <table border="2" height=200 width=300>

  1. 파일을 저장한 다음 봅니다. 브라우저 창의 크기를 조정하고 무슨 일이 일어나는지 지켜보십시오. 테이블 크기는 그대로 유지됩니다.
  2. 측정값 변경을 실험하고 파일을 다시 봅니다.
  3. 이제 픽셀 측정값을 백분율로 바꿉니다 e.g. <table border="2" height="40%" width="50%">
  4. 파일을 저장한 다음 봅니다. 브라우저 창의 크기를 조정하고 무슨 일이 일어나는지 지켜보십시오. 이번에는 창 크기가 변경됨에 따라 테이블의 크기가 변경됩니다.

셀 간격 및 셀 패딩

[+/-]
the difference between cellpadding and cellspacing
the difference between cellpadding and cellspacing

셀 간격은 표 셀 사이의 픽셀 수입니다.

셀 패딩은 셀 내부의 픽셀 공간입니다. 즉, 정보와 표 셀의 측면 사이의 거리입니다.

이 두 옵션은 모두 <table> 태그의 속성입니다.

예. <table border="1" cellspacing="0" cellpadding="0">

참고: 둘 다 기본값은 2입니다.

작업 - 셀 간격 및 패딩

  1. table.htm 파일을 엽니다. 테이블의 높이와 너비가 크게 설정되어 있는지 확인하십시오(예: 300x200). 그렇지 않으면 셀 패딩 및 셀 간격의 효과를 볼 수 없습니다.
  2. 표 테두리, 셀 간격 및 셀 패딩의 크기를 변경해 보십시오. 0, 1, 5, 10 등의 다양한 조합을 시도하십시오.
  3. 매번 결과 보기

표 셀의 정렬

[+/-]

표 셀 내용의 기본 정렬은 왼쪽 및 세로 가운데 정렬입니다.

셀의 정렬을 변경하려면 각 셀에 대해 개별적으로 수행해야 합니다. align 명령은 <td> 태그에 포함됩니다. <tr> tag 태그에 정렬을 지정하여 전체 행의 정렬을 변경할 수도 있습니다.


수평 정렬
구문:
<td align="position"> 위치가 왼쪽, 중앙 또는 오른쪽인 경우
or
<tr align="position"> 위치가 왼쪽, 중앙 또는 오른쪽인 경우

수직 정렬
구문:
<td valign="position"> 위치가 위쪽, 중간 또는 아래쪽인 경우
or
<tr valign="position"> 위치가 위쪽, 중간 또는 아래쪽인

테이블 행 태그와 테이블 태그에 align 및 valign 명령을 포함할 수도 있습니다.

참고: 태그 table에 align="left" 또는 align="right" 태그를 포함해도 테이블 내용이 정렬되지 않습니다. 대신 페이지의 전체 테이블을 정렬합니다. 즉, 테이블 외부의 텍스트가 테이블을 둘러싸도록 합니다.



작업 - 표 셀 정렬

  1. Open your table.htm file
  2. 표 셀의 정렬을 다음과 같이 변경합니다.:
bread$2.99
Milk$1.40

or
bread$2.99
Milk$1.40
  1. 다른 수직 및 수평 정렬을 실험해 보십시오.
  2. 매번 결과 보기

행 범위 및 열 범위

[+/-]

모든 행에는 동일한 수의 테이블 데이터가 있어야 하며, 때때로 테이블 데이터가 둘 이상의 열이나 행에 걸쳐 있어야 합니다. 이 경우 태그 colspan 및/또는 rowspan이 사용됩니다. 여기서 태그는 숫자로 설정됩니다.




<-- 이 행에는 3개의 테이블 데이터 가 있습니다.


<-- 이 행에는 2개가 있습니다. colspan="2"



<-- 이 행에는 세 개의 테이블 데이터가 있지만 하나는 다음을 사용하기 때문에 두 개의 행에 걸쳐 있습니다. rowspan="2"


<-- 이 행에는 첫 번째 데이터가 사용 중이기 때문에 두 개의 테이블 데이터만 있습니다.

Syntax:

  • <td colspan=X> 여기서 X는 셀이 가로질러 있는 열의 수입니다.
  • <td rowspan=X> 여기서 X는 셀이 가로질러 있는 행의 수입니다.

작업 - 행 범위 및 열 범위

  1. table.htm 파일을 엽니다.
  2. 여러 행에 걸쳐 하나의 테이블 셀을 만드는 실험을 합니다.
  3. 여러 열에 걸쳐 하나의 테이블 셀을 만드는 실험을 합니다.
  4. 매번 결과를 봅니다.

배경색 및 이미지

[+/-]

각 테이블 셀(또는 행 또는 테이블)에 다른 배경색을 지정할 수 있습니다.

구문: 

<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">

여기서 color는 색상 이름 또는 16진수 코드입니다.

참고: 테이블 배경색은 버전 3 이상의 브라우저에서만 표시되며 올바르게 인쇄되지 않을 수 있습니다.

참고: HTML을 사용하여 배경색을 지정하는 것은 권장되지 않습니다 . 이 목적 을 위해 Cascading Style Sheets 를 사용하는 것이 훨씬 좋습니다.

배경 이미지 는 셀, 행 또는 전체 테이블의 모양을 수정한 것입니다 . 이 역시 버전 3 이상의 브라우저에서만 표시되며 올바르게 인쇄되지 않을 수 있습니다.

구문: 

<td background="filename">
<tr background="filename">
<table background="filename">

여기서 파일 이름은 배경 이미지의 경로와 파일 이름입니다.

참고: HTML을 사용하여 배경 이미지를 지정하는 것은 권장되지 않습니다 . 이 용도로 CSS 를 사용하는 것이 훨씬 좋습니다 .

작업 - 배경색 및 이미지

  1. table.htm 파일을 엽니다.
  2. 표 셀, 표 행 및 표 자체의 배경색을 변경해 보십시오.
  3. 테이블 셀, 테이블 행 및 테이블 자체에 배경 이미지를 추가합니다.
  4. 매번 결과를 봅니다.

열 그룹

[+/-]

테이블 열에 지정된 형식을 지정하려면 <col> 및 <colgroup> 태그를 사용할 수 있습니다. 이 태그는 테이블 상단에 있으며 지정된 열의 기본 형식을 지정합니다.

<col> 태그를 사용하면 첫 번째 인스턴스는 첫 번째 열의 형식을 나타내고 두 번째 인스턴스는 두 번째 열의 형식을 나타내는 식입니다. <colgroup>은 유사하게 작동하지만 여러 열을 포함하는 span 태그도 포함합니다. 

<table>
 <caption>Project Completion</caption>
 <colgroup>
  <col span="3" style="background-color:red">
  <col style="background-color:yellow">
  <col span="2" style="background-color:green">
 </colgroup>
 <tr><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th><th>May</th><th>Jun</th></tr>
 <tr><td>3%</td><td>17%</td><td>40%</td><td>55%</td><td>86%</td><td>100%</td></tr>
</table>

틀:Chrome, Firefox 및 Safari는 이러한 태그의 span 및 width 요소만 지원합니다.

원본 주소 "https://ko.wikibooks.org/w/index.php?title=HTML/표&oldid=42040"