> 웹 프론트엔드 > HTML 튜토리얼 > HTML의 테이블 관련 지식 소개(코드 예제)

HTML의 테이블 관련 지식 소개(코드 예제)

不言
풀어 주다: 2018-10-12 17:27:25
앞으로
1990명이 탐색했습니다.

이 글의 내용은 테이블 관련 지식을 HTML(코드 예제)로 소개한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

웹페이지를 만들 때 웹페이지의 레이아웃을 합리적으로 계획하세요. 예를 들어, 웹 페이지에 테이블을 추가하는 작업은 상단, 중간, 하단의 세 부분으로 나눌 수 있습니다. 상단에는 웹 페이지 제목이나 로고 이미지가 저장되고, 중간 부분에는 전체 웹 페이지의 주요 내용이 저장됩니다. 하단 부분은 관련 생산 정보입니다. 또한 셀에 셀을 추가하여 콘텐츠를 카테고리와 수준으로 구성할 수 있습니다.

Table 태그 --table

은 이중 태그입니다. 테이블에는

, ,
의 세 가지 기본 요소가 포함되어 있습니다. 첫 번째 태그 와 마지막 태그
는 테이블의 시작과 끝을 나타냅니다. 'tr=테이블 행'은 행의 시작과 끝을 나타내는 데 사용되고, 'td=테이블 데이터'는 행에 있는 셀의 시작과 끝을 나타내는 데 사용됩니다.
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
                    ...
单元格内容单元格内容
单元格内容单元格内容

표 캡션--caption

표의 첫 번째 행에 위치한 제목 셀이라는 특수 셀이 있습니다. 제목 셀에는 테두리가 없으며 중앙에 표시됩니다. 기본.

<caption>表格的标题</caption>
로그인 후 복사

테이블 테두리 --border

기본적으로 테이블에는 테두리가 표시되지 않습니다. 내용을 더 잘 구분하기 위해 표 테두리의 너비를 설정할 수 있습니다.

로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

텍스트와 표의 테두리 사이의 거리-cellpadding

기본적으로 텍스트는 텍스트에 가깝습니다. 국경. 텍스트와 테두리 사이의 거리는 cellpadding을 통해 조정할 수 있습니다.

로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

표의 셀 사이의 거리--cellspacing

표의 셀 사이의 거리도 변경할 수 있습니다.

로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

셀 배경 이미지--배경

로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
nbsp;html>


    <meta>
    <title>小白</title>


<p>默认情况下的表格</p>
로그인 후 복사
                                                                              
亚洲
中国北京1949年10月1日
缅甸内比都1948年1月4日

设置属性后的表格

                                                                              
亚洲
中国北京1949年10月1日
缅甸内比都1948年1月4日

HTML의 테이블 관련 지식 소개(코드 예제)

Row merge attribute--rowspan

복잡한 테이블을 만들 때는 셀 병합을 사용해야 합니다

<td>
<pre class="brush:php;toolbar:false">nbsp;html>


    <meta>
    <title>单元格行合并</title>


로그인 후 복사
                                                                                     
招生简章
基础科目数学
外语
政治
专业课100

HTML의 테이블 관련 지식 소개(코드 예제)

열 병합 속성--colspan

복잡한 테이블을 만들 때는 셀 병합을 사용해야 합니다

<td>
<pre class="brush:php;toolbar:false">nbsp;html>


    <meta>
    <title>单元格列合并</title>


로그인 후 복사
                                                                                            
西安
长安区雁塔区碑林区
新城区高新区莲湖区

HTML의 테이블 관련 지식 소개(코드 예제)

테이블 중첩

테이블 내부에 다른 레이블이 포함되어 있으므로 테이블을 사용하여 레이아웃을 지정합니다. 페이지는 페이지의 여러 부분이 서로 충돌하지 않도록 할 수 있으며 전체적인 구조가 아름답습니다.

nbsp;html>


    <meta>
    <title>表格嵌套</title>


로그인 후 복사
                                                                              
示例
昙花             HTML의 테이블 관련 지식 소개(코드 예제)                      HTML의 테이블 관련 지식 소개(코드 예제)         
浏览器             百度                                                                                                                                    
百度贴吧百度网盘百度图库
        

HTML의 테이블 관련 지식 소개(코드 예제)

위 내용은 이 글의 전체 내용입니다. HTML에 대한 지식은 PHP 중국어 웹사이트의 HTML 개발 매뉴얼을 참조하여 학습할 수 있습니다.

위 내용은 HTML의 테이블 관련 지식 소개(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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