[기초강좌] HTML Tables - w3schools 번역

[기초강좌] HTML Tables - w3schools 번역

w3school 의 강좌 내용을 번역한 글입니다.

원문 : http://www.w3schools.com/html/html_tables.asp

HTML Tables

테이블은 <table> tag 로 정의된다.

테이블의 행( 원문 : row ) 은 <tr> tag 로 정의된다. ( tr 은 table row 의 약자 )

행의 셀( 혹은 열 ) 은 <td> tag 로 정의된다. ( td 는 table data 의 약자 )

행은 heading 으로 구분될 수도 있는데 이는 <th> tag 를 사용한다. ( th 는 table heading 의 약자 )

<td> elements 는 테이블의 데이터를 표시하는 곳이다.

<td> element 는 텍스트, 이미지, 리스트, 다른 테이블 등을 담을 수 있다.

테이블의 너비는 CSS 를 통해서 정의할 수 있다.

<table style="width:300px">

<tr>

  <td>Jill</td>

  <td>Smith</td> 

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td> 

  <td>94</td>

</tr>

</table>

눈으로 직접 보기.

An HTML Table with a Border Attribute

Border style 을 명시하지 않으면 테이블은 테두리 없이 표시된다.

테두리는 border 속성을 통해 추가될 수 있다.

<table border="1" style="width:300px">

<tr>

  <td>Jill</td>

  <td>Smith</td> 

  <td>50</td>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td> 

  <td>94</td>

</tr>

</table>

눈으로 직접 보기.

Tip : border 속성은 HTML 표준에 일치하지 않는다. 따라서 CSS 를 통해 정의하는 것이 추천된다.

<style>

table,th,td

{

border:1px solid black;

}

</style>

눈으로 직접 보기.

An HTML Table with Collapsed Borders

테이블 테두리를 사용할 때, 테두리를 겹으로 표시하지 않고 한 줄로 표시하고 싶다면, CSS 에서 border-collapse 속성을 사용하면 된다.

<style>

table,th,td

{

border-collapse:collapse

}

</style>

눈으로 직접 보기.

An HTML Table with Cell Padding

padding 값이 설정되지 않으면, 테이블 셀은 내부여백 ( 원문 : padding ) 없이 표시된다.

테이블 셀에 내부여백을 주고 싶다면 CSS 의 padding 속성을 사용하면 된다.

th,td

{

padding:5px;

}

눈으로 직접 보기.

HTML Table Headings

heading 은 <th> tag 로 정의된다.

대부분의 브라우저들이 heading 을 굵은 글씨로 표시하며, 가운데 정렬 시킨다.

<table style="width:300px">

<tr>

  <th>First</th>

  <th>Last</th> 

  <th>Points</th>

</tr>

<tr>

  <td>Eve</td>

  <td>Jackson</td> 

  <td>94</td>

</tr>

</table>

눈으로 직접 보기.

heading 을 왼족 정렬하고 싶다면 css 를 사용하면 된다.

th

{

text-align:left;

}

눈으로 직접 보기.

An HTML Table with Cell Spacing

cell 간 여백을 주고 싶다면 CSS 의 border-spacing 속성을 사용하면 된다.

table

{

border-spacing:5px;

}

눈으로 직접 보기.

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

다음 강좌 보기 >>

An HTML Table with a Border Attribute, An HTML Table with Cell Padding, An HTML Table with Cell Spacing, An HTML Table with Collapsed Borders, attribute, border, border-collapse, border-spacing, caption, Cell, col, colgroup, Collapse, css, demo, ELEMENT, Example, heading, HTML Table Headings, HTML Tables, padding, Row, style, stylesheet, table, table data, table heading, table row, TAG, tbody, TD, text-align, tfoot, th, thead, Tr, tutorial, [기초강좌] HTML Tables - w3schools 번역, 겹 테두리, 기초 강좌, 셀, 속성, 여백, 예제, 테두리