03 HTML List, Table, Form_2. Table

  ● <table> 요소를 사용하여 표 만들기

<table> 요소는 HTML에서 테이블을 생성하는 데 사용됩니다. 테이블은 구조화된 데이터를 행과 열로 표시하는 방법입니다. 테이블을 만드는 방법은 다음과 같습니다.

 

  - 테이블 구조:
<table> 요소를 사용하여 테이블 구조를 생성하는 것으로 시작합니다. <table> 요소 안에는 테이블 행(<tr>)과 테이블 셀(<td>)이 포함됩니다. 각 행은 테이블 내의 가로 행을 나타내고 각 셀은 행 내의 데이터 항목을 나타냅니다.

 

  - 테이블 행(<tr>):
<tr> 요소를 사용하여 테이블 행을 생성합니다. <table> 요소 안에 <tr> 요소를 배치합니다. 각 <tr> 요소는 테이블의 새 행을 나타냅니다.
예:

<table>
  <tr>
    <!-- Table cells will go here -->
  </tr>
  <tr>
    <!-- Another row -->
  </tr>
</table>

 

  - 테이블 셀(<td>):
각 <tr> 요소 내에서 <td> 요소를 사용하여 테이블 셀을 만듭니다. 여는 태그와 닫는 <td> 태그 사이의 각 셀에 표시하려는 콘텐츠를 배치합니다. 각 <td> 요소는 테이블의 단일 셀을 나타냅니다.
예:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

위의 코드에는 4개의 셀이 있는 2x2 테이블이 있습니다.

 

  - 표 제목(<th>):
일반 테이블 셀에 <td>를 사용하는 대신 <th>를 사용하여 헤더 셀을 나타낼 수 있습니다. 머리글 셀은 일반적으로 열 또는 행의 데이터에 레이블을 지정하거나 데이터를 설명하는 데 사용됩니다.
예:

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

위의 코드에서 첫 번째 행에는 "Header 1" 및 "Header 2" 레이블이 있는 헤더 셀(<th>)이 포함됩니다.

 

  ● 표 행(<tr>) 및 표 데이터/셀(<td>)

  - 테이블 행(<tr>):
<tr> 요소는 HTML에서 테이블 행을 정의하는 데 사용됩니다. 테이블 행은 테이블 내의 데이터를 구성하고 구조화하는 데 사용됩니다. 각 <tr> 요소는 테이블 내의 가로 행을 나타냅니다.

예:

<table>
  <tr>
    <!-- Table cells will go here -->
  </tr>
  <tr>
    <!-- Another row -->
  </tr>
</table>

위의 코드에서 <table> 요소 내에 두 개의 테이블 행(<tr>)이 있습니다.

 

  - 테이블 데이터/셀(<td>):
<td> 요소는 HTML에서 테이블 데이터 또는 테이블 셀을 정의하는 데 사용됩니다. 각 <td> 요소는 테이블 행 내의 단일 셀을 나타냅니다. 테이블 셀에는 테이블에 표시되는 실제 데이터 또는 내용이 포함됩니다.
예:

<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

위의 코드에는 4개의 테이블 셀(<td>)이 있는 2x2 테이블이 있습니다. 각 셀에는 표시할 데이터 또는 콘텐츠가 포함됩니다.

 

  - 테이블 헤더(<th>):
일반 테이블 셀(<td>) 외에도 <th> 요소를 사용하여 테이블 헤더를 정의할 수 있습니다. <th> 요소는 일반적으로 테이블의 열 또는 행에 있는 데이터에 레이블을 지정하거나 데이터를 설명하는 헤더 셀을 나타내는 데 사용됩니다.
예:

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

위의 코드에서 첫 번째 행에는 "Header 1" 및 "Header 2" 레이블이 있는 헤더 셀에 대한 <th> 요소가 포함되어 있습니다.

 

  ● 표 헤더(<th>) 및 표 캡션(<caption>)

  - 테이블 헤더(<th>):
<th> 요소는 HTML에서 테이블 헤더를 정의하는 데 사용됩니다. 테이블 머리글은 일반적으로 테이블의 열 또는 행에 있는 데이터에 레이블을 지정하거나 데이터를 설명하는 데 사용됩니다. <th>를 사용할 때 헤더 셀에 의미론적 의미를 제공하여 스크린 리더와 검색 엔진이 테이블 구조를 더 쉽게 이해할 수 있도록 합니다.
예:

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

위의 코드에서 <th> 요소는 "Header 1" 및 "Header 2"를 레이블로 갖는 테이블 헤더를 나타냅니다.

 

  - 표 캡션(<caption>):
<caption> 요소는 표에 캡션이나 제목을 추가하는 데 사용됩니다. <caption> 요소는 여는 <table> 태그 바로 뒤, <tr> 또는 <th> 요소 앞에 배치되어야 합니다. 캡션은 테이블의 목적에 대한 간략한 설명 또는 요약을 제공합니다.
예:

<table>
  <caption>Monthly Sales</caption>
  <tr>
    <th>Product</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Product A</td>
    <td>100</td>
  </tr>
</table>

