HTML Tables

« Previous Next Chapter »

HTML Table Example

Number First Name Last Name Points
1 Eve Jackson 94
2 John Doe 80
3 Adam Johnson 67
4 Jill Smith 50

HTML Tables 정의

Example

<table style="width:100%">
  <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 »

Example 설명:

표는 <table> 태그로 정의된다.

표는 <tr> 태그로 정의되는 테이블 행(table row)으로 나누어진다. (tr 은 table row 를 의미한다)

테이블 행(table row)은 <td> 태그에 의해 테이블 데이터로 나누어진다. (td 는 table data 를 의미한다)

또한, 행은 <th> 태그에 의해 제목들 로 나누어질 수 도 있다. (th 는 table heading 을 의미한다)

<td> 요소는 테이블의 데이터를 담는 곳이다.

<td> 요소는 텍스트, 이 미지, 목록, 다른 테이블 등과 같은 HTML 요소의 모든 종류를 포함 할 수 있습니다.

Note <td> 요소는 테이블의 데이터를 담는 곳이다.
<td> 요소는 텍스트, 이 미지, 목록, 다른 테이블 등과 같은 HTML 요소의 모든 종류를 포함 할 수 있습니다.

An HTML Table with a Border Attribute

border 스타일을 지정하지 않을 경우, 테이블은 테두리 없이 표시됩니다.

테두리는 border 속성을 사용하여 추가할 수 있다.:

Example

<table border="1" style="width:100%">
  <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  border 속성은 HTML 표준에서 빠지고 있는 추세이며,  CSS를 사용하는 것이 바람직하다.

테두리(borders)를 추가하기위해서, CSS border property를 사용한다:

Example

table, th, td {
    border: 1px solid black;
}
Try it Yourself »

table 과 table cells 모두에 borders 속성을 정의해야하는 것을 기억하시오.

HTML Table 의 접힌 테두리(Collapsed Borders) 

테이블 테두리 와 표 셀 테두리가 하나의 테두리로 접고 싶을 경우, CSS 에 border-collapse를 추가합니다.:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
Try it Yourself »

HTML Table 의 셀패딩(Cell Padding)

셀 패딩(cell padding)은 셍 내용과 그 테두리 사이의 공간을 명시합니다.

padding을 지정하지 않을 경우, 테이블 셀은 패딩 없이 표시됩니다.

패딩을 갖는 테이블을 표시하려면, CSS에 padding을 사용합니다:

Example

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}
Try it Yourself »

HTML Table 제목(Headings)

테이블 제목은 <th> 태그로 정의됩니다.

기본 값으로, 브라우저는 제목을 굵은글씨로 중앙정렬되게 표시합니다:

Example

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>
Try it Yourself »

제목을 왼쪽 정렬시키기 위해서는 CSS (text-align)를 사용한다:

Example

th {
    text-align: left;
}
Try it Yourself »

HTML Table 의 테두리간격(Border Spacing)

테두리 간격(border spacing)은 셀 들간의 간격을 명시한다.

테두리 간격을 갖는 표를 표시하기 위해서는 CSS  border-spacing 성질을 사용한다. :

Example

table {
    border-spacing: 5px;
}
Try it Yourself »

Note  테이블이 접은 테두리(collapsed border)를 가지면,  border-spacing 은 효과가 없다.

여러 열(Columns)로 확장된 Table Cells

셀을 하나 이상의 열로 확장하려면,  colspan 속성을 사용한다.:

Example

<table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>
Try it Yourself »

여러 행(Rows)으로 확장된 Table Cells

셀을 하나 이상의 행으로 확장하려면, rowspan 속성을 사용한다.  :

Example

<table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>
Try it Yourself »

HTML Table 켑션(Caption)

테이블에 켑션을 추가하는데, <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   <caption> 태그는<table> 태그 바로 다음에 삽입해야 한다. .

다른 Tables에 다른 Styles

위의 예들의 대부분은 각 테이블의 폭을 정의하는데 style 속성(width="100%")을 사용하였다. 

다른 테이블에 다른 폭을 정의 하는 것이 쉽게 이루어진다.

<head> 섹션의 style 요소는 페이지의 모든 테이블에 대한 스타일을 정의한다.   

특별한 테이블에 특별한 스타일을 정의 하려면, 테이블에 id attribute 을 추가한다. :

Example

<table id="t01">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Points</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
  • Use the HTML <tr> element to define a table row
  • Use the HTML <td> element to define a table data
  • Use the HTML <th> element to define a table heading
  • Use the HTML <caption> element to define a table caption
  • Use the CSS border property to define a border
  • Use the CSS border-collapse property to collapse cell borders
  • Use the CSS padding property to add padding to cells
  • Use the CSS text-align property to align cell text
  • Use the CSS border-spacing property to set the spacing between cells
  • Use the colspan attribute to make a cell span many columns
  • Use the rowspan attribute to make a cell span many rows
  • Use the id attribute to uniquely define one table

Test Yourself with Exercises!

Exercise 1 »  Exercise 2 »  Exercise 3 »  Exercise 4 »  Exercise 5 »  Exercise 6 »

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

« Previous Next Chapter »