웹 프론트엔드 HTML 튜토리얼 HTML 테이블이란 무엇입니까? 태그의 다양한 속성을 사용하는 방법

HTML 테이블이란 무엇입니까? 태그의 다양한 속성을 사용하는 방법

Aug 22, 2018 pm 01:59 PM
html table

HTML 테이블이란 무엇인가요?

태그의 다양한 속성과 용도는 모두 이 문서에 나와 있습니다. 이 문서는 테이블의 모든 기본 속성을 명확하게 설명합니다. html 테이블 테이블에도 속성과 몇 가지 사용법이 있습니다

우선 테이블이 무엇인지, 테이블의 역할을 이해하겠습니다

테이블이란 무엇입니까? 테이블이라는 직사각형 상자로 구성됩니다. 셀을 왼쪽에서 오른쪽 순서로 위에서 아래로 오른쪽으로 배열하여

테이블을 구성합니다. 테이블의 기능: 정보를 특정 구조로 표시합니다.

테이블 사용 방법 테이블:

테이블 정의:

테이블 행 만들기:

열(셀) 만들기:< ;

참고: 기본적으로 각 행의 열 수는 일정합니다. ㅋㅋㅋ

1,

속성

1.width: 테이블 너비 설정 2.height: 테이블 높이 설정

3.align: 상위 요소에서 테이블의 가로 정렬 설정, value : left,center,right

4.border: 테두리, 테두리 너비, px 값, px 생략 가능

5.cellpadding

                                                    ‐ ‐ ‐ OUTOUT ps out‐'' 5. 6.cellspacing

셀 여백

셀 사이 또는 셀과 테이블 사이의 거리

7.bgcolor: 배경색

2. 테이블의

속성

1.align: 이 줄 내용의 가로 정렬

2.valign

이 줄 내용의 수직 정렬

값: top, middle, Bottom

3.bgcolor

