简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML 테이블 지식 요약

小云云
풀어 주다： 2017-11-17 14:29:28
원래의
2028명이 탐색했습니다.

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

1. <테이블> 마크

　 a, 기본 형식 <테이블 속성 1 = "속성 값" 속성 2 = 속성 값 > 테이블 내용 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, 언제 사용하나요? 사용 시기 표에 제목을 사용해야 하는 경우에는 <캡션> 표시를 ​​사용하면 됩니다

　b. 속성의 삽입 위치는

속성 바로 뒤, 테이블 행 앞

　c, align 속성

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

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

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

3,

mark

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

... 태그로 구성되며, 태그의 각 줄은 여러 < td> 또는 태그 내에 중첩되어야 하며 쌍으로 표시되어야 합니다. 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 테이블 설명 레이아웃 예

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

관련 라벨：
html 总结 表格
원천：php.cn
이전 기사：CSS, JS 주사위 복권 소스 코드 다음 기사：html을 pdf로 변환하는 js
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
PX가 REM 오류로 자동 변환  <style>html {   글꼴 크기: calc(100vw / 3.75);      }body {    글꼴 크기: 0.16rem;      }&l...
에서 2024-04-16 09:34:16
0
0
4687
페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
에서 2024-04-06 21:58:04
0
1
800
CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
에서 2024-04-06 20:22:15
0
1
454
Livewire 게으른 자리 표시자와 함께 laravel 구성 요소를 사용하는 방법 livewire3 자리 표시자 안에 내 laravel 구성 요소의 뼈대를 추가하고 싶습니다. 지금까지 시도한 작업: Laravel 구성 요소를 포함하는 Livew...
에서 2024-04-06 20:02:10
0
2
543
문자열을 HTML 코드(배열에서 생성됨)로 바꾸는 최상위 방법 다음과 같은 문자열이 주어지면...$htmlPattern="Usernameis:#name#andusercompanyis#company#";하위 ...
에서 2024-04-06 17:40:41
0
2
410
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！