위의 코드에서 <caption> 요소는 테이블에 "Monthly Sales" 캡션을 추가하는 데 사용됩니다.

 

  - 표 머리글과 캡션 결합:
표 머리글과 캡션을 함께 사용하여 표에 대한 명확하고 설명적인 구조를 제공할 수 있습니다.
예:

<table>
  <caption>Employee Information</caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>Manager</td>
    <td>$60,000</td>
  </tr>
</table>

위의 코드에서 <caption> 요소는 전체 테이블에 대한 캡션을 제공하고 <th> 요소는 각 열의 헤더를 정의합니다.

  ● 셀 병합 및 열 또는 행에 걸쳐 배치하기 Merging cells and spanning columns or rows

  - 셀 병합:
경우에 따라 여러 열이나 행에 걸쳐 있는 더 큰 셀을 만들기 위해 여러 셀을 병합해야 할 수 있습니다. 셀을 수평으로 병합하려면(열 확장) <td> 또는 <th> 요소에서 colspan 속성을 사용할 수 있습니다. 셀을 세로로 병합하려면(행에 걸쳐 있음) <td> 또는 <th> 요소에서 rowspan 속성을 사용할 수 있습니다. colspan 속성은 셀이 확장해야 하는 열 수를 지정하고 rowspan 속성은 셀이 확장해야 하는 행 수를 지정합니다.
예:

<table>
  <tr>
    <th colspan="2">Header 1 and 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td rowspan="2">Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
  </tr>
</table>

위의 코드에서 첫 번째 행에는 colspan="2"를 사용하여 2열에 걸쳐 있는 헤더 셀이 있습니다. 두 번째 행의 첫 번째 셀은 rowspan="2"를 사용하여 2행에 걸쳐 있습니다.

 

  - 구조가 다른 셀 병합:
셀을 병합할 때 접근성과 적절한 렌더링을 보장하기 위해 테이블 ​​구조를 올바르게 유지해야 한다는 점에 유의하는 것이 중요합니다. 여러 열이나 행에 걸쳐 있는 셀은 후속 행과 열에서 적절하게 설명되어야 합니다.
예:

<table>
  <tr>
    <th>Header 1</th>
    <th colspan="2">Header 2 and 3</th>
  </tr>
  <tr>
    <td rowspan="2">Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
  </tr>
</table>

위의 코드에서 첫 번째 행에는 2열에 걸쳐 있는 헤더 셀이 있습니다. 두 번째 행의 첫 번째 셀은 2행에 걸쳐 있습니다. 후속 행에는 두 번째 열에 하나의 셀만 있습니다.

  ● CSS로 표 스타일 지정 Styling tables with CSS

  - 테이블 선택:
CSS를 사용하여 테이블 스타일을 지정하려면 <table> 요소를 직접 대상으로 지정하거나 클래스 또는 ID 선택기를 사용하여 특정 테이블을 대상으로 지정할 수 있습니다.
예:

table {
  /* CSS rules for the table */
}

/* or */

.table-class {
  /* CSS rules for tables with the "table-class" class */
}

#table-id {
  /* CSS rules for the table with the "table-id" ID */
}

 

  - 테이블 셀(<td>) 및 헤더(<th>) 스타일 지정:
<td> 및 <th> 요소를 대상으로 지정하여 테이블 셀 및 헤더의 스타일을 지정할 수 있습니다.
예:

td {
  /* CSS rules for table cells */
}

th {
  /* CSS rules for table headers */
}

 

  - 테두리 및 간격:
border 속성을 사용하여 테이블, 셀 및 헤더에 테두리를 추가합니다. border-collapse 속성을 사용하여 테이블 테두리의 간격 및 축소를 제어합니다.
예:

table {
  border-collapse: collapse;
  /* Additional CSS rules for table borders */
}

td, th {
  border: 1px solid #000;
  /* Additional CSS rules for cell borders */
}

 

  - 배경 및 텍스트 색상:
background-color 속성을 사용하여 테이블, 셀 또는 헤더의 배경색을 설정합니다. color 속성을 사용하여 테이블 내의 텍스트 색상을 설정합니다.
예:

table {
  background-color: #f1f1f1;
  /* Additional CSS rules for table background */
}

td, th {
  background-color: #fff;
  color: #000;
  /* Additional CSS rules for cell and header background and text color */
}

 

  - 패딩 및 여백:
패딩 속성을 사용하여 셀 또는 헤더 내에 간격을 추가하십시오. margin 속성을 사용하여 테이블 주변의 간격을 제어합니다.
예:

td, th {
  padding: 10px;
  /* Additional CSS rules for cell and header padding */
}

table {
  margin: 20px;
  /* Additional CSS rules for table margin */
}

 

  - 텍스트 정렬 및 스타일 지정:
text-align 속성을 사용하여 셀 또는 헤더 내에서 텍스트를 정렬합니다. font-size, font-weight 및 text-decoration과 같은 다른 텍스트 관련 속성을 사용하여 텍스트 스타일을 지정합니다.
예:

td, th {
  text-align: center;
  /* Additional CSS rules for text alignment */
}

th {
  font-weight: bold;
  /* Additional CSS rules for header text styling */
}