HTML 표 예
| 번호 | 이름 | 성 | 전철기 |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
HTML 테이블을 정의
예
<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> »그것을 자신을 시도 예 설명 :
테이블이 정의되는 <table> 태그.
테이블은 테이블의 행으로 분할되어 <tr> 태그.
테이블 행은 테이블 데이터로 나누어 <td> 태그.
테이블 행은도에 나타난 제목으로 나눌 수있다 <th> 태그.
테이블 데이터 <td> 테이블 데이터 컨테이너.
그들은 텍스트, 이미지, 목록, 다른 테이블, 등과 같은 HTML 요소의 모든 종류를 포함 할 수 있습니다
테두리 속성을 가진 HTML 테이블
당신이 테이블에 테두리를 지정하지 않으면 테두리없이 표시됩니다.
테두리는 사용하여 추가 할 수 있습니다 border 속성 :
예
<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> »그것을 자신을 시도 border 속성은 HTML 표준에서 그것의 방법입니다! CSS를 사용하는 것이 좋습니다.
테두리를 추가하려면 CSS의 border 속성을 사용합니다 :
테이블과 테이블 셀 모두에 대해 경계를 정의해야합니다.
붕괴 된 테두리와 HTML 테이블
당신이 원하는 경우, 테두리, 하나 개의 경계로 붕괴 CSS를 추가하는 border-collapse :
셀 패딩과 HTML 테이블
셀 패딩은 셀 내용과 국경 사이의 공간을 지정합니다.
당신이 패딩을 지정하지 않는 경우, 테이블 셀 패딩없이 표시됩니다.
패딩을 설정하려면 사용 CSS padding 속성을 :
예
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
} »그것을 자신을 시도 HTML 표 제목
표 제목은로 정의 <th> 태그.
기본적으로 모든 주요 브라우저는 테이블 제목이 굵게 및 중심 표시 :
예
<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> »그것을 자신을 시도 테이블 머리글을 왼쪽 정렬하기 위해 사용하는 CSS text-align 속성을 :
테두리 간격을 가진 HTML 테이블
테두리 간격 세포 사이의 공간을 지정한다.
테이블에 대한 경계의 간격을 설정하려면 사용 CSS border-spacing 속성을 :
테이블이 국경을 무너 경우, 국경 간격은 효과가 없습니다.
많은 열 걸쳐 표 셀
한 열보다 더 많은 셀 범위를 만들려면, 사용 colspan 속성을 :
예
<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> »그것을 자신을 시도 많은 행에 걸쳐 표 셀
하나의 행보다 더 많은 셀 범위를 만들려면, 사용 rowspan 속성을 :
예
<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> »그것을 자신을 시도 캡션과 함께 HTML 테이블
테이블에 캡션을 추가하려면, 사용 <caption> 태그를 :
예
<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> »그것을 자신을 시도 <caption> 태그는 바로 뒤에 삽입해야 <table> 태그.
하나 개의 테이블에 대한 특별 스타일
특별한 테이블을위한 특별한 스타일을 정의하기 위해, 추가 id 테이블에 속성을 :
예
<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>지금 당신은이 테이블을위한 특별한 스타일을 정의 할 수 있습니다 :
table#t01 {
width: 100%;
background-color: #f1f1c1;
} »그것을 자신을 시도 그리고 더 많은 스타일을 추가합니다 :
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;
} »그것을 자신을 시도 장 요약
- HTML 사용 <table> 테이블을 정의하는 요소를
- HTML 사용 <tr> 테이블 행을 정의하는 요소를
- HTML 사용 <td> 테이블 데이터를 정의하는 요소를
- HTML을 사용하여 <th> 요소는 테이블 제목을 정의
- HTML 사용 <caption> 테이블 캡션을 정의하는 요소를
- CSS를 사용 border 의 경계를 정의하는 속성을
- CSS를 사용 border-collapse 셀 테두리를 축소하려면 속성을
- CSS를 사용 padding 세포에 패딩을 추가 속성을
- CSS를 사용하는 text-align 셀 텍스트를 정렬 속성을
- CSS를 사용 border-spacing 세포 사이의 간격을 설정하는 속성을
- 사용 colspan 셀 범위 많은 열을 만들기 위해 속성을
- 사용 rowspan 셀 범위 많은 행을 만들기 위해 속성을
- 사용하는 id 고유 한 테이블을 정의하는 속성을
연습으로 자신을 테스트!
연습 1» 연습 2» 연습 3» 운동 4» 운동 5» 운동 6»
HTML 테이블 태그
| 꼬리표 | 기술 |
|---|---|
| <table> | 테이블을 정의 |
| <th> | 테이블의 헤더 셀을 정의 |
| <tr> | 테이블의 행을 정의합니다 |
| <td> | 테이블의 셀을 정의합니다 |
| <caption> | 테이블 캡션을 정의 |
| <colgroup> | 서식에 대한 테이블에 하나 이상의 열 그룹을 지정합니다 |
| <col> | 내의 각각의 열에 대한 열 속성을 지정 <colgroup> 요소 |
| <thead> | 그룹 테이블의 헤더 내용 |
| <tbody> | 그룹 테이블의 본문 내용 |
| <tfoot> | 그룹 테이블의 바닥 글 내용 |