简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

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>
    제출하다코드 재설정
    이전 섹션 다음 섹션
    튜토리얼 목록
    도움을 받다
    • 코스 추천
    • 코스웨어 다운로드
    현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

    이 강좌를 시청한 학생들도 학습하고 있습니다.

    최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  492130회 재생
    회사 소개 부인 성명 Sitemap
    PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！






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