HTML/표 편집하기

==최소한의 테이블==

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

<syntaxhighlight lang="html5">
 <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>
</syntaxhighlight>
&lt;td&gt;
모든 테이블은 &lt;table&gt; 태그로 시작하고 &lt;/table&gt; 태그로 끝납니다. table 태그에서 나중에 볼 수 있는 것처럼 테이블의 속성을 정의할 수 있습니다.

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

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

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

예를 들어 IE 및 Firefox에서:
*행 외부의 셀은 해당 수직 위치에서 별도의 행으로 처리됩니다.
*행에 있든 없든 셀 외부의 모든 내용은 발생한 순서대로 전체 테이블 앞에 놓입니다. IE는 각 항목을 새 줄에 넣습니다. Firefox는 그렇지 않지만 경우에 따라 항목 사이에 공백을 넣습니다.
  
선택적 <nowiki></td> 및 </tr>을 넣지 않으면 위의 내용은 첫 번째 행 앞의 내용을 참조하고 첫 번째 요소 앞의 행만 참조합니다. </table></nowiki>은 필수 항목입니다. 잊어 버린 경우 다음 내용은 모두 마지막 행의 마지막 셀, 추가 테이블의 일부로 간주됩니다.

'''작업 - 테이블 만들기'''

# default.htm을 열고 해당 폴더에 table.htm으로 저장합니다.
# 문서 본문에 이 HTML 코드를 만듭니다.
<syntaxhighlight lang="html5">
 <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>
</syntaxhighlight>
# 파일을 저장하고 브라우저에서 봅니다.

결과는 다음과 같습니다:

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

아직 테이블처럼 보이지 않지만 곧 추가할 예정입니다.
 
참고: 이 테이블은 두 개의 행(두 개의 &lt;tr&gt; 태그 확인)으로 구성되며 각 행에는 두 개의 데이터 항목(두 개의 &lt;td&gt; 태그)이 있습니다.

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

==캡션 및 제목==

간단한 예부터 시작하겠습니다.:
<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

'''캡션''' 은 테이블의 내용을 정의하거나 설명하는 데 유용합니다. 선택 사항입니다.
<code>caption</code>
표에 캡션을 추가하려면 다음과 같이 요소 내부에 캡션 텍스트와 함께 <code>caption</code> 여는 태그 뒤에 요소를 입력합니다.
<syntaxhighlight lang="html5">
<table>
<caption>Formulas and Results</caption>
...
</table>
</syntaxhighlight>

캡션은 일반적으로 상단의 표 테두리 외부에 표시됩니다. 캡션의 정확한 모양과 배치는 CSS 스타일에 따라 달라집니다.
 
테이블 '''headings''' 은 테이블 열의 내용을 정의하는 방법입니다. 일반적으로 첫 번째 &lt;tr&gt; 테이블 행에서만 사용됩니다.
 
셀에 &lt;td&gt;를 사용하는 대신 &lt;th&gt;를 사용합니다.

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

구문은 &lt;tr&gt;&lt;th&gt;text&lt;/th&gt;&lt;th&gt;text&lt;/th&gt;&lt;/tr&gt;입니다.

'''작업 - 표 캡션 및 머리글'''

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


==테두리==

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


<table border="5" cellspacing="0"><tr><td>
이 테이블의 테두리 너비는 5픽셀입니다. 
</td></tr></table>

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

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

&lt;table border=X&gt; 여기서 X는 테두리 크기(픽셀)입니다.

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

&lt;table bordercolor="#000000"&gt;

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

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

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

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

==높이와 너비==

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

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

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

구문은 다음과 같습니다.
&lt;table height=??? width=???&gt;
where ??? is the size in pixels or percentage.

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

예:
&lt;tr height="80"&gt;
&lt;td width="50%"&gt;

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

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

'''작업 - 테이블 크기 정의'''

# table.htm 파일을 엽니다. 
# &lt;table border="2"&gt; 태그에서 높이와 너비를 추가합니다
. e.g. &lt;table border="2" height=200 width=300&gt;
# 파일을 저장한 다음 봅니다. 브라우저 창의 크기를 조정하고 무슨 일이 일어나는지 지켜보십시오. 테이블 크기는 그대로 유지됩니다.
# 측정값 변경을 실험하고 파일을 다시 봅니다.
# 이제 픽셀 측정값을 백분율로 바꿉니다 e.g. &lt;table border="2" height="40%" width="50%"&gt;
# 파일을 저장한 다음 봅니다. 브라우저 창의 크기를 조정하고 무슨 일이 일어나는지 지켜보십시오. 이번에는 창 크기가 변경됨에 따라 테이블의 크기가 변경됩니다.

