모든 테이블은 <table> 태그로 시작하고 </table> 태그로 끝납니다. table 태그에서 나중에 볼 수 있는 것처럼 테이블의 속성을 정의할 수 있습니다.
테이블에는 <tr> 테이블 행 태그로 시작하고 선택적으로 </tr> 태그로 끝나는 행이 포함됩니다. 행은 테이블 안에 있어야 합니다.
행에는 셀이 포함되어 있으며 각각은 <td> 테이블 데이터 태그로 시작하고 선택적으로 </td> 태그로 끝납니다. 셀은 행 안에 있어야 합니다.
테이블 셀을 행 외부에 배치하거나 셀, 행 또는 테이블을 닫는 것을 잊어버리면 예측할 수 없는 결과가 나타납니다. 테이블에 있어야 하는 텍스트가 테이블 외부의 예기치 않은 위치에 나타날 수 있습니다. 최악의 경우 테이블의 전체 내용이 표시되지 않습니다.
예를 들어 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>
아직 테이블처럼 보이지 않지만 곧 추가할 예정입니다.
참고: 이 테이블은 두 개의 행(두 개의 <tr> 태그 확인)으로 구성되며 각 행에는 두 개의 데이터 항목(두 개의 <td> 태그)이 있습니다.
표를 스프레드시트와 비교할 수 있습니다. 이것은 데이터를 포함하는 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''' 은 테이블 열의 내용을 정의하는 방법입니다. 일반적으로 첫 번째 <tr> 테이블 행에서만 사용됩니다.
표 주위의 테두리는 선택 사항입니다. 때로는 표를 정의하는 데 도움이 되며 때로는 표가 없는 경우 표가 더 좋아 보입니다.
그러나 테이블을 생성하는 동안 테두리를 켜는 것은 테이블 작업을 훨씬 쉽게 만들기 때문에 매우 좋은 생각입니다. 테이블이 완성되면 테두리를 제거할 수 있습니다.
<table border="1" cellspacing="0"><tr><td>
이 테이블의 테두리 너비는 1픽셀입니다.
</td></tr></table>
<table border="5" cellspacing="0"><tr><td>
이 테이블의 테두리 너비는 5픽셀입니다.
</td></tr></table>
기본값은 0(즉, 경계선 없음)입니다.
테두리는 테이블 태그의 속성입니다. 구문은 다음과 같습니다.
<table border=X> 여기서 X는 테두리 크기(픽셀)입니다.
Internet Explorer 태그 전용이지만 테두리 색상을 지정할 수도 있습니다. 구문은 다음과 같습니다.
<table bordercolor="#000000">
HTML을 사용하여 테두리 색상을 지정하는 것은 권장되지 않습니다 . 이 용도로 [[CSS Programming|CSS]] 를 사용하는 것이 훨씬 좋습니다 .
'''작업 - 테이블 주위에 테두리 만들기'''
# table.htm 파일을 엽니다.
# <table> 태그에 border="2"<br>를 추가합니다
# 파일을 저장하고 봅니다.
# 테두리의 크기를 변경하십시오(즉, 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%">
# 파일을 저장한 다음 봅니다. 브라우저 창의 크기를 조정하고 무슨 일이 일어나는지 지켜보십시오. 이번에는 창 크기가 변경됨에 따라 테이블의 크기가 변경됩니다.
==셀 간격 및 셀 패딩==
[[Image:ProgrammingHTML-tables-cellpadding.gif|right|the difference between cellpadding and cellspacing]]
셀 간격은 표 셀 사이의 픽셀 수입니다.
셀 패딩은 셀 내부의 픽셀 공간입니다. 즉, 정보와 표 셀의 측면 사이의 거리입니다.
이 두 옵션은 모두 <table> 태그의 속성입니다.
예. <table border="1" cellspacing="0" cellpadding="0">
참고: 둘 다 기본값은 2입니다.
'''작업 - 셀 간격 및 패딩'''
# table.htm 파일을 엽니다. 테이블의 높이와 너비가 크게 설정되어 있는지 확인하십시오(예: 300x200). 그렇지 않으면 셀 패딩 및 셀 간격의 효과를 볼 수 없습니다.
# 표 테두리, 셀 간격 및 셀 패딩의 크기를 변경해 보십시오. 0, 1, 5, 10 등의 다양한 조합을 시도하십시오.
# 매번 결과 보기
==표 셀의 정렬 ==
표 셀 내용의 기본 정렬은 왼쪽 및 세로 가운데 정렬입니다.
셀의 정렬을 변경하려면 각 셀에 대해 개별적으로 수행해야 합니다. align 명령은 <td> 태그에 포함됩니다. <tr> tag 태그에 정렬을 지정하여 전체 행의 정렬을 변경할 수도 있습니다.
'''수평 정렬'''<br>
구문:<br>
<td align="position"> 위치가 왼쪽, 중앙 또는 오른쪽인
경우 <br>
or<br>
<tr align="position"> 위치가 왼쪽, 중앙 또는 오른쪽인 경우
'''수직 정렬'''<br>
구문:<br>
<td valign="position"> 위치가 위쪽, 중간 또는 아래쪽인
경우<br>
or<br>
<tr valign="position"> 위치가 위쪽, 중간 또는 아래쪽인
테이블 행 태그와 테이블 태그에 align 및 valign 명령을 포함할 수도 있습니다.
참고: 태그 <code>table</code>에 <code>align="left"</code> 또는 <code>align="right"</code> 태그를 포함해도 테이블 내용이 정렬되지 않습니다. 대신 페이지의 전체 테이블을 정렬합니다. 즉, 테이블 외부의 텍스트가 테이블을 둘러싸도록 합니다.
