HTML로 테이블 만들기-HTML 튜토리얼-php.cn

HTML로 테이블을 생성하기 위한 필수 사항

HTML에서 사용되는 태그

Examples of Tables in HTML

Example 1: Simple Table

Example 2: Table with Borders and Padding

Example 3: Table with Styling

Example 4: Table with Caption

Example 5: Table with Nested Tables

Example 6: Table with Col Span and Row Span

Example 7: Table with Colgroup

집

웹 프론트엔드

HTML 튜토리얼

HTML로 테이블 만들기

王林

Sep 04, 2024 pm 04:37 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML 테이블에는 데이터를 삽입, 정렬, 표시할 수 있는 여러 행과 열이 있습니다. 이 데이터는 웹 페이지에 표 형식으로 표시됩니다. 이러한 테이블은 항목 목록 표시, 판매 보고서와 같은 표 형식 데이터 표시, 웹 페이지 섹션 레이아웃 생성 등과 같이 데이터를 순서대로 표시하는 데 도움이 됩니다.

이 기사에서는 다음 유형의 HTML 테이블을 만드는 방법을 알아봅니다.

간단한 테이블
테두리와 패딩이 있는 표
스타일링이 적용된 테이블
캡션이 포함된 표
중첩 테이블이 있는 테이블
열 범위와 행 범위가 있는 테이블
colgroup이 포함된 테이블

HTML로 테이블을 생성하기 위한 필수 사항

텍스트 편집기 또는 HTML 편집기: Notepad++, Sublime Text 또는 Visual Studio Code와 같은 텍스트 편집기 또는 HTML 편집기를 열어 HTML 코드를 작성하고 저장합니다. 기본 편집기로 Notepad++를 사용했지만 원하는 편집기를 사용해도 됩니다.
HTML 파일: Notepad++에서 새 파일을 만듭니다. 이름을 "table.html" 또는 원하는 다른 이름으로 지정하겠습니다. 단, 파일 이름은 ".html"로 끝나야 합니다. 이 파일은 웹페이지에 대한 코드를 작성하는 곳입니다. 이 파일을 만드는 데 도움이 필요하면 "HTML로 웹 페이지 디자인" 튜토리얼을 확인하세요.
HTML 코드: 이 문서에서는 다양한 유형의 테이블을 생성하는 데 필요한 모든 필수 코드를 제공했습니다. 코드를 복사하여 “table.html” 파일에 붙여넣기만 하면 됩니다.
웹 브라우저: “table.html” 파일에 HTML 코드 작성을 마친 후 웹페이지를 보고 테스트해야 합니다. Google Chrome, Mozilla Firefox 또는 Microsoft Edge와 같은 웹 브라우저를 사용할 수 있습니다. 이 기사의 모든 예에 대한 웹페이지를 보기 위해 Google Chrome을 사용했지만 원하는 브라우저를 선택할 수 있습니다.

HTML에서 사용되는 태그

HTML로 테이블을 만들기 전에 테이블을 만들고 구성하는 데 사용되는 태그를 이해하는 것이 중요합니다. HTML 테이블을 생성하는 데 사용되는 주요 태그는 다음과 같습니다.

Examples of Tables in HTML

Example 1: Simple Table

Let’s create a basic HTML table that showcases product information. We will include two columns labeled “Product” and “Price.” The table will contain a single row displaying data for the product “Apple” with a price of $20.

To create a simple HTML table:

Open an HTML file in a text or HTML editor.
Add the

Tag

Description

Defines a table and its content.

Defines a title or caption for a table.

Groups the header content in a table.

Groups the body content in a table.

Groups the footer content in a table.

Defines a table row.

Defines a table header cell.

Defines a table data/cell.

Specifies a set of one or more columns in a table for the purpose of formatting.

Defines the attributes for a group of columns in a table.

태그

설명

<테이블>

테이블과 그 내용을 정의합니다.

<캡션>

표의 제목이나 캡션을 정의합니다.

<머리>

표의 헤더 내용을 그룹화합니다.

본문 내용을 표로 그룹화합니다.

테이블의 바닥글 콘텐츠를 그룹화합니다.

표 행을 정의합니다.

번째>

표 헤더 셀을 정의합니다.

테이블 데이터/셀을 정의합니다.

형식 지정을 위해 테이블에서 하나 이상의 열 집합을 지정합니다.

테이블의 열 그룹에 대한 속성을 정의합니다.

element to define the table.

Use the

element to create table rows.

The

tag. For instance, you can use style=”background-color: #33cccc;” to set the background color to a nice shade of teal.

Code:

<table>
<tr>
<th style="background-color: #33cccc;">Country</th>
<th style="background-color: #33cccc;">Population</th>
<th style="background-color: #33cccc;">Capital</th>
</tr>
<tr>
<td>Spain</td>
<td>47 Million</td>
<td>Madrid</td>
</tr>
<tr>
<td>Finland</td>
<td>5.5 Million</td>
<td>Helsinki</td>
</tr>
</table>

로그인 후 복사

Output:
HTML로 테이블 만들기

Example 4: Table with Caption

Using an HTML table with a caption is a great way to present information on a webpage in a tidy and organized manner. It’s like giving your table a title or a brief description to help people grasp its content easily. To include a caption, all you have to do is use the

element defines table headers (column labels).

Use the

element to create table cells (data).

Insert the desired data within the table cells.

Save the file with the .html extension, and then open it in a web browser to view the table.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

