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>은 필수 항목입니다. 잊어 버린 경우 다음 내용은 모두 마지막 행의 마지막 셀, 추가 테이블의 일부로 간주됩니다.
작업 - 테이블 만들기
- default.htm을 열고 해당 폴더에 table.htm으로 저장합니다.
- 문서 본문에 이 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>
- 파일을 저장하고 브라우저에서 봅니다.
결과는 다음과 같습니다:
| 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>입니다.
작업 - 표 캡션 및 머리글
- table.html 파일 열기
- 표에 나만의 캡션 추가
- 결과 보기
- 테이블 제목 ITEMS 및 $ PRICE 추가
- 결과 보기
테두리
+/-표 주위의 테두리는 선택 사항입니다. 때로는 표를 정의하는 데 도움이 되며 때로는 표가 없는 경우 표가 더 좋아 보입니다. 그러나 테이블을 생성하는 동안 테두리를 켜는 것은 테이블 작업을 훨씬 쉽게 만들기 때문에 매우 좋은 생각입니다. 테이블이 완성되면 테두리를 제거할 수 있습니다.
|
이 테이블의 테두리 너비는 1픽셀입니다. |
|
이 테이블의 테두리 너비는 5픽셀입니다. |
기본값은 0(즉, 경계선 없음)입니다.
테두리는 테이블 태그의 속성입니다. 구문은 다음과 같습니다.
<table border=X> 여기서 X는 테두리 크기(픽셀)입니다.
Internet Explorer 태그 전용이지만 테두리 색상을 지정할 수도 있습니다. 구문은 다음과 같습니다.
<table bordercolor="#000000">
HTML을 사용하여 테두리 색상을 지정하는 것은 권장되지 않습니다 . 이 용도로 CSS 를 사용하는 것이 훨씬 좋습니다 .
작업 - 테이블 주위에 테두리 만들기
- table.htm 파일을 엽니다.
- <table> 태그에 border="2"
를 추가합니다 - 파일을 저장하고 봅니다.
- 테두리의 크기를 변경하십시오(즉, 0, 10을 시도하고 미친 숫자를 시도하십시오).
- 이동하면서 결과를 봅니다.
바깥쪽 테두리만 커지는 것을 발견하셨나요?
높이와 너비
+/-기본적으로 테이블은 입력된 데이터만큼 큽니다.
테이블의 전체 높이와 너비를 변경하여 원하는 크기로 만들 수 있습니다.
크기를 절대 픽셀로 지정하거나 화면 크기의 상대 백분율로 지정할 수 있습니다.
구문은 다음과 같습니다. <table height=??? width=???> where ??? is the size in pixels or percentage.
개별 테이블 셀 또는 행의 치수를 제어하는 것도 가능합니다.
예: <tr height="80"> <td width="50%">
절대 및 상대 높이와 너비를 혼합할 수 있습니다.
패딩을 변경하여 CSS에서도 동일한 작업을 수행할 수 있습니다.
작업 - 테이블 크기 정의
- table.htm 파일을 엽니다.
- <table border="2"> 태그에서 높이와 너비를 추가합니다
. e.g. <table border="2" height=200 width=300>
- 파일을 저장한 다음 봅니다. 브라우저 창의 크기를 조정하고 무슨 일이 일어나는지 지켜보십시오. 테이블 크기는 그대로 유지됩니다.
- 측정값 변경을 실험하고 파일을 다시 봅니다.
- 이제 픽셀 측정값을 백분율로 바꿉니다 e.g. <table border="2" height="40%" width="50%">
- 파일을 저장한 다음 봅니다. 브라우저 창의 크기를 조정하고 무슨 일이 일어나는지 지켜보십시오. 이번에는 창 크기가 변경됨에 따라 테이블의 크기가 변경됩니다.
셀 간격 및 셀 패딩
+/-
셀 간격은 표 셀 사이의 픽셀 수입니다.
셀 패딩은 셀 내부의 픽셀 공간입니다. 즉, 정보와 표 셀의 측면 사이의 거리입니다.
이 두 옵션은 모두 <table> 태그의 속성입니다.
예. <table border="1" cellspacing="0" cellpadding="0">
참고: 둘 다 기본값은 2입니다.
작업 - 셀 간격 및 패딩
- table.htm 파일을 엽니다. 테이블의 높이와 너비가 크게 설정되어 있는지 확인하십시오(예: 300x200). 그렇지 않으면 셀 패딩 및 셀 간격의 효과를 볼 수 없습니다.
- 표 테두리, 셀 간격 및 셀 패딩의 크기를 변경해 보십시오. 0, 1, 5, 10 등의 다양한 조합을 시도하십시오.
- 매번 결과 보기
표 셀의 정렬
+/-표 셀 내용의 기본 정렬은 왼쪽 및 세로 가운데 정렬입니다.
셀의 정렬을 변경하려면 각 셀에 대해 개별적으로 수행해야 합니다. 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" 태그를 포함해도 테이블 내용이 정렬되지 않습니다. 대신 페이지의 전체 테이블을 정렬합니다. 즉, 테이블 외부의 텍스트가 테이블을 둘러싸도록 합니다.
작업 - 표 셀 정렬
- Open your table.htm file
- 표 셀의 정렬을 다음과 같이 변경합니다.:
|
or |
|
- 다른 수직 및 수평 정렬을 실험해 보십시오.
- 매번 결과 보기
행 범위 및 열 범위
+/-모든 행에는 동일한 수의 테이블 데이터가 있어야 하며, 때때로 테이블 데이터가 둘 이상의 열이나 행에 걸쳐 있어야 합니다. 이 경우 태그 colspan 및/또는 rowspan이 사용됩니다. 여기서 태그는 숫자로 설정됩니다.
| <-- 이 행에는 3개의 테이블 데이터 가 있습니다. | |||
<-- 이 행에는 2개가 있습니다. colspan="2"
| |||
<-- 이 행에는 세 개의 테이블 데이터가 있지만 하나는 다음을 사용하기 때문에 두 개의 행에 걸쳐 있습니다. rowspan="2"
| |||
| <-- 이 행에는 첫 번째 데이터가 사용 중이기 때문에 두 개의 테이블 데이터만 있습니다. | |||
Syntax:
- <td colspan=X> 여기서 X는 셀이 가로질러 있는 열의 수입니다.
- <td rowspan=X> 여기서 X는 셀이 가로질러 있는 행의 수입니다.
작업 - 행 범위 및 열 범위
- table.htm 파일을 엽니다.
- 여러 행에 걸쳐 하나의 테이블 셀을 만드는 실험을 합니다.
- 여러 열에 걸쳐 하나의 테이블 셀을 만드는 실험을 합니다.
- 매번 결과를 봅니다.
배경색 및 이미지
+/-각 테이블 셀(또는 행 또는 테이블)에 다른 배경색을 지정할 수 있습니다.
구문:
<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 를 사용하는 것이 훨씬 좋습니다 .
작업 - 배경색 및 이미지
- table.htm 파일을 엽니다.
- 표 셀, 표 행 및 표 자체의 배경색을 변경해 보십시오.
- 테이블 셀, 테이블 행 및 테이블 자체에 배경 이미지를 추가합니다.
- 매번 결과를 봅니다.
열 그룹
+/-테이블 열에 지정된 형식을 지정하려면 <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>