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

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

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

Html 테이블의 구조

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

구조적 형식

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

1. 테이블> 

2.  

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

5. 티바디>…티바디> ---------신체 면적

7. tfoot >…tfoot>------------ 테이블 테일 영역

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

HTML 테이블 제목

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

표 제목

XML/HTML 코드

클립보드에 콘텐츠 복사

테이블>

 

1.  

   캡션

>
2. …

caption

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

은

4. 속성 이름

속성 값

5. 설명정렬상위표 위 제목

하위

표 아래 제목

요약:

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

Html 인라인 형식

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

…

속성 이름

속성 값

설명정렬왼쪽

왼쪽가운데

승인

오른쪽

오른쪽 유지

Valign

오른쪽

오른쪽 유지

위

승인

중

중

아래

아래로

스팬

번호

일련번호

요약:

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

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

XML/HTML Code

클립보드에 내용 복사

1. html>                    🎜>

   머리
2. >

     

3. li
4. >

   중첩 사용 테이블 li>   

5. 테이블
 
6. 너비

   ="500" > 

   tr
7. >

   🎜>td 정렬

   =
"center"

8. >학생 성적표td> > ; td

>
9. 🎜>

   테이블 테두리=

   "1"
10. 너비

    ="100%"> 

11. 머리>      > tr>                        번째
12. >

    이름일> 

13. 일>중국어

14. 번째

    > 번째 >수학

15. 번째

    > 번째>외국어

16. 번째

    > >>  머리

    >
>

17. < ;tbody> tr> 

18. < ;

    td> Zhang San

    td
19. >

    >95td

>
20. >td>95td
21. >

     

    td
22. >

    95td> 

    tr
23. >

     

24. tr>     

25. td>张삼td>     

26. td>95td>      

27. td>95td>     

28. td>95td>     

29. tr>     

30. tr>     

31. td>张三td >     

32. td>95 td>     

33. td> 95td>     

34. td>95td>     

35. tr>     

36. 티바디>     

37. tfoot>     

38. tr>     

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

40. tr>     

41. 티풋>     

42. 테이블>     

43. td>     

44. tr>     

45. 테이블>     

46.      

47. br/>     

48.      

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

50.      

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

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

    >
 

53. tr

    >
>

54. 번째> 이름

55. 번째

    > 번째> 회

>
56. 수학

    회> 🎜>>외국어번째>

57. tr

    >  머리> 

58. tbody> >tr>

     

59. td>

    장산

60. td> 

td>95td

>
61.  

    td

>
62. 95

    td >                                                td>

63. tr> ; tr

    >
 

64. td>장산td

    >

65. td>95td

    >
                                                   ;/

66. td> 

td >95td

>
67. >

    tr>  tr>

68. td >장산 td>

     

69. td>95td>     

70. td>95td>     

71. td>95td>     

72. tr>     

73. tbody>     

74. tfoot>     

75. < ;tr>     

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

77. tr>     

78. tfoot>     

79. 테이블 >     

80.         

81. br/>      

82.      

83. 리>表格嵌套的使use三li>     

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

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

86. col >col>     

87. col bgcolor=파란색>col>     

88. 머리>     

89. tr>     

90. 번째>이름번째>     

91. 일>语文일>

92. 번째>数school번째>     

93. 번째>외语번째>     

94. tr>     

95. 머리>     

96. tbody>     

97. tr >     

98. td>张三td>     

99. td>95< ;/td>     

100. td >95td>     

101. td>95td>     

102. tr>     

103. tr >     

104. td>张三td>     

105. td>95td>     

106. td>95td>     

107. td>95td>     

108. tr>     

109. tr>     

110. td >张三td>     

111. < ;td>95td>     

112. td>95td> ;     

113. td>95td>     

114. tr>

115. tbody>     

116. 티풋>     

117. 티풋>     

118. 테이블>     

119.  

120. 본체> 

121. 머리> 🎜>

     html
122. >

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