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