<table>은 표를 만드는 태그입니다.
코드 (이탤릭체는 코드가 아닌 설명입니다) |
결과 |
||||||
<!DOCTYPE html> <html> <body> <table border="1"> (보더를 정하지 않으면 선이 투명합니다) <tr> (첫째줄) <th>Month</th> (<th>는 제목부;표제부를 의미) <th>Savings</th> </tr> <tr> (그 다음 줄) <td>January</td> (<td>는 내용부를 의미) <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </table> </body> </html> |
|
The <th> tag defines a header cell in an HTML table.
<th>는 표에서 제목부입니다.
An HTML table has two kinds of cells:
- Header cells - contains header information (created with the <th> element)
- Standard cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default. (제목부는 굵은 볼드체와 가운데 정렬이 기본입니다)
The text in <td> elements are regular and left-aligned by default. (내용부는 왼쪽 정렬에 일반 굵기체가 기본입니다)
그 다음으로 셀간에 넓이 비율 조정입니다
HTML <td> width Attribute
코드 (이탤릭체는 설명임) |
결과 |
||||||
<!DOCTYPE html> <html> <body> <table border="1" width="100%"> (표를 프레임에 100%로 꽉 채움) <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td width="70%">January</td> (전체 표의 70%를 차지하도록 넓이를 조절함) <td width="30%">$100</td> </tr> <tr> <td>February</td> (두번째 줄부터는 자동으로 윗줄의 넓이를 따라감) <td>$80</td> </tr> </table> <p>The width attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead.</p> </body> </html> |
The width attribute is deprecated in HTML 4, and is not supported in HTML5. Use CSS instead. |
HTML <table> cellspacing Attribute
예제를 보시겠습니다.
<!DOCTYPE html> <html> <body> <p>Table without cellspacing:</p> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with cellspacing:</p> <table border="1" cellspacing="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p><b>Note:</b> The cellspacing attribute is not supported in HTML5.</p> </body> </html>
|
Table without cellspacing:
Table with cellspacing:
Note: The cellspacing attribute is not supported in HTML5. |
셀 안쪽 여백
<!DOCTYPE html> <html> <body> <p>Table without cellpadding:</p> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p>Table with cellpadding:</p> <table border="1" cellpadding="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <p><b>Note:</b> The cellpadding attribute is not supported in HTML5. Use CSS instead.</p> </body> </html>
|
Table without cellpadding:
Table with cellpadding:
Note: The cellpadding attribute is not supported in HTML5. Use CSS instead. |
'HTML' 카테고리의 다른 글
| html div 여백 주기 - 위 오른쪽 아래 왼쪽 (0) | 2013.05.09 |
|---|---|
| html 한줄 띄우기 (0) | 2013.05.09 |
| [HTML 배우기] html 한 칸 띄우기 / 공백 삽입 (0) | 2013.05.09 |
| [HTML 배우기] html 가운데 정렬 (0) | 2013.05.09 |
| [사이트] html 및 프로그램 언어 배우기 - w2schools.com (0) | 2013.05.01 |
댓글