HTML 표:단계별 가이드

HTML 테이블은 행과 열로 표시되는 데이터 세트입니다. HTML 테이블을 만들려면 <table> 요소. 을(를) 사용할 수 있습니다. <tr> 행 생성 <td> 열을 만들고 <th> 테이블 헤더를 생성합니다.

테이블은 행과 열을 사용하여 이해하기 쉬운 방식으로 데이터를 표시하는 데 사용됩니다. 라이더에게 버스가 언제 도착하는지 알려주는 버스 시간표부터 우리가 먹는 음식의 재료 테이블에 이르기까지 우리는 매일 테이블을 만납니다.

HTML에서 테이블은 데이터를 표시하는 방법으로 사용됩니다. 이 자습서에서는 HTML 테이블의 기본 사항, 여러 열과 행에 걸쳐 있는 셀, 테이블 스타일 지정 방법을 예제와 함께 설명합니다. 이 튜토리얼을 마치면 HTML로 테이블을 만들고 작업하는 데 전문가가 될 것입니다.

HTML 테이블 생성

테이블은 행과 열로 표시되는 데이터 집합입니다. 테이블을 사용하면 데이터 세트의 값 집합 간의 연결을 쉽게 확인할 수 있습니다.

HTML에서 테이블은 <table>을 사용하여 정의됩니다. 요소. <table> 내 요소, 다음을 사용할 수 있습니다.

• 행 생성
• 열 생성
• 테이블 헤더를 생성합니다.

위에서 했던 것처럼 커피숍에서 판매되는 커피를 가격과 함께 나열하는 테이블을 만들고 싶다고 가정합니다. 이 테이블에는 두 개의 열(커피와 가격)과 세 개의 행이 있어야 합니다. 다음 코드를 사용하여 이 테이블을 HTML로 정의할 수 있습니다.

<table>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

다음은 테이블의 결과입니다.

이 예에서는 표제 행 1개, 열 2개, 테이블 데이터 행 3개가 있는 테이블을 만들었습니다. 코드를 분석해 보겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

먼저 <table>을 사용했습니다. HTML 태그는 웹 페이지에 테이블을 생성하도록 지시합니다. 그런 다음 <tr>를 사용했습니다. 행을 생성하는 태그 및 <th> 태그를 사용하여 테이블의 열 헤더를 정의합니다. 이 경우 열 헤더는 Coffee입니다. 및 Price .

다음으로 <tr> 세 개를 더 사용했습니다. 태그를 사용하여 테이블의 데이터 셀에 커피 이름과 가격을 보여주는 3개의 테이블 행 각각을 생성합니다. 각 <tr> 태그에는 <td>가 포함됩니다. 테이블의 열 셀을 나타내는 데 사용되는 태그입니다. 예를 들어, td 요소는 Espresso를 나타내는 데 사용됩니다. 및 $2.00 첫 번째 커피 항목에서.

테이블 스타일링

HTML에서 표의 스타일을 지정할 수 있는 방법에는 여러 가지가 있습니다.

테두리

HTML에서 테이블에는 기본적으로 테두리가 없습니다. 즉, 테이블에 테두리를 표시하려면 CSS를 사용해야 합니다. CSS 테두리 속성은 HTML 테이블에 테두리를 추가하는 데 사용됩니다.

이전에 테이블 주위에 단색 검은색 테두리를 추가하고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

table, th, td {
	border: 1px solid black;
}

테이블 코드에서 이 스타일을 사용하면 테이블이 각 셀과 테이블 자체 주위에 테두리를 포함하도록 변경됩니다. 수정된 표는 다음과 같습니다.

이제 테이블에 테두리가 있어 테이블의 데이터를 더 쉽게 읽을 수 있습니다. 그러나 위에서 만든 스타일은 모든 셀 주위에 테두리를 배치하고 각 테두리를 구분합니다. 각 테두리를 하나로 축소하려면 border-collapse 속성을 사용할 수 있습니다. 이 작업을 수행하는 데 사용할 코드는 다음과 같습니다.

table {
	border-collapse: collapse
}

새 테이블은 다음과 같습니다.

보시다시피, 이제 테이블에는 각 셀과 테이블 자체 주위에 하나의 테두리가 아닌 하나의 테두리가 있습니다.

제목 정렬

