diff --git a/html_table_source.txt b/html_table_source.txt
new file mode 100644
index 0000000000000000000000000000000000000000..e1f657f309921ea5547e354411a3d6c8d8f2e108
--- /dev/null
+++ b/html_table_source.txt
@@ -0,0 +1,318 @@
+==최소한의 테이블==
+
+먼저 간단한 예를 살펴보겠습니다.:
+
+<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>
+<td>
+모든 테이블은 <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> 테이블 행에서만 사용됩니다.
+
+셀에 <td>를 사용하는 대신 <th>를 사용합니다.
+
+기본적으로 테이블 머리글의 텍스트는 굵게 중앙에 표시됩니다.
+
+구문은 <tr><th>text</th><th>text</th></tr>입니다.
+
+'''작업 - 표 캡션 및 머리글'''
+
+# 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(즉, 경계선 없음)입니다.
+
+테두리는 테이블 태그의 속성입니다. 구문은 다음과 같습니다.
+
+<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> 태그를 포함해도 테이블 내용이 정렬되지 않습니다. 대신 페이지의 전체 테이블을 정렬합니다. 즉, 테이블 외부의 텍스트가 테이블을 둘러싸도록 합니다.
+
+
+
+
+'''작업 - 표 셀 정렬'''
+
+# 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:
+*<td colspan=X> 여기서 X는 셀이 가로질러 있는 열의 수입니다.
+*<td rowspan=X> 여기서 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> 태그를 사용할 수 있습니다. 이 태그는 테이블 상단에 있으며 지정된 열의 기본 형식을 지정합니다.
+
+<col> 태그를 사용하면 첫 번째 인스턴스는 첫 번째 열의 형식을 나타내고 두 번째 인스턴스는 두 번째 열의 형식을 나타내는 식입니다. <colgroup>은 유사하게 작동하지만 여러 열을 포함하는 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 요소만 지원합니다.}}