HTML 표(HTML Tables)

HTML Table Example

Company	Contact	Country
Alfreds Futterkiste	Maria Anders	Germany
Centro comercial Moctezuma	Francisco Chang	Mexico
Ernst Handel	Roland Mendel	Austria
Island Trading	Helen Bennett	UK
Laughing Bacchus Winecellars	Yoshi Tannamuri	Canada
Magazzini Alimentari Riuniti	Giovanni Rovelli	Italy

Try it Yourself »

---

Defining an HTML Table

HTML 테이블 정의하기

An HTML table is defined with the <table> tag.

HTML 테이블은 <table>태그 로 정의됩니다 .

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. 

각 테이블 행은 <tr>태그 로 정의됩니다 . 테이블 헤더가 <th>태그 로 정의됩니다 . 

By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다. 테이블 데이터 / 셀이 <td>태그 로 정의됩니다 .

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Try it Yourself »

Note : The <td> elements are the data containers of the table.

참고 : <td> 요소는 테이블 데이터 컨테이너. 

They can contain all sorts of HTML elements; text, images, lists, other tables, etc.

여기에는 모든 종류의 HTML 요소가 포함될 수 있습니다. 텍스트, 이미지, 목록, 다른 테이블 등

---

HTML Table - Adding a Border

HTML 표 - 테두리 추가

If you do not specify a border for the table, it will be displayed without borders.

표에 테두리를 지정하지 않으면 테두리없이 테두리가 표시됩니다.

A border is set using the CSS border property:

테두리는 CSS border속성을 사용하여 설정 됩니다.

Example

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

Try it Yourself »

Remember to define borders for both the table and the table cells.

표 셀과 표 셀의 테두리를 정의해야합니다.

---

HTML Table - Collapsed Borders

HTML 표 - 축소 된 테두리

If you want the borders to collapse into one border, add the CSS border-collapse property:

테두리를 한 테두리로 축소하려면 CSS border-collapse 속성을 추가하십시오 

Example

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

Try it Yourself »

---

HTML Table - Adding Cell Padding

HTML 표 - 셀 채우기 추가

Cell padding specifies the space between the cell content and its borders.

셀 패딩은 셀 내용과 경계 사이의 간격을 지정합니다.

If you do not specify a padding, the table cells will be displayed without padding.

패딩을 지정하지 않으면 패딩없이 표 셀이 표시됩니다.

To set the padding, use the CSS padding property:

패딩을 설정하려면 CSS padding속성을 사용하십시오 .

Example

th, td {
    padding: 15px;
}

Try it Yourself »

---

HTML Table - Left-align Headings

HTML 표 - 왼쪽 맞춤 표제

By default, table headings are bold and centered.

기본적으로 테이블 표제는 굵게 표시되고 중앙에 배치됩니다.

To left-align the table headings, use the CSS text-align property:

표제를 왼쪽 정렬하려면 CSS text-align속성을 사용하십시오 .

Example

th {
    text-align: left;
}

Try it Yourself »

---

HTML Table - Adding Border Spacing

HTML 표 - 테두리 간격 추가

Border spacing specifies the space between the cells.

테두리 간격은 셀 사이의 간격을 지정합니다.

To set the border spacing for a table, use the CSS border-spacing property:

표의 테두리 간격을 설정하려면 CSS border-spacing속성을 사용하십시오 .

Example

table {
    border-spacing: 5px;
}

Try it Yourself »

Note: If the table has collapsed borders, border-spacing has no effect.

참고 : 테이블에 접힌 테두리 border-spacing가있는 경우 효과가 없습니다.

---

HTML Table - Cells that Span Many Columns

HTML 표 - 여러 열을 포함하는 셀

To make a cell span more than one column, use the colspan attribute:

셀이 둘 이상의 열에 스팬되도록하려면 다음 colspan속성을 사용하십시오 .

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>55577854</td>
    <td>55577855</td>
  </tr>
</table>

Try it Yourself »

---

HTML Table - Cells that Span Many Rows

HTML 표 - 많은 행을 포함하는 셀

To make a cell span more than one row, use the rowspan attribute:

셀이 둘 이상의 행에 걸쳐 있도록하려면 다음 rowspan속성을 사용하십시오 .

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>55577854</td>
  </tr>
  <tr>
    <td>55577855</td>
  </tr>
</table>

Try it Yourself »

---

HTML Table - Adding a Caption

HTML 표 - 캡션 추가하기

To add a caption to a table, use the <caption> tag:

캡션을 표에 추가하려면 <caption>태그를 사용하십시오 .

Example

<table style="width:100%">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Try it Yourself »

Note : The <caption> tag must be inserted immediately after the <table> tag.

참고 : <caption> 태그는 바로 뒤에 삽입해야합니다 <table>태그입니다.

---

A Special Style for One Table

하나의 테이블을위한 특별한 스타일

To define a special style for a special table, add an id attribute to the table:

특수 테이블에 대한 특수 스타일을 정의하려면 테이블에 id 속성을 추가 하십시오.

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

Now you can define a special style for this table:

이제이 표에 대한 특수한 스타일을 정의 할 수 있습니다.

table#t01 {
    width: 100%; 
    background-color: #f1f1c1;
}

Try it Yourself »

And add more styles:

그리고 더 많은 스타일을 추가하십시오 :

table#t01 tr:nth-child(even) {
    background-color: #eee;
}
table#t01 tr:nth-child(odd) {
    background-color: #fff;
}
table#t01 th {
    color: white;
    background-color: black;
}

Try it Yourself »

---

Chapter Summary

Use the HTML <table> element to define a table

HTML <table>요소를 사용하여 표 정의

Use the HTML <tr> element to define a table row

HTML <tr>요소를 사용하여 테이블 행 정의

Use the HTML <td> element to define a table data

HTML <td>요소를 사용하여 테이블 데이터 정의

Use the HTML <th> element to define a table heading

HTML <th>표제를 사용하여 표제를 정의 하십시오.

Use the HTML <caption> element to define a table caption

HTML <caption>요소를 사용하여 표 캡션 정의

Use the CSS border property to define a border

border테두리를 정의 하려면 CSS 속성을 사용하십시오.

Use the CSS border-collapse property to collapse cell borders

CSS border-collapse속성을 사용하여 셀 테두리 축소

Use the CSS padding property to add padding to cells

CSS padding속성을 사용하여 셀에 패딩 추가

Use the CSS text-align property to align cell text

CSS text-align속성을 사용하여 셀 텍스트 맞춤

Use the CSS border-spacing property to set the spacing between cells

CSS border-spacing속성을 사용하여 셀 사이의 간격 설정

Use the colspan attribute to make a cell span many columns

colspan셀을 여러 컬럼으로 확장 하는 속성 사용

Use the rowspan attribute to make a cell span many rows

rowspan셀을 여러 행으로 확장 하려면 속성을 사용하십시오.

Use the id attribute to uniquely define one table

id특성을 사용하여 하나의 테이블을 고유하게 정의하십시오.

---

Test Yourself with Exercises!

---

HTML Table Tags

Tag	Description
<table>	Defines a table
<th>	Defines a header cell in a table
<tr>	Defines a row in a table
<td>	Defines a cell in a table
<caption>	Defines a table caption
<colgroup>	Specifies a group of one or more columns in a table for formatting
<col>	Specifies column properties for each column within a <colgroup> element
<thead>	Groups the header content in a table
<tbody>	Groups the body content in a table
<tfoot>	Groups the footer content in a table

---

출처 : W3School.com