3. 테이블의

  • 3 테이블의 복잡한 적용

  • 1. 표는 3부분으로 나눌 수 있습니다
  • 1. 표 헤더
  • 2. 표 본문

    3. 표 바닥글

    < ;/tfoot>
    <table>
        <tbody>
             <tr></tr>
             <tr></tr>
        </tbody>
    </table>
    로그인 후 복사

    참고: 잘못된 경우 테이블 행이 그룹화되면 기본적으로 모두 tbody

    2에 속합니다. 불규칙한 테이블의 각 행에 있는 열 수

    는 그렇지 않습니다. 통일.

    1. 열 병합

    열 병합, 지정된 셀을 수평으로 오른쪽으로 이동, 여러 셀 병합(자신 포함)

    구문: ​​td

    2의 colspan 속성

    행 병합, 지정된 셀을 병합합니다. cell, 수직 하향, 여러 셀 병합(자신 포함)

    구문: ​​td의 rowspan 속성

    참고: 행이든 열이든 상관없이 병합된 셀은 코드에서 삭제되어야 합니다

    3. 테이블 중첩

    테이블에 다른 테이블이 포함되어 있습니다.

    중첩 테이블은

    기능: 제목 위치를 기본 위치에서 표 아래로 변경

    속성: caption-side

    값:

    1. top: 기본값

    2. 하단: 제목은 아래 테이블에 있습니다.

    4. html 테이블 테이블 스타일 속성의 표시 규칙

    1.Function

    브라우저가 테이블을 레이아웃하는 방법을 지정합니다. 이는 실제로 셀

    기본 알고리즘의 알고리즘 규칙을 지정합니다. 셀의 너비는 내용에 따라 결정되며 설정된 너비 값에 의해 제한되지 않습니다.

    2. 속성: table-layout

    값:

    1. 자동: 기본값, 자동, 열 너비는 내용에 따라 결정됩니다.

    2 고정: 테이블 레이아웃은 고정되고, 열 너비는 설정된 값에 따라 결정됩니다.

    3. 자동 테이블 레이아웃 & 고정 테이블 레이아웃

    1. 자동 테이블 레이아웃(자동)

    셀 크기가 콘텐츠 크기에 맞춰 조정됩니다.

    테이블이 복잡하면 로딩이 느려집니다

    적합합니다. 각 열에 대한 불확실성을 위해

    크기에 대한 전통적인 테이블 표시 방법 사용

    2. 고정 테이블 레이아웃(고정)

    셀의 크기는 설정된 값에 따라 결정되며 내용과 관련이 없습니다

    테이블 표시 속도를 높이고 브라우저는 로드 후 먼저 테이블을 표시합니다. 작동하면 더 이상 계산할 필요가 없습니다.

    4. 숨겨진 표시 효과

    속성: visible:collapse

    테이블의 전체 레이아웃에 영향을 주지 않고 행이나 열을 삭제하는 데 사용됩니다.

    이 글을 읽어주셔서 감사합니다. ? 이에 대해 아래에서 질문할 수 있습니다.

    이 고급 버전에 대한 또 다른 기사가 있습니다. 클릭해 주세요.

    html5 테이블 태그 스타일 소개(html5 테이블 CSS 센터링 예시 포함)

    【에디터 관련 기사】

    html em 태그란 무엇입니까? 기능? 태그와 태그의 차이점

    html optgroup 태그는 무엇을 의미하나요? html optgroup 태그의 사용법 및 속성 예 분석

    위 내용은 HTML 테이블이란 무엇입니까? 태그의 다양한 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
    4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 채팅 명령 및 사용 방법
    4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    HTML의 테이블 테두리 HTML의 테이블 테두리 Sep 04, 2024 pm 04:49 PM

    HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.

    HTML 여백-왼쪽 HTML 여백-왼쪽 Sep 04, 2024 pm 04:48 PM

    HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.

    HTML의 중첩 테이블 HTML의 중첩 테이블 Sep 04, 2024 pm 04:49 PM

    HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.

    HTML 테이블 레이아웃 HTML 테이블 레이아웃 Sep 04, 2024 pm 04:54 PM

    HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.

    HTML 입력 자리 표시자 HTML 입력 자리 표시자 Sep 04, 2024 pm 04:54 PM

    HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.

    HTML 정렬 목록 HTML 정렬 목록 Sep 04, 2024 pm 04:43 PM

    HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.

    HTML에서 텍스트 이동 HTML에서 텍스트 이동 Sep 04, 2024 pm 04:45 PM

    HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.

    HTML 온클릭 버튼 HTML 온클릭 버튼 Sep 04, 2024 pm 04:49 PM

    HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.

    See all articles
    속성

    width

    height

    align

    valign

    bgcolor

    • colspan: 열 전체에 셀 설정

    • rowspan: 테이블에 셀 교차 -bank 表 및 기타 표시 설정:

    • 1, & lt; 캡션 & gt; & lt;/capption & gt;
      <table>
          <caption>标题</caption>
          <tr>
              <td></td>
              <td></td>
          </tr>
      </table>
      로그인 후 복사

      2. 행 제목 또는 열 제목
    • 열 제목: 첫 번째 행의 각 열, 굵게, 가로 중심 효과

    • 각 행의 첫 번째 열, 굵은 글씨, 가로 중앙 정렬 효과는
    • 행(열) 제목:

    <table>
        <tr>
           <td>
    <table>
        <tr>
            <td>
            </td>
        </tr>
    </table>
           </td>
        </tr>
    </table>
    로그인 후 복사

    html 테이블 테이블의 고유 스타일 속성

    1, HTML 테이블 테이블 스타일 속성 테두리 여백

    1에 나타나야 합니다. . 기능: 인접한 셀 테두리 사이의 거리를 설정합니다(cellspacing과 유사)

    2 속성: border-spacing

    값:

    1. 1개의 값을 가져옵니다

    이는 가로 및 세로 간격이 동일함을 의미합니다

    2. 2개의 값을 가져옵니다. ​​

    첫 번째 값은 가로 간격을 나타냅니다.

    두 번째 값은 세로 간격을 나타냅니다.

    두 값을 공백으로 구분하세요

    3. 요구사항

                                                                                                                                  border-collapse border-collapse는 분리되어야 합니다

             border-collapse는 분리 테두리 모드에서 유효해야 합니다

     

    3. HTML 테이블 테이블 스타일 속성