Files
2nd/10_Wiki/Topic_HTML/HTML_Tables.md
T
koriweb 9609c04755 docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)
W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더).
- Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외)
- Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체)
- Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속)
각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:21:18 +09:00

5.6 KiB

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit
id title category status verification_status canonical_id aliases duplicate_of source_trust_level confidence_score created_at updated_at review_reason merge_history tags raw_sources applied_in github_commit
html-tables HTML Tables Frontend draft conceptual
HTML table
table element
tr td th
data table HTML
tabular data
B 0.90 2026-06-23 2026-06-23
html
web
frontend
w3schools
tables
https://www.w3schools.com/html/html_tables.asp

HTML Tables

🎯 한 줄 통찰 (One-line insight)

HTML tables let web developers arrange data into rows and columns using a <table> container whose rows (<tr>) hold header cells (<th>) and data cells (<td>). [S1]

🧠 핵심 개념 (Core concepts)

  • <table> is the container for the entire table. [S1]
  • Rows are <tr> ("table row") — each row starts with <tr> and ends with </tr>. [S1]
  • Data cells are <td> ("table data") — everything between <td> and </td> is the content of a table cell. [S1]
  • Header cells are <th> ("table header") — used for headings; by default the text is bold and centered, but this can be changed with CSS. [S1]
  • Cells can hold anything — a table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc. [S1]

🧩 추출된 패턴 (Extracted patterns)

  • Row-then-cell pattern — a table is built row by row; inside each <tr> you place one cell (<td> or <th>) per column. [S1]
  • Header row pattern — the first <tr> typically uses <th> cells to label each column. [S1]
  • Grouping pattern<thead>, <tbody>, and <tfoot> group the header, body, and footer content; <colgroup>/<col> describe column-level formatting; <caption> titles the table. [S1]

📖 세부 내용 (Details)

HTML Tables. HTML tables allow web developers to arrange data into rows and columns. [S1]

A basic table with a header row and two data rows:

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

Table Cells. Each table cell is defined by a <td> and a </td> tag. td stands for table data. Everything between <td> and </td> is the content of a table cell. [S1]

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
</table>

A table cell can contain all sorts of HTML elements: text, images, lists, links, other tables, etc. [S1]

Table Rows. Each table row starts with a <tr> and ends with a </tr> tag. tr stands for table row. You can have as many rows as you like in a table; just make sure the number of cells is the same in each row. [S1]

<table>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

Table Headers. Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag. th stands for table header. By default, the text in <th> elements are bold and centered, but you can change that with CSS. [S1]

<table>
  <tr>
    <th>Person 1</th>
    <th>Person 2</th>
    <th>Person 3</th>
  </tr>
  <tr>
    <td>Emil</td>
    <td>Tobias</td>
    <td>Linus</td>
  </tr>
  <tr>
    <td>16</td>
    <td>14</td>
    <td>10</td>
  </tr>
</table>

HTML Table Tags. [S1]

Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table

🛠️ 적용 사례 (Applied in summary)

The "Company / Contact / Country" example above is the canonical applied example of a complete data table with a header row. No external project/commit applications found in the source.

💻 코드 패턴 (Code patterns)

Minimal table (HTML):

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Header cell vs. data cell:

<th>Header text (bold, centered)</th>
<td>Data text</td>

⚖️ 모순 및 업데이트 (Contradictions & updates)

No contradictions found in the source. [S1]

검증 상태 및 신뢰도

  • 상태: draft
  • 검증 단계: conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
  • 출처 신뢰도: B (W3Schools — widely used educational reference, not a primary standards body)
  • 신뢰 점수: 0.90
  • 중복 검사 결과: 신규 생성 (New discovery)

🔗 지식 그래프 (Knowledge Graph)

📚 출처 (Sources)

📝 변경 이력 (Change history)

  • 2026-06-23: Initial draft synthesized from the W3Schools "HTML Tables" page (Astra wiki-curation, P-Reinforce v3.1 format).