지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
찾다
logo
  • 로그인
  • 가입
비밀번호 재설정 성공

당신이 관심을 갖고 있는 프로젝트를 팔로우하고 그들에 관한 최신 뉴스를 맛보세요

HTML 기본 튜토리얼 테이블 태그

테이블 태그

웹 페이지에는 다음과 유사한 기능이 있습니다. 물론 엑셀과 비슷한 기능도 있을텐데, 테이블도 그 중 하나입니다

< /tbody>

테이블의 구조

<table>

;</td>

                                                                                ;

               ~            td>

                     <td></td>

< ;/table>

<테이블>속성

너비: 테이블 너비, 단위는 백분율 또는 고정 값일 수 있습니다. 높이: 테이블 높이.

정렬: 표의 가로 정렬, 값: 왼쪽, 가운데, 오른쪽
테두리: 테두리 두께.

  • 테두리 색상: 테두리 색상입니다.

  • bgColor: 테이블 배경색입니다.

  • 배경: 배경 이미지 URL.

  • cellpadding : 셀 가장자리와 내용 사이의 거리(padding 거리)

  • cellpacing: 셀 사이의 거리(간격)

  • 규칙: 셀 경계선 병합, 값: 모두

  • 참고: 규칙 호환성이 좋지 않으므로 CSS를 사용하여 교체하세요.

  • 실제로 표를 그려보자
  • 아아아아

< tr> 속성 - 행 태그

bgColor: 행의 배경색

height: 행 높이

정렬: 행의 텍스트가 가로 가운데에 정렬되고 값: 왼쪽, 가운데, 오른쪽

  • valign: 수직 중앙, 값: 상단(상단), 중간(중간), 하단(하단)

    • <td> 또는 <번째> 속성

    < ;는 일반 셀이고, <th>는 제목 셀이며 중앙에 굵은 글씨로 표시됩니다.

      너비: 셀 너비

      • 높이: 셀 높이

      • bgColor: 셀 배경색

      • 배경: 셀 배경 이미지

      • 정렬: 가로 정렬

      • valign: 세로 alignment

      • rowspan: 위쪽 셀과 아래쪽 셀을 병합합니다. 병합 속성은 첫 번째 셀에 배치되어야 합니다.

      • colspan: 왼쪽 셀과 오른쪽 셀을 병합합니다. 병합할 때 각 행의 셀 수가 변경되지 않도록 덧셈과 뺄셈이 있어야 합니다.

      • 예: 
    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
    <body>
     <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all">
         <tr>
             <td>工号</td>
             <td>姓名</td>
             <td>职位</td>
         </tr>
         <tr>
             <td>001</td>
             <td>小明</td>
             <td>设计师</td>
         </tr>
         <tr>
             <td>002</td>
             <td>小方</td>
             <td>工程师</td>
         </tr>
         <tr>
             <td>003</td>
             <td>小白</td>
             <td>程序员</td>
         </tr>
     </table> 
    </body>
</html>

    참고: 속성은 대소문자를 구분합니다. bgColor가 bgcolor로 기록되면 아무런 효과가 없습니다.

    각 속성을 입력하고 출력 효과를 볼 수 있습니다


    캡션 태그

    표에 제목 및 요약 추가

    요약

    요약 내용은 브라우저에 표시되지 않습니다. 그 기능은 테이블의 가독성(의미화)을 높이고, 검색 엔진이 테이블 내용을 더 잘 이해할 수 있도록 하며, 또한 화면 판독기를 사용하여 특수 사용자가 테이블 내용을 더 잘 읽을 수 있도록 하는 것입니다.

    구문: <table summary="table Introduction text">

    Title

    은 테이블의 내용, 제목의 표시 위치: 테이블 위.

    구문:

    <table> <caption>제목 텍스트</caption>

    <tr>

    <td>…</td>
                                                 

    안돼




    지속적인 학습
    새로운 파일
    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <table border="2" width="300" height="100" bordercolor="blue" bgColor="#88cc66" cellspacing="0" cellpadding="2" rules="all"> <tr> <td>工号</td> <td>姓名</td> <td>职位</td> </tr> <tr> <td>001</td> <td>小明</td> <td>设计师</td> </tr> <tr> <td>002</td> <td>小方</td> <td>工程师</td> </tr> <tr> <td>003</td> <td>小白</td> <td>程序员</td> </tr> </table> </body> </html>
    코드 재설정
    자동운전
    제출하다
    logo
    시사 Clear
    이전 섹션
    다음 섹션
    튜토리얼 목록
    도움을 받다
    • 코스 추천
    • 코스웨어 다운로드
    무료 HTML+CSS 기본 입문 튜토리얼
    무료 HTML/CSS 5시간 기본 입문 튜토리얼
    무료 CSS 0 기본 입문 튜토리얼
    무료 SVG 튜토리얼
    무료 AngularJS 중국어 참조 매뉴얼
    무료 Go 언어 튜토리얼 매뉴얼
    무료 Redis 명령 조작 중국어 매뉴얼
    무료 파이썬 3 튜토리얼
    무료 XML DOM 튜토리얼
    무료 Memcached 명령 운영 매뉴얼
    무료 XSLT 튜토리얼
    무료 XQuery 튜토리얼
    현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~
    이 강좌를 시청한 학생들도 학습하고 있습니다.
    496451
    PHP로 사업을 시작하는 방법에 대해 간단히 이야기해 보겠습니다. 웹 프론트 엔드 개발에 대한 빠른 소개 민망한 물건 백과사전 사이트를 모방한 Mini 버전 MVC 프레임워크의 대규모 실용 Tianlongbabu 개발 PHP 실용 개발 시작하기: 빠른 PHP 생성 [중소기업 포럼] 로그인 인증 및 클래식 게시판 컴퓨터 네트워크 지식 수집 빠른 시작 Node.JS 정식 버전 당신을 가장 잘 이해하는 프론트엔드 강좌: HTML5/CSS3/ES6/NPM/Vue/...[원본] 자신만의 PHP MVC 프레임워크 작성(깊이 있는 40개 장/자세한 내용/초보자가 발전하려면 읽어야 함)






    		<🎜><🎜>
    <🎜><🎜><🎜>