열 크기가 다른 HTML 테이블 만들기
이 문서에서는 사양에 맞게 HTML 및 CSS에서 열 너비를 수정하는 방법을 설명합니다. HTML5는 다양한 태그와 속성을 더 이상 사용하지 않기 때문에 필요한 기능을 얻기 위한 몇 가지 대체 전략을 다룰 것입니다.
이 자습서에서는 인라인 및 내부 CSS를 사용하여 HTML 테이블을 사용자 지정하는 방법을 다룹니다.
HTML 테이블 열의 크기 설정
웹 페이지에 대해 여러 열과 행이 있는 테이블을 자주 개발해야 합니다. 때로는 HTML 테이블의 각 열에 대해 서로 다른 너비가 필요합니다.
너비가 다른 열이 있는 테이블을 만드는 방법을 살펴보겠습니다. HTML5 이전에는 table 태그와 <th>와 같은 관련 태그에 width 속성이 있어 개발자가 필요한 열 너비를 설정할 수 있었습니다.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th width="15%">ID</th>
<th width="70%">Name</th>
<th width="15%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
위의 HTML 코드는 <th> 태그 안에 width 속성을 사용합니다. 테이블 너비는 100%로 설정됩니다.
이름 열이 다른 열보다 더 넓어야 합니다. 따라서 Name 열에 70% 너비를 할당하고 다른 두 열에 15% 너비를 각각 할당합니다.
모든 수치 70 + 15 + 17 = 100을 더하면 다시 100이 됩니다.
필요에 따라 테이블 너비를 백분율로 설정할 수 있습니다. 이 너비 비율은 <table>의 상위 태그에 따라 달라지며, 여기서는 <body> 태그입니다.
HTML5에서 width 속성은 더 이상 사용되지 않습니다. HTML은 더 이상 사용되지 않는 속성 및 태그를 지원하지 않습니다.
HTML5의 이러한 변화는 개발자가 필요한 스타일 지정에 CSS를 사용하도록 권장합니다. CSS를 사용하여 표와 열 너비를 설정하는 방법을 살펴보겠습니다.
인라인 CSS를 사용하여 테이블 열 너비 설정
<th>, 내에서 width 속성을 사용할 수 없기 때문에 여전히 인라인 스타일이라고 하는 태그 내부의 스타일을 사용하여 테이블 스타일을 지정할 수 있습니다. 각 열에 다른 너비 백분율을 지정할 수 있습니다.
아래 코드를 확인하여 명확하게 이해하십시오.
<html>
<head>
<style>
table, th, td {
border:1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th style="width:10%">ID</th>
<th style="width:40%">First Name</th>
<th style="width:40%">Last Name</th>
<th style="width:10%">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>Doe</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>Will</td>
<td>40</td>
</tr>
</table>
</body>
</html>
위의 코드에서 각 열에 백분율로 10, 40, 40 및 10 너비를 할당합니다. 이 수치를 더하면 100이 됩니다.
테이블 너비를 100%로 설정했기 때문에 동일한 범위에서 각 열을 나누어야 합니다.
내부 CSS를 사용하여 테이블 열 너비 설정
인라인 CSS를 사용하여 위 코드에서 열 너비를 설정했습니다. 그러나 인라인 CSS는 여러 웹 페이지 영역에서 동일한 기능을 원할 경우 많은 재작성을 수행해야 하므로 권장되지 않습니다.
HTML과 CSS 코드를 분리하는 것은 전문적인 관행입니다. 이제 내부 CSS를 사용하여 테이블 열의 스타일을 지정하는 방법을 살펴보겠습니다.
내부 CSS는 HTML head 태그 안의 style 태그 안에 작성됩니다.
방법 1: CSS 클래스 사용
가장 쉬운 방법 중 하나는 각 <th> 태그에 클래스를 할당한 다음 style 태그에서 스타일을 적용하는 것입니다. 방법은 다음과 같습니다.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.name {
width: 70%
}
.id, .age {
width: 15%
}
</style>
</head>
<body>
<table>
<tr>
<th class="id">ID</th>
<th class="name">Name</th>
<th class="age">Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
아주 간단합니다. 오른쪽? 그러나 이 방법은 열 수가 많은 경우에는 효율적이지 않습니다.
열이 10개 또는 20개인 테이블이 있고 각각에 대해 서로 다른 너비를 원한다고 가정해 보겠습니다. 각 태그에 클래스를 할당하고 모든 태그에 스타일을 지정하는 것은 바쁜 작업이 될 것입니다.
태그에 클래스를 부여하지 않고 style 태그에서 직접 호출하지 않고 이를 수행할 수 있는 방법이 있어야 합니다. 다음 방법에서 이 기술을 살펴보겠습니다.
방법 2: CSS 의사 클래스 선택기 사용
더 우수하고 효율적인 코드를 사용하여 예상 출력을 달성하는 다른 방법을 살펴보겠습니다.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(2) {
width: 70%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>
우리가 코드에서 무엇을 했는지 이해해 봅시다. CSS 선택기는 모든 부모의 n번째 자식 요소와 일치합니다.
CSS 가상 클래스 선택자 :nth-child(n)는 형제 요소 쌍의 위치를 기준으로 요소를 비교하는 데 사용됩니다. n은 임의의 숫자 또는 홀수 또는 짝수와 같은 키워드가 될 수 있습니다.
style 태그에서 <th> 태그를 선택하고 nth-child 선택기를 호출합니다. nth-chid(1)은 ID 열을 선택하고 nth-child(2)는 이름 열을 선택한다는 의미입니다.
이렇게 하면 각 태그에 클래스를 할당하지 않고 열의 너비를 사용자 지정할 수 있습니다.
여기서 한 가지 더 중요한 점은 ID 및 Age 열의 너비를 지정하면 나머지 너비가 자동으로 할당되므로 Name 열의 너비 백분율을 선택할 필요가 없다는 것입니다. 그것은 우리에게 같은 결과를 줄 것입니다.
아래 예를 확인하십시오.
<html>
<head>
<style>
table{
width: 100%
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th:nth-child(1) {
width: 5%
}
th:nth-child(3) {
width: 25%
}
</style>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jackson</td>
<td>40</td>
</tr>
</table>
</body>
</html>