편집 가능한 HTML 표 만들기
이 문서에서는 HTML 테이블을 만들고 해당 셀을 편집 가능하게 만드는 방법에 대해 설명합니다.
HTML 테이블에 셀 만들기
웹 페이지를 만들 때 때때로 데이터 표현을 위한 테이블을 만들어야 할 수도 있습니다. HTML은 이를 달성하기 위해 table 속성을 제공합니다.
테이블에 셀을 생성하는 구문은 다음과 같습니다.
<table>
<tr>
<td>This is a cell</td>
</tr>
</table>
위의 코드에서 여러 요소를 볼 수 있습니다. <tr>은 테이블 행을 생성하기 위한 것입니다. 이 안에는 행 안에 셀을 만드는 데 사용되는 <td> 요소가 사용되었습니다.
전체 HTML 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="styles.css">
<title>HTML Table</title>
</head>
<body>
<table>
<tr>
<td>This is a cell</td>
</tr>
</table>
</body>
</html>
보시다시피 하나의 셀이 있는 테이블을 검색했습니다. 그러나 스타일을 지정하지 않았기 때문에 일반 텍스트로 표시됩니다.
셀에 몇 가지 스타일을 추가해 보겠습니다.
table {
background-color: rgb(139, 220, 247);
width: auto;
}
td{
border: 1px solid #000000;
text-align: center;
padding: 16px;
}
위의 출력에서 이제 테이블 셀로 볼 수 있습니다.
HTML에서 편집 가능한 표 만들기
경우에 따라 사용자가 표 셀의 내용을 변경해야 할 수도 있습니다.
HTML table 요소는 사용자가 편집 가능한 셀을 만들 수 있는 contenteditable 속성을 제공합니다. 이를 사용하여 테이블 셀을 쉽게 편집할 수 있습니다.
contenteditable 속성을 사용하여 셀을 편집 가능하게 만드는 구문은 다음과 같습니다.
통사론:
contenteditable = "value"
contenteditable 속성의 값으로 true 또는 false를 제공할 수 있습니다. 값이 true이면 셀을 편집할 수 있지만 값이 false이면 셀을 편집할 수 없습니다.
동일한 스타일로 이전 예제를 사용하여 어떻게 할 수 있는지 봅시다. 그에 따라 셀의 데이터를 변경할 수 있습니다.
<table>
<tr>
<td contenteditable="true">This is a cell</td>
</tr>
</table>
위의 예제 코드에서 <td> 요소 내에 contenteditable 특성을 추가했습니다. 그런 다음 값을 true로 설정합니다.
결과적으로 아래와 같이 편집 가능한 셀을 가질 수 있습니다. 셀을 편집하려면 셀을 두 번 클릭합니다.
이제 contenteditable 속성의 값으로 false를 지정하면 어떤 일이 발생하는지 살펴보겠습니다.
<table>
<tr>
<td contenteditable="false">This is an editable cell</td>
</tr>
</table>
보시다시피 테이블의 데이터나 내용은 더 이상 편집할 수 없습니다. true 및 false 값은 서로 다른 경우에 중요합니다.
일부 개발자는 테이블을 사용하여 양식 및 기타 항목을 만듭니다. 때때로 일부 데이터는 있는 그대로 유지해야 하며 개발자는 여기서 false 값을 사용할 수 있습니다.
위의 예와 같이 사용자가 변경할 수 있는 데이터가 있는 경우 true 옵션을 사용할 수 있습니다.
이제 true와 false를 모두 사용할 수 있는 테이블을 만들어 봅시다.
예를 들어, 강사가 세 학생의 데이터를 저장하기 위해 웹 페이지에 테이블을 원한다고 가정하고 이를 구현할 것입니다. 열 머리글로 Student ID, Name 및 Grade가 필요하며 Name 및 Grade 열 아래에 추가하는 데이터는 편집 가능해야 합니다.
그 이유는 그가 이름을 부정확하게 입력할 수 있기 때문입니다. 또한 학생들이 재수정을 요구할 수 있기 때문에 성적을 변경해야 할 수도 있습니다.
다음 코드 청크를 사용하여 테이블을 만들어 봅시다.
<table>
<!-- Creating the first row as table headers -->
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
<!-- Creating the second row -->
<tr>
<td>001</td>
<td>Simon Nick</td>
<td>A</td>
</tr>
<!-- Creating the third row -->
<tr>
<td>002</td>
<td>John Robbert</td>
<td>C</td>
</tr>
<!-- Creating the fourth row -->
<tr>
<td>007</td>
<td>Chris Henderson</td>
<td>B</td>
</tr>
</table>
표에 몇 가지 스타일을 추가하여 표 셀을 별도로 볼 수 있습니다.
table {
background-color: beige;
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
이제 우리 테이블은 이전보다 더 분명해 보입니다.
다음 단계는 편집 가능한 셀을 설정하는 것입니다. 아래와 같이 관련 값으로 해당 셀에 contenteditable 속성을 추가해 보겠습니다.
<table>
<!-- Creating the first row as table headers -->
<tr>
<th>Student ID</th>
<th>Name</th>
<th>Grade</th>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">001</td>
<td contenteditable="true">Simon Nick</td>
<td contenteditable="true">A</td>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">002</td>
<td contenteditable="true">John Robbert</td>
<td contenteditable="true">C</td>
</tr>
<!-- Creating the first row as table headers -->
<tr>
<td contenteditable="false">007</td>
<td contenteditable="true">Chris Henderson</td>
<td contenteditable="true">B</td>
</tr>
</table>
위의 코드에서와 같이 Name 및 Grade와 관련된 모든 셀에 true 값을 사용하여 contenteditable 속성을 설정했습니다.
이제 위의 코드를 실행하면 Student ID 셀을 제외한 모든 셀이 아래와 같이 편집 가능하게 됩니다.
이름 및 등급 편집 시 출력:
Student ID 셀을 편집하려고 할 때 출력:
보시다시피 contenteditable의 값이 false이기 때문에 Student ID 셀을 편집할 수 없습니다.
결론
이 문서에서는 HTML 테이블을 만드는 방법과 몇 가지 예제를 사용하여 해당 테이블을 편집 가능하게 만드는 방법에 대해 설명했습니다. 또한 true 및 false 값과 함께 contenteditable 속성을 사용하는 방법을 배웠습니다.
편집 가능한 셀을 원하면 true를 값으로 지정하고 해당 기능이 필요하지 않으면 false를 값으로 설정하거나 속성을 제거하십시오.
JavaScript를 사용하여 셀을 편집 가능하게 만들 수 있지만 이는 목표를 달성하는 간단한 방법입니다.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.