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. 파일을 저장하고 브라우저에서 봅니다.

결과는 다음과 같습니다:

Food	Price
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

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

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

이 두 옵션은 모두 <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>