Output:
The resultant table for product and price will be displayed as seen below:
HTML로 테이블 만들기

To add an additional column to the table in the example, you can use the

element within your table’s column. This element is used to define header cells for the column.

And if you want to add a new row to the table, you can use the

element. This element is used to define regular cells within the table row.

Code:

<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apple</td>
<td>$20</td>
<td>10</td>
</tr>
<tr>
<td>Orange</td>
<td>$10</td>
<td>15</td>
</tr>
</table>

로그인 후 복사

Output:
HTML로 테이블 만들기

Let’s see how to add borders to an HTML table. This is a way to visually separate the different sections of the table and make it easier to read and understand.

Example 2: Table with Borders and Padding

In this example, we will add a table element and set the border and cellpadding attribute. We will use the border attribute and set the width of the table’s border to 1 pixel. For the cellpadding attribute, we will use 5 pixels of padding for the content inside each cell.

Code:

<table border="1" cellpadding="5">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>Michael</td>
<td>27</td>
<td>Alaska</td>
</tr>
<tr>
<td>Evelyn</td>
<td>32</td>
<td>Ohio</td>
</tr>
</table>

로그인 후 복사

Output:
HTML로 테이블 만들기

Example 3: Table with Styling

If you want to improve the appearance of your table, you can use CSS (Cascading Style Sheets) to add various styles and formatting.

One way to enhance the table is by giving different cells a background color. To do this, you can simply add the style attribute with the background-color property inside the opening

tag and place it right below the tag.

Code:

<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
caption {
background-color: #33cccc;
padding: 8px;
font-weight: bold;
}
</style>
<table>
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>Margot Mitchell</td>
<td>Manager</td>
<td>$60,000</td>
</tr>
<tr>
<td>Ryan Arnett</td>
<td>Developer</td>
<td>$50,000</td>
</tr>
</table>

로그인 후 복사

Output:
HTML로 테이블 만들기

Example 5: Table with Nested Tables

In HTML, when we talk about a nested table, it means we have a table placed inside another table. So, basically, some cells in the outer table contain a whole new table structure within them. If you want to include a nested table, you just need to insert another table inside any cell of your main table. To understand better, here is an example:

Code:

<table border="1">
<tr>
<th style="background-color: #33cccc;">Device</th>
<th style="background-color: #33cccc;">Brand</th>
<th style="background-color: #33cccc;">Specifications</th>
</tr>
<tr>
<td>Smartphone</td>
<td>Apple</td>
<td>
<table border="1">
<tr>
<th style="background-color: #fddb5d;">Model</th>
<th style="background-color: #fddb5d;">Storage</th>
</tr>
<tr>
<td>iPhone 12 Pro</td>
<td>256GB</td>
</tr>
<tr>
<td>iPhone SE</td>
<td>128GB</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Laptop</td>
<td>HP</td>
<td>15.6" Display</td>
</tr>
<tr>
<td>Tablet</td>
<td>Samsung</td>
<td>10.5" Display</td>
</tr>
</table>

로그인 후 복사

Output:
HTML로 테이블 만들기

Example 6: Table with Col Span and Row Span

In HTML, the “colspan” and “rowspan” give you the power to merge or split cells horizontally (colspan) and vertically (rowspan) to create more advanced table structures.

If you want to merge cells horizontally, simply use “colspan” followed by the number of cells you want to merge. And if you want to merge cells vertically, you can use “rowspan” along with the number of cells you want to merge.

To use the colspan and rowspan attributes, you can add them directly within the

element to group columns in an HTML table. We can also use the tag within the tag to set a background color for specific columns. To implement this, you can simply add a right after the opening

elements that you want to merge.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.football {
background-color: #33cccc;
}
.tennis {
background-color: #33cccc;
}
.lebron {
background-color: #fddb5d;
}
.heading {
background-color: #808080; /* Grey */
color: #fff; /* White */
}
</style>
</head>
<body>
<table>
<tr>
<th class="heading">Sport</th>
<th colspan="2" class="heading">Player</th>
</tr>
<tr>
<td rowspan="2" class="football">Football</td>
<td>Lionel Messi</td>
<td>Cristiano Ronaldo</td>
</tr>
<tr>
<td>Neymar</td>
<td>Harry Kane</td>
</tr>
<tr>
<td class="tennis" rowspan="2">Tennis</td>
<td>Novak Djokovic</td>
<td>Rafael Nadal</td>
</tr>
<tr>
<td>Serena Williams</td>
<td>Naomi Osaka</td>
</tr>
<tr>
<td>Basketball</td>
<td colspan="2" class="lebron">LeBron James</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

Output:
HTML로 테이블 만들기

Example 7: Table with Colgroup

In HTML, we use the

tag.

Code:

<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<table>
<colgroup>
<col style="background-color: #a9a9a9;">
<col style="background-color: #fddb5d;">
<col style="background-color: #33cccc;">
</colgroup>
<tr>
<th>City</th>
<th>Country</th>
<th>Continent</th>
</tr>
<tr>
<td>New York</td>
<td>United States</td>
<td>North America</td>
</tr>
<tr>
<td>London</td>
<td>United Kingdom</td>
<td>Europe</td>
</tr>
<tr>
<td>Tokyo</td>
<td>Japan</td>
<td>Asia</td>
</tr>
</table>
</body>
</html>

로그인 후 복사

Output:
HTML로 테이블 만들기