테이블의 역할은 HTML5에서 두 가지 차원 데이터를 표시하는 것입니다. , 나중에 소개됩니다). 다음은 주로 테이블을 만들기위한 HTML 요소를 소개합니다.
양식을 작성하십시오양식의 기본 요소는 다음과 같습니다. 테이블, tr 및 td.
표는 프레임 프레임의 너비를 정의하기 위해 테두리 속성을 지원하는 HTML 문서의 테이블을 나타냅니다.
TR은 테이블의 선을 나타냅니다.
TD는 다음 속성을 포함하여 테이블의 셀을 나타냅니다.
1) Colspan : 세포가 교차 할 수있는 컬럼의 수;
2) Rowspan : 세포가 교차 할 수있는 행의 수;
3) 헤더 : 표준 셀의 헤드 관련 헤더는 일반 브라우저에서 시각적으로 변경되지 않지만 화면 리더가 사용할 수 있습니다.
<pable> <tr> <td> 사과 </td> <td> Green </td> <td> Medium </td> </td> <td> 오렌지 </td> <td> 오렌지 </td> <td> 큰 </td> </tr> </table>
위의 표는 두 줄과 3 개의 열의 테이블을 정의합니다. 테이블 사용의 장점은 열의 너비가 가장 넓은 컨텐츠를 충족시키고 가장 높은 셀을 충족시킬 수 있도록합니다.
테이블 테두리테이블 요소의 테두리 속성을 사용하면 테이블에 경계를 추가 할 수 있습니다.
<테이블 테두리 = 1> <tr> <td> 사과 </td> <td> green </td> </tdium </td> </tr> <td> 오렌지 </td> <td> 오렌지 </ td> <td> 큰 </td> </tr> </table>
브라우저의 기본 테두리는 그다지 아름답 지 않으며 일반적으로 CSS를 사용하여 다양한 요소의 프레임 스타일을 설정해야합니다.
불규칙 테이블셀의 colspan 및 rowspan 속성을 사용하면 불규칙한 테이블을 구축 할 수 있으므로 아래의 일부 행 또는 열이 여러 셀의 예입니다.
<테이블 테두리 = 1> <ter> <th> 달 </th> <th> 저축 </th> </tr> <TD ColorPan = 2> 1 월 </td> </tr> <ter> <TD Colorpan = 2> 2 월 </td> </tr> </table>
다음은 여러 줄을 가로 지르는 셀의 예입니다.
<테이블 테두리 = 1> <ter> <th> 월 </th> <th> 저축 </th> </tr> <td> 1 월 </td> <td> $ 100.00 </td> <td rowspan = 2> $ 50 </td> </tr> <td> 2 월 </td> <td> $ 10.00 </td> </table>머리
TH 요소는 데이터의 데이터 및 설명을 구별하는 데 사용할 수있는 양식에 헤더를 추가하는 데 사용됩니다. Th 요소는 다음 속성을 지원합니다.
1) Colspan : 세포가 교차 할 수있는 컬럼의 수;
2) Rowspan : 세포가 교차 할 수있는 행의 수;
3) 범위 : 헤드 데이터를 단위 데이터와 연결하는 방법을 정의합니다.
3) 헤더 : 공간으로 분리 된 헤더 ID 목록에는 데이터 셀에 대한 헤더 정보가 제공됩니다.
<TABLE> <TER> <th> RANK </th> <th> 이름 </th> <th> 색상 </th> </th> </tr> <th> 좋아하는 : NOT/TD> <TD> 오렌지 </td> <td> 대형 </td> </tr> <ter> <th> 3 번째 좋아하는 : </th> <td> pomegraanate </td> <td> 일종의 Greeny-Red </ td> <td>는 중간에서 큰 </td> </tr> </table>에 따라 다릅니다.
TH와 TD는 한 줄로 사용할 수 있습니다.
셀이 헤더를 연결하게하십시오TD의 헤더 속성을 사용하는 것은 셀과 관련이있을 수 있습니다. 헤더 속성은 하나 이상의 TH 셀의 ID 속성 값이 될 수 있습니다.
<테이블 테두리 = 1 너비 = 100%> <ter> <th id = name> name </th> <th id = email> 이메일 </th> <th id = 전화> 전화> 전화 </th> <th id = 주소> 주소 </th> </tr> <ter> <td headers = name> George Bush </td> <td headers = email> [email protected] </td> <td headers = phone> + 789451236 </td> <td 헤더 = 주소> 5 번가 뉴욕, 미국 </td> </tr> </table>복잡한 시계를 구성하십시오
TH의 Colspan 및 Rowspan 속성을 사용하면 복잡한 테이블을 구성 할 수 있습니다.
<테이블 테두리 = 1> <tr> <th colspan = 2> 미국의 회사 </th> </tr> <th> 이름 </th> <th> addr </th> </tr> <td > Apple, Inc. </tr> </table>테이블에 구조를 추가하십시오
thead, tbody 및 tfoot 요소를 사용하여 양식에 구조를 추가하여 양식의 각 부분에 CSS 스타일을 추가하여 더 쉬워 질 수 있습니다.
1) 테이블 테마
tbody 요소는 헤더 (thead 요소 표현)와 스쿠터 (tfoot 요소 표현)를 제외하고 양식 테마의 전체 줄을 나타냅니다.
대부분의 브라우저는 테이블 요소를 처리 할 때 TBody 요소를 자동으로 삽입합니다.
2) 헤더를 형성하십시오
thead 요소는 양식의 제목 줄을 표시하는 데 사용됩니다. thead 요소가없는 경우, 모든 TR 요소는 양식의 주제의 일부로 간주됩니다.
3) 각주 추가
tfoot 요소는 형성 라인을 표시하는 데 사용됩니다. html5 이전에, tfoot 요소는 tbody 요소 앞에만 나타날 수 있고, html5에서, tfoot 요소는 tfoot 요소를 tfoot 요소에 배치 할 수있게한다.
아래는 TBody, Thead 및 Tfoot 요소를 사용하는 포괄적 인 예입니다.
<table> <d> <ter> <th> rank </th> <th> 이름 </th> <th> 색상 </th> <th> size </th> </thead> </thead> < tfoot> <ter> <th> rank </th> <th> 이름 </th> <th> 색상 </th> </th> </tfoot> <tr> <ter> <th> 좋아하는 : <th> <td> 사과 </td> <td> Green </td> <em> Medium </td> </tr> <tr> <th> 2nd 좋아하는 : </th> <td> Oranges </td> <td> 오렌지 </td> <td> 큰 </td> </tr> <tr> <th> 3 번째 좋아하는 : </th> <td> pomegraanate </td> <td> Greeny-Red의 </td> <td>의 중간에서 큰 </td> </tr> </tbody> </table>제목을 테이블에 추가하십시오
캡션 요소를 사용하면 양식의 제목을 정의하고 양식과 연결할 수 있습니다.
<table> <caption> 2011 과일 조사 결과 </caption> <thead> <tr> </th> <th> name </th> </th> <th> 크기 </th> </tr> </thead> <tfoot> <ter> <th> Rank </th> <th> 이름 </th> <th> 색상 </th> <th> size </th> not> <ter> <th> 두 번째 좋아하는 : </th> <td> 오렌지 </td> <td> 오렌지 </td> <td> 대형 </td> </tr> <trd 좋아하는 : </th> <td> pomegranate </td > <td> 종류의 Greeny-Red </td> <td>는 중간에서 큰 </td> </tbody> </table>에 따라 다릅니다.
양식은 양식의 첫 번째 요소가 아닌 캡션 요소 만 포함 할 수 있지만 항상 표 위에 표시됩니다.
열테이블에서 표는 선에 의해 형성되기 때문에 형식의 열의 정의 스타일과 같이 열의 작동이 편리하지 않습니다. ColGroup 요소를 사용하여 그룹을 지정할 수 있습니다.
<html> <head> <style> #colryp1 {back = 1> 요 </td> <td> $ 47 </td> </tr> </table> </body> </html>위의 예제는 두 개의 열이 첫 번째 열을 포함하고 두 번째 열에 나머지 1 개의 열이 포함되어 있으며 다른 그룹에 대해 다른 스타일을 지정합니다. ColGroup의 SPAN 속성은 스팬 속성을 지정하지 않으면 다음 예제와 동일한 효과를 지정할 수 있습니다.
<html> <head> <style> #colryp1 {back border = 1> <colgroup id = colorp1> <col id = col1and2 span = 2/> <col id = color3/> </colorp> <ter> </th> <th> title </th> <th> 가격 </th> </tr> <l> <td> 3476896 </td> <td> 나의 첫 번째 html </td> <td> $ 53 </td> </tr> <td> 2489604 </td> <td> 내 첫 CSS </td> <td> $ 47 </td> </table> </body> </html>위는이 기사의 모든 내용입니다.