기본적으로 머리글은 셀 중앙에 정렬됩니다. 제목을 셀의 왼쪽이나 오른쪽으로 정렬하려면 <th>에 text-align 속성을 지정할 수 있습니다. 테이블의 태그(<th> 태그는 제목을 지정하는 데 사용됩니다.

사용할 코드는 다음과 같습니다.

th {
	text-align: left;
}

위의 테이블에 이 스타일을 적용하면 다음 테이블이 생성됩니다.

위의 표는 표의 왼쪽에 열 머리글을 정렬했습니다.

HTML 테이블에 적용할 수 있는 다른 스타일이 많이 있지만 이 자습서의 목적을 위해 테이블 ​​테두리와 접힌 테두리에 중점을 두었습니다. 앞으로 우리는 튜토리얼의 이 부분에서 정의한 스타일을 사용하여 데이터를 더 쉽게 읽을 수 있도록 할 것입니다.

여러 행과 열 확장

표로 작업할 때 셀이 여러 행이나 열에 걸쳐 있기를 원할 수 있습니다.

예를 들어 이전의 가격 열이 두 열에 걸쳐 있기를 원한다고 가정합니다. 이것이 colspan 및 rowspan 속성이 들어오는 곳입니다. Rowspan은 테이블의 여러 행을 확장하는 데 사용되며 colspan은 테이블의 여러 열을 확장하는 데 사용됩니다.

다음은 colspan을 사용하여 Price를 확장하는 테이블의 예입니다. 두 열에 열:

<table>
    <tr>
        <th>Coffee</th>
        <th colspan="2">Price</th>
    </tr>
    <tr>
        <td>Espresso</td>
        <td>$2.00 (new)</td>
        <td>$2.00 (old)</td>
    </tr>
</table>

다음은 테이블이 표시되는 방식입니다.

보시다시피 가격 열은 이제 두 행에 걸쳐 있습니다. 또한 동일한 방식으로 rowspan을 사용하여 둘 이상의 행에 걸쳐 있는 셀을 생성할 수 있습니다.

메뉴의 특정 커피에 대한 세부 정보를 저장하는 테이블이 있다고 가정합니다.

고객이 커피를 구매하도록 유도하기 위해 매월 말일에 적용되는 할인된 커피 가격에 대한 정보와 동일한 제목 Price 아래에 일반 가격이 표시되기를 원합니다. , 가격을 구별하는 레이블이 있습니다. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.

<table>
        <tr>
            <th>Coffee</th>
            <td>Espresso</td>
        </tr>
        <tr>
            <th rowspan="2">Price</th>
            <td>$2.00 (regular)</td>
        </tr>
        <tr>
            <td>$1.80 (discounted)</td>
        </tr>
</table>

다음은 테이블의 출력입니다.

이 예에서 Price 레이블이 두 행에 걸쳐 있습니다.

표 머리글, 본문 및 바닥글 정의

표로 작업할 때 데이터를 더 잘 구조화하는 데 도움이 되는 세 가지 태그가 있습니다.

<thead> 태그는 <tbody> 테이블의 제목을 정의하는 데 사용됩니다. 태그는 테이블의 내용을 정의하는 데 사용되며 <tfoot> 태그는 표의 바닥글을 정의하는 데 사용됩니다.

이것이 어떻게 작동하는지 설명하기 위해 첫 번째 예의 표를 살펴보겠습니다. 커피숍에서 판매되는 모든 커피를 나열하는 테이블을 작성한다고 가정합니다. 코드를 더 쉽게 읽을 수 있도록 테이블의 머리글, 본문 및 바닥글을 분리하려고 합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.

<table>
	<thead>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	</thead>
	<tbody>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
	</tbody>
	<tfoot>
		<tr>
			<th>Last Updated</th>
			<td>January 9th, 2020</td>
		</tr>
	</tfoot>
</table>

이 표에서는 <thead>를 사용했습니다. , <tbody> 및 <tfoot> 태그를 사용하여 테이블 머리글, 본문 및 바닥글을 각각 정의합니다.

<thead> 태그는 Coffee가 포함된 헤더 행을 구별하는 데 사용됩니다. 및 Price 테이블 제목. <tbody> 태그는 테이블의 주요 데이터(커피 가격)가 포함된 행을 저장하는 데 사용됩니다.

<tfoot> 태그는 테이블이 마지막으로 업데이트된 시간을 나타내는 행을 저장하는 데 사용됩니다. 이 데이터는 커피 목록 및 가격에 대한 항목이 아니기 때문에 바닥글 태그에 배치했습니다.

이러한 태그는 선택 사항이지만 HTML에서 표를 더 잘 구성하는 데 도움이 됩니다.

HTML의 표 캡션

<caption> 태그는 caption이라고도 하는 제목을 추가하는 데 사용됩니다. , 테이블에.

<caption> 태그는 여는 <table> 바로 뒤에 위치해야 합니다. 당신의 테이블에 태그. 다음은 <caption>의 예입니다. Coffee Menu 헤더를 추가하는 데 사용되는 태그 커피 목록에:

<table>
	<caption>Coffee Menu</caption>
	<tr>
		<th>Coffee</th>
		<th>Price</th>
	</tr>
	<tr>
		<td>Espresso</td>
		<td>$2.00</td>
	</tr>
	<tr>
		<td>Cappuccino</td>
		<td>$2.50</td>
	</tr>
	<tr>
		<td>Latte</td>
		<td>$2.75</td>
	</tr>
</table>

우리 테이블은 다음과 같이 나타납니다.

우리 코드에서는 <caption>를 사용합니다. Coffee Menu 헤더를 추가하는 태그 테이블에.

결론

표는 원하는 대로 간단하거나 복잡하게 만들 수 있으며 이 기사에서는 HTML 표의 기본 사항에 대해 알아야 할 모든 내용을 다뤘습니다.

이 기사에서는 HTML로 표를 만드는 방법, 표에 기본 스타일을 적용하는 방법, 표를 구성하는 방법, 여러 열과 행에 걸쳐 셀을 확장하는 방법, 표에 캡션을 사용하는 방법에 대해 설명했습니다.

이제 전문가처럼 HTML로 된 테이블 작업을 시작하는 데 필요한 지식을 얻었습니다!