==셀 간격 및 셀 패딩==

[[Image:ProgrammingHTML-tables-cellpadding.gif|right|the difference between cellpadding and cellspacing]]

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

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

이 두 옵션은 모두 &lt;table&gt;  태그의 속성입니다. 

예. &lt;table border="1" cellspacing="0" cellpadding="0"&gt;

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

'''작업 - 셀 간격 및 패딩'''

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

==표 셀의 정렬 ==

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

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

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

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

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

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




'''작업 - 표 셀 정렬'''

# Open your table.htm file
# 표 셀의 정렬을 다음과 같이 변경합니다.:

<table><tr><td>
<table border="1" cellspacing="0" cellpadding="5" width=223 height=138 bordercolor="#000000">
<tr height=69><td valign=top>bread</td><td align=right valign=top>$2.99</td></tr>
<tr height=69><td valign=bottom>Milk</td><td valign=bottom align=right>$1.40</td></tr>
</table></td>
<td width=50 align=center><P><font size="+3">or</font></p></td>
<td bordercolor="#000000"> 
<table border="1" cellspacing="0" cellpadding="5" width=223 height=138 bordercolor="#000000">
<tr height=69><td align=right valign=bottom>bread</td><td valign=bottom>$2.99</td></tr>
<tr height=69><td valign=top align=right>Milk</td><td valign=top>$1.40</td></tr></table>
</td></tr></table>

# 다른 수직 및 수평 정렬을 실험해 보십시오.
# 매번 결과 보기

==행 범위 및 열 범위==

모든 행에는 동일한 수의 테이블 데이터가 있어야 하며, 때때로 테이블 데이터가 둘 이상의 열이나 행에 걸쳐 있어야 합니다. 이 경우 태그 colspan 및/또는 rowspan이 사용됩니다. 여기서 태그는 숫자로 설정됩니다.
{| width="70%" align="center" style="background:none;font-variant:small-caps"
|-
| style="background:black" width="5%"|<br/>
| style="background:black" width="5%"|<br/>
| style="background:black" width="5%"|<br/>
| border="none"|<-- 이 행에는 3개의 테이블 데이터 가 있습니다.
|-
|colspan="2" style="background:blue;"|<br/>
| style="background:black"|<br/>
| border="none"|<-- 이 행에는 2개가 있습니다. '''<code>colspan="2"</code>'''
|-
|rowspan="2" style="background:maroon"|<br/>
| style="background:black"|<br/>
| style="background:black"|<br/>
|border="none"|<-- 이 행에는 세 개의 테이블 데이터가 있지만 하나는 다음을 사용하기 때문에 두 개의 행에 걸쳐 있습니다. '''<code>rowspan="2"</code>'''
|-
| style="background:black"|<br/>
| style="background:black"|<br/>
|border="none"|<-- 이 행에는 첫 번째 데이터가 사용 중이기 때문에 두 개의 테이블 데이터만 있습니다.
|}

Syntax:
*&lt;td colspan=X&gt; 여기서 X는 셀이 가로질러 있는 열의 수입니다.
*&lt;td rowspan=X&gt; 여기서 X는 셀이 가로질러 있는 행의 수입니다.

'''작업 - 행 범위 및 열 범위'''

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

==배경색 및 이미지==

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

구문:
<syntaxhighlight lang="html5">
<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">
</syntaxhighlight>
여기서 color는 색상 이름 또는 16진수 코드입니다.

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

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

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

구문:
<syntaxhighlight lang="html5">
<td background="filename">
<tr background="filename">
<table background="filename">
</syntaxhighlight>
여기서 파일 이름은 배경 이미지의 경로와 파일 이름입니다.

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

'''작업 - 배경색 및 이미지'''

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

== 열 그룹 ==

테이블 열에 지정된 형식을 지정하려면 <nowiki><col> 및 <colgroup></nowiki>  태그를 사용할 수 있습니다. 이 태그는 테이블 상단에 있으며 지정된 열의 기본 형식을 지정합니다.
 
&lt;col&gt; 태그를 사용하면 첫 번째 인스턴스는 첫 번째 열의 형식을 나타내고 두 번째 인스턴스는 두 번째 열의 형식을 나타내는 식입니다. &lt;colgroup&gt;은 유사하게 작동하지만 여러 열을 포함하는 span 태그도 포함합니다.

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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