지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어

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>
                                                 

    안돼




    지속적인 학습

    ||
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!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>
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
    제출하다코드 재설정
    이전 섹션 다음 섹션
    튜토리얼 목록
    도움을 받다
    • 코스 추천
    • 코스웨어 다운로드
    현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~

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

    최신 ThinkPHP 5.1 세계 최초 비디오 튜토리얼(PHP 전문가 온라인 교육 과정이 되기까지 60일)  494444회 재생






    		<🎜><🎜>
    <🎜><🎜><🎜>
    图片放大关闭