테이블이란 무엇입니까? 그것은 세포 세포로 구성됩니다. 표에서 <td>의 수는 각 행에 감싸는 세포 세포의 수 <tr>! 또한 기본 테이블 테이블에는 CSS 스타일이 추가되기 전에 브라우저에 테이블 라인이 표시되지 않습니다.
HTML의 일반적인 테이블 쓰기 방법 : A. <tr>… </tr> : 테이블 행에는 여러 쌍의 TR이 있으며 여러 행이 있습니다. B. <td>… </td> : <td>… C. <th>… </th> : 테이블 헤드의 셀, 테이블 헤더 및 텍스트는 대담하고 중앙에 표시됩니다. D. <테이블 요약 = 테이블 소개 텍스트>/*요약 내용은 브라우저에 표시되지 않습니다. 이 기능은 테이블의 가독성 (시맨틱)을 높이고 검색 엔진이 테이블 내용을 더 잘 이해할 수있게하며 스크린 리더는 특별한 사용자가 특별한 사용자가 테이블 내용을 읽을 수 있도록 더 잘 도울 수 있도록하는 것입니다. */ e.caption 태그, 제목 및 제목 추가 테이블에 제목은 테이블의 내용, 제목의 디스플레이 위치를 설명하는 데 사용됩니다.
<테이블 테두리 = cellPacing = cellpadding => <tr> <th> 헤더 </th> </tr> <tr> <td> 데이터 </td> </tr> </table>
<테이블 테두리 = cellPacing = cellpadding = summary => <caption> </caption> <tr> <th> 오늘은 금요일입니다 </td> </tr> </table>
주제로 돌아가서 셀 패딩과 셀 패키징의 차이가 다음 테이블 그림 세트와 셀 팩링 코드의 비교 인 지점으로 돌아가 봅시다.
<! doctype html> <html> <head> <메타 charset = utf-8> <title> 테이블의 셀 캡싱 차이 </title> <style type = text/css> 테이블 {margin-bottom : 50px; } .CESHI {국경 간격 : 20px; /*테이블에서 인접한 셀의 경계 사이의 거리를 지정합니다. */} </style> </head> <테이블 width = 600 CellPacing = 0 BorderColor =#333 경계 = 1> 캡션> 첫 번째 셀 </caption> <tr> <td> test 1 </td> <td> test 2 </td> <td> test 3 </td> </table> <table width = 600 Cellpacing = 20 Pordercolopor. Border = 1> <caption> 두 번째 셀 </caption> <tr> <td> test 1 </td> <td> test 2 </td> <td> test 3 </td> </tr> </table> <테이블 width = 600 BorderColor =#333 Border = 1 Class = ceshi> <cavtion> 세 번째 셀 </caption> <td> <td> <td> <td> 2 </td> <td> 테스트 3 </td> </tr> </table> </html>코드를 비교하면 두 개의 상단 테이블은 다른 설정을 가지고 있고, 하나는 0이고, 다른 하나는 20입니다. 표시된 결과는 첫 번째 테이블의 각 셀 사이의 거리는 0이고, 두 번째 테이블의 각 셀 사이의 거리는 20입니다. 확장 : 두 번째 테이블은 세 번째 테이블과 일치하지만 세 번째 테이블에는 셀 간격이 없습니다. 우리는이 경계 간격을 발견했다 : 20px; 세포 간격 = 20의 결과와 동일합니다. 예 : 요약 : 셀 간격 속성은 표의 셀들 사이의 간격을 지정하는 데 사용됩니다. 이 속성의 매개 변수 값은 숫자이며 셀 갭에 의해 차지하는 픽셀 포인트의 수를 나타냅니다.
<! doctype html> <html> <head> <메타 charset = utf-8> <title> 테이블에서의 셀 패딩 차이 </title> <style type = text/css> 테이블 {margin-bottom : 50px; } </style> </head> <hod> <테이블 width = 600px 경계 = 1 BorderColor =#ccc cellpadding = 0> <tr> <th> 나는 행복한 셀 테이블입니다 </th> <th> 나는 행복한 셀 테이블입니다 </th> <th> 나는 행복한 셀 테이블입니다 </th> </tr> </table> <테이블 width = 600px 국경 = 1#cc 셀러 팅입니다. <tr> <th> 나는 행복한 세포 양식입니다 </th> <th> 나는 행복한 세포 양식입니다 </th> <th> 나는 행복한 세포 양식입니다 </th> <th> 나는 행복한 세포 양식입니다 </th> </tr> </table> </body> </html>위의 코드 실행 결과에서 판단 : 두 테이블의 셀 패딩 코드 값이 다릅니다. 첫 번째 표에서, "나는 행복한 셀"이라는 단어는 그것이 위치한 셀에서 0입니다. 즉, CellPadding = 0이 설정되기 때문입니다. 두 번째 테이블에서 "I Am Happy Cell"이라는 단어는 그것이 위치한 셀과는 거리가 멀다. 간단히 말해서, 셀 패딩의 값은 얼마나 많은지, 테이블의 세포의 경계에서 몇 개의 블랭크가 남아 있으며, 셀의 요소는 그 공백으로 들어 가지 않습니다. || 셀 패드딩 속성은 셀 함량과 셀 경계 사이의 빈 거리의 크기를 지정하는 데 사용됩니다. 이 속성의 매개 변수 값은 또한 숫자이며, 셀 함량과 상단 및 하한 사이의 빈 거리의 높이에 의해 차지하는 픽셀의 수와 셀 함량과 왼쪽 및 오른쪽 경계 사이의 빈 거리의 폭에 의해 차지하는 픽셀의 수를 나타냅니다.
예를 들어 요약 : 세포 팩은 세포 사이의 거리를 나타내고, 세포는 세포 함량과 경계 사이의 거리를 나타냅니다. 전자는 여백과 같고 후자는 패딩과 같습니다. 둥지 (셀)-테이블의 내용; 둥지 충전 (테이블 충전) (CellPadding)-둥지와 둥지 공간을 분리하는 데 사용되는 둥지 외부의 거리를 나타냅니다. Nest Space (테이블 간격)-테이블 테두리와 둥지 충전 사이의 거리를 나타내며 둥지 충전 사이의 거리이기도합니다.
확장 1 : 테이블의 행과 열을 병합하는 방법은 무엇입니까? Colspan 크로스 컬럼 병합, Rowspan 크로스 행 병합
코드 디스플레이 :
<! doctype html> <html> <head> <메타 charset = utf-8> <title> colspan과 rowspan의 차이 </title> <style type = text/css> 테이블 {margin : 0 Auto; 마진 바닥 : 50px; 텍스트 정렬 : 센터; . <테이블 너비 = 600 셀 패드 딩 = 10 셀 패키징 = 2 테두리 = 1 국경 Color =#cc> <caption> 한 행과 두 개의 열을 표시하려면 지금 어떻게해야합니까? Colspan Cross-Colum Merge </caption> <tr> <td> 무언가를 말하고, 알지 못합니다 </td> <td colspan = 2> 무언가를 말하고, 알지 못합니다. =============================================================================================================== =============================================================================================================== =============================================================================================================== ===================================================================================================================================== <td> 무언가를 말하고, 알지 못합니다 </td> </tr> <tr> <td> 무언가를 말하고, 알지 못합니다 </td> <td> 무언가를 알지 못합니다. 열? Rowspan Cross-row Merge </caption> <tr> <td rowspan = 2> 무언가를 말하고, 알지 못합니다 </td> <td> 무언가를 말하지 말고, 알지 못합니다.확장 2 : 테이블 경계 병합 방법은 무엇입니까? 국경-콜라스 : 붕괴;
<!-테이블 셀 병합-> <스타일 유형 = 텍스트/css> 테이블 {Border-Collapse : Collapse; /* Border-Collapse : 별도; * / /*테이블의 행과 셀 테두리가 단일 테두리에서 결합되었는지 또는 표준 HTML에서와 같이 분리되어 있는지 여부를 나타냅니다. */} </style> <테이블 너비 = 600 CellPadding = 10 CellPacing = 2 Border = 1 BorderColor =#ccc> <tbody> <td> <td> 셀 1 </td> <td> Cell 2 </td> <td> Cell 3 </td> </tbody> </table>마지막으로 크롬 브라우저에서 시스템 기본 테이블 테두리 색상 회색, 테두리 간격은 2 등입니다.
/* 사용자 에이전트 스타일 시트* / /* 테이블 {디스플레이 : 테이블; 국경-콜라 랩스 : 별도; 국경 간격 : 2px; 국경 색 : 회색; } * / / * 테두리 = 1 기본값 경계 = 1px 테두리 ~ width : 1px; 국경 오른쪽 폭 : 1px; 국경 바닥 폭 : 1px; 왼쪽 넓이 : 1px; * / /* BorderColor 객체 BorderColor의 경계 색상을 반환하거나 설정합니다. W3C- String은 요소의 경계의 색상을 지정합니다. 색상 이름 또는 RGB 색상 코드를 지정하십시오. */이것은 테이블의 cesllpacing과 cellpadding의 차이점에 대한 세부 사항에 대한 기사입니다. 테이블에서 cesllpacing 및 cellpadding의 관련 내용은 wulin.com의 이전 기사를 검색하거나 아래 관련 기사를 계속 찾아보십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!