> 웹 프론트엔드 > HTML 튜토리얼 > HTML 웹 페이지 테이블의 구조적 마크업 적용에 대한 간략한 논의

HTML 웹 페이지 테이블의 구조적 마크업 적용에 대한 간략한 논의

高洛峰
풀어 주다: 2017-02-10 10:26:46
원래의
1488명이 탐색했습니다.

다음 편집자는 HTML 웹 페이지 테이블의 구조적 마크업 적용에 대해 간략하게 설명합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다. 에디터를 따라가며 살펴보겠습니다.

웹 테이블의 구조화된 마크업에 대해 이야기하기 전에 몇 장의 사진을 살펴보겠습니다.

HTML 웹 페이지 테이블의 구조적 마크업 적용에 대한 간략한 논의

Html 테이블의 구조

위의 첫 번째 그림과 같이 소위 구조화라고 합니다. 표시란 표를 머리글, 본문, 바닥글의 세 가지 유형으로 나누는 것을 의미합니다. 따라서 테이블 본문 부분을 수정해도 다른 두 부분에는 영향을 미치지 않으므로 애플리케이션이 분리되고 용이해집니다.

구조적 형식


XML/HTML 코드콘텐츠 복사 클립보드로

  1. 테이블> 

  2.  

  3. 머리>< ;/ 머리> -------- 헤더 영역

  4. 티바디>티바디> ---------신체 면적

  5. tfoot >tfoot>------------ 테이블 테일 영역

  6. 요약: 표를 세 부분으로 나누면, 테이블을 편집하는 것이 편리합니다.

  7. HTML 테이블 제목

위의 두 번째 그림과 같이 각 테이블에는 고유한 제목이 있는데, 제목이 내용을 따르도록 하려면 어떻게 해야 할까요?

표 제목

XML/HTML 코드


클립보드에 콘텐츠 복사


테이블>

 

  1.  

    캡션

  2. >
  3. caption
  4. > 테이블 아래의 속성 값> 

  5. 속성 이름

  6. 속성 값
  7. 설명정렬상위표 위 제목

  8. 하위

표 아래 제목

요약:

표 제목을 설정하면 언제든지 표와 함께 제목을 움직일 수 있습니다.

Html 인라인 형식

테이블의 인라인 형식은 무엇인가요? 우리가 일반적으로 엑셀에서 보는 것은 열 전체에 배경색을 추가하는 것입니다.

속성 이름


속성 값

설명정렬왼쪽

왼쪽가운데

승인

오른쪽

오른쪽 유지

Valign

오른쪽

오른쪽 유지

승인

아래

아래로

스팬

번호

일련번호

요약:

테이블의 인라인 형식을 설정하면 필요한 내용의 색상을 심화할 수 있습니다. 이는 열 내용에만 적용됩니다.

소스코드는 다음과 같습니다.

XML/HTML Code

클립보드에 내용 복사


  1. html>                    🎜>

    머리
  2. >

      

  3. li
  4. >

    중첩 사용 테이블 li>   

  5. 테이블
  6.  
  7. 너비

    ="500" >

    tr
  8. >

    🎜>td 정렬

    =
  9. "center"
  10. >학생 성적표td> > ;td

  11. >
  12. 🎜>

    테이블 테두리=

    "1"
  13. 너비

    ="100%"> 

  14. 머리>      > tr>                        번째
  15. >

    이름> 

  16. >중국어

  17. 번째

    > 번째 >수학

  18. 번째

    >번째>외국어

  19. 번째

    > >> 머리

    >
  20. >
  21. < ;tbody> tr> 

  22. < ;

    td> Zhang San

    td
  23. >

    >95td

  24. >
  25. >td>95td
  26. >

     

    td
  27. >

    95td> 

    tr
  28. >

     

  29. tr>     

  30. td>张삼td>     

  31. td>95td>      

  32. td>95td>     

  33. td>95td>     

  34. tr>     

  35. tr>     

  36. td>张三td >     

  37. td>95 td>     

  38. td> 95td>     

  39. td>95td>     

  40. tr>     

  41. 티바디>     

  42. tfoot>     

  43. tr>     

  44. td colspan="4">成绩汇总td >     

  45. tr>     

  46. 티풋>     

  47. 테이블>     

  48. td>     

  49. tr>     

  50. 테이블>     

  51.      

  52. br/>     

  53.      

  54. li>表格嵌套的使用twoli>     

  55.      

  56. 테이블 테두리="1" 너비="500" >     

  57. 캡션 정렬="하단">학생 점수캡션> 🎜>

    >
  58. tr

    >
  59. >
  60. 번째> 이름

  61. 번째

    > 번째> 

  62. >
  63. 수학

    > 🎜>>외국어번째>

  64. tr

    >  머리>

  65. tbody> >tr>

     
  66. td>

    장산
  67. td> 

  68. td>95td

    >
  69.  

    td

  70. >
  71. 95

    td >                                                td>

  72. tr> ; tr

    >
  73.  
  74. td>장산td

    >
  75. td>95td

    >
  76.                                                    ;/
  77. td> 

  78. td >95td

    >
  79. >

    tr>  tr>

  80. td >장산 td>

     
  81. td>95td>     

  82. td>95td>     

  83. td>95td>     

  84. tr>     

  85. tbody>     

  86. tfoot>     

  87. < ;tr>     

  88. td colspan ="4">成绩汇总td>     

  89. tr>     

  90. tfoot>     

  91. 테이블 >     

  92.         

  93. br/>      

  94.      

  95. >表格嵌套的使use三li>     

  96. 테이블 테두리="1" 너비="500" >     

  97. 캡션 정렬="하단">school生成绩캡션>     

  98. col >col>     

  99. col bgcolor=파란색>col>     

  100. 머리>     

  101. tr>     

  102. 번째>이름번째>     

  103. >语文>

  104. 번째>数school번째>     

  105. 번째>외语번째>     

  106. tr>     

  107. 머리>     

  108. tbody>     

  109. tr >     

  110. td>张三td>     

  111. td>95< ;/td>     

  112. td >95td>     

  113. td>95td>     

  114. tr>     

  115. tr >     

  116. td>张三td>     

  117. td>95td>     

  118. td>95td>     

  119. td>95td>     

  120. tr>     

  121. tr>     

  122. td >张三td>     

  123. < ;td>95td>     

  124. td>95td> ;     

  125. td>95td>     

  126. tr>

  127. tbody>     

  128. 티풋>     

  129. 티풋>     

  130. 테이블>     

  131.  

  132. 본체> 

  133. 머리> 🎜>

    html
  134. >

                                     이것은 구조화된 태그 적용에 관한 모든 내용이 모든 분들께 도움이 되기를 바랍니다. PHP 중국어 웹사이트를 지원해 주세요~Html 웹 페이지 테이블의 구조적 태그 적용에 대한 더 많은 기사를 보려면 다음을 참조하세요. PHP 중국어 웹사이트!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