HTML 테이블 지식 요약-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 테이블 지식 요약

小云云

Nov 17, 2017 pm 02:29 PM

html요약시트

프로그래머의 문에 들어서기 위해 우리가 거쳐야 할 길은 HTML입니다. 기본적인 HTML을 마스터해야만 다음 기술을 더 잘 배울 수 있습니다. 그래서 오늘은 HTML 테이블과 관련된 지식의 모든 측면을 공유하겠습니다.

1. 마크

　 a, 기본 형식 테이블 내용 b, 테이블 마크 속성

　 속성 : 테이블의 너비를 나타냅니다. 해당 값은 상위 요소의 픽셀(px) 또는 100%(%)일 수 있습니다. 높이 속성: 테이블의 높이를 나타내는 값은 픽셀(px) 또는 100%일 수 있습니다. parent 요소의 레벨 요소 비율(%)

　 Border 속성: 테이블의 바깥쪽 테두리 너비를 나타냅니다.

Align 속성: 테이블의 표시 위치, 왼쪽 값이 왼쪽에 표시됩니다. Center 에 표시됩니다. 중앙 오른쪽이 오른쪽에 표시됩니다. 기본 왼쪽

　 Cellspacing 속성: Cell time Spacing, 기본 2px, 단위 픽셀

　　cellpadding 속성: 셀 내용과 셀 테두리 사이의 표시 거리, 단위 픽셀

　 프레임 속성: 표시 거리를 제어합니다. table border

　　 void(기본값)는 테두리 없음을 의미합니다

　　 위는 위쪽 테두리만 의미합니다

　　아래는 아래쪽 테두리만 의미합니다

　　hsides는 위쪽 테두리와 아래쪽 테두리만 의미합니다

　　lhs는 왼쪽 테두리만 의미합니다

rhs는 오른쪽 테두리만 의미합니다

　　vsides는 왼쪽과 오른쪽 테두리만 의미합니다 Border

　　box에는 4개의 테두리가 모두 포함됩니다

　　border에는 4개의 테두리가 모두 포함됩니다

　rules 속성: 셀 사이에 구분선을 표시할지 여부와 방법을 제어합니다

　　none (기본값) 구분선 없음

　　all은 모든 구분선 포함을 의미합니다

　　rows는 행 구분선만 의미합니다

　　clos는 열 구분선만 의미합니다

　　groups는 행 조합 열 그룹 사이의 선만 구분하는 것을 의미합니다

　c, make a 간단한 웹 페이지 레이아웃

2 ,

표시

　a, 언제 사용하나요? 사용 시기 표에 제목을 사용해야 하는 경우에는 표시를 사용하면 됩니다

속성의 삽입 위치는 속성 바로 뒤, 테이블 행 앞

　c, align 속성

　 Top: 제목이 테이블 상단에 배치됩니다. botton: 제목이 테이블에 위치함 하단

　　left: 제목이 테이블의 왼쪽에 위치함

　　right: 제목이 테이블의 오른쪽에 위치함

mark

　a는 테이블의 행을 정의합니다. 각 테이블 행에 대해

... 태그로 구성되며, 태그의 각 줄은 여러 또는 태그 내에 중첩되어야 하며 쌍으로 표시되어야 합니다. b.

태그 b, 선택적 속성 레벨 설정 정렬 형식: align="color value" 　 하단: 상단에 정렬 상단: 하단에 정렬 중간: 정렬 중앙 4,	a,	및	는 모두
는 일반적으로 첫 번째 행이나 열에 위치하며,	는 굵게 표시됩니다. 셀의 특정 데이터를 나타내는 데이터 마크 　d. 둘 다의 마크 속성은 동일합니다 　e, 속성 　bgcolor: 셀 배경 설정 　Align: 셀 배경 설정 　 valign: 셀 수직 정렬 설정 　 Width: 셀 너비 설정 　 Height: 셀 높이 설정 　　　rowspan: 셀이 차지하는 행 수 설정 　　clospan: 셀이 차지하는 열 수 설정 eg: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table width="960" height="250" border="1" cellpadding="10" frame="box" > <caption>表格的标题</caption> <tr bgcolor="#ccc"> <th bgcolor="red">班级</th> <th>姓名</th> <th>年级</th> <th>成绩</th> </tr> <tr> <td>四年级一班</td> <td>张三</td> <td>16</td> <td>80</td> </tr> <tr> <td>四年级一班</td> <td>李四</td> <td>16</td> <td>70</td> </tr> <tr> <td>四年级一班</td> <td>王五</td> <td>16</td> <td>60</td> </tr> </table> </body> </html> 위 내용은 일부입니다. 가장 기본적인 html 테이블 관련 내용입니다. 위의 튜토리얼에 따라 테이블을 완성하시면 많은 이득을 얻으실 수 있을 것이라 믿습니다. 관련 권장 사항: HTML 테이블 속성에 대한 종합적인 소개 HTML 테이블 재발견 HTML 테이블에 대한 자세한 소개 HTML 테이블 레이아웃의 실제 사용 HTML 테이블 설명 레이아웃 예

태그

b, 선택적 속성

레벨 설정 정렬 형식: align="color value"

　 하단: 상단에 정렬

상단: 하단에 정렬

중간: 정렬 중앙

및

는 모두

는 일반적으로 첫 번째 행이나 열에 위치하며,

는 굵게 표시됩니다. 셀의 특정 데이터를 나타내는 데이터 마크

　d. 둘 다의 마크 속성은 동일합니다

　e, 속성

　bgcolor: 셀 배경 설정

　Align: 셀 배경 설정

　 valign: 셀 수직 정렬 설정

　 Width: 셀 너비 설정

　 Height: 셀 높이 설정

　　　rowspan: 셀이 차지하는 행 수 설정

　　clospan: 셀이 차지하는 열 수 설정

eg:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table width="960" height="250" border="1" cellpadding="10" frame="box" >
        <caption>表格的标题</caption>
    <tr bgcolor="#ccc">
        <th bgcolor="red">班级</th>
        <th>姓名</th>
        <th>年级</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>四年级一班</td>
        <td>张三</td>
        <td>16</td>
        <td>80</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>李四</td>
        <td>16</td>
        <td>70</td>
    </tr>
        <tr>
        <td>四年级一班</td>
        <td>王五</td>
        <td>16</td>
        <td>60</td>
    </tr>
    </table>
</body>
</html>

위 내용은 일부입니다. 가장 기본적인 html 테이블 관련 내용입니다. 위의 튜토리얼에 따라 테이블을 완성하시면 많은 이득을 얻으실 수 있을 것이라 믿습니다.

관련 기사

HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentasthuctureandenhancewebpages.1) thefinelayout, semantics 및 internactivity.2) semantictagsimproveAccessibility 및 sseo.3) appleasoftagscanoptimizeperformanceandenseRocRossercompatiber.

HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.May 01, 2025 am 12:01 AM

일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.

Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM

솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...

DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM

마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...

HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PM

HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.