지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML 테이블이란 무엇입니까? 태그의 다양한 속성을 사용하는 방법
寻∝梦
풀어 주다： 2018-08-22 13:59:09
원래의
24618명이 탐색했습니다.

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 테이블이란 무엇입니까?

    속성

    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 테이블 테이블 스타일 속성

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

    관련 라벨：
    html table
    원천：php.cn
    이전 기사：html 스타일 태그는 무엇을 의미하나요? 스타일 태그 사용법에 대한 자세한 설명 다음 기사：HTML 글꼴 태그의 색상 속성은 무엇입니까? Fontcolor 사용법 소개(색상 코드 표 포함)
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    최신 이슈
    jquery를 사용하여 HTML 데이터 테이블에서 선택되지 않은 행의 값을 검색하는 방법 버튼을 클릭하지 않은 모든 행의 값을 얻으려고합니다. 예를 들어, 첫 번째 행의 버튼을 클릭했을 때 클릭되지 않은 행의 값을 검색하고 싶습니다. vartable=...
    에서 2024-04-05 09:26:49
    0
    1
    1418
    mysql에서 중첩된 관련 값 검색 데이터베이스의 여러 항목을 기반으로 관련 값을 검색하려고 합니다. 저는 JOIN 등을 사용할 때 MySQL을 처음 접했고 불필요하게 PHP를 사용하지 않으려고 노...
    에서 2024-04-04 17:29:06
    0
    2
    365
    특정 클릭 이벤트를 수신하고 다른 클릭 이벤트는 억제하는 방법은 무엇입니까? 내 웹 애플리케이션에는 각 행이 특정 URL(<table><trdata-url="https://www.google.com">...
    에서 2024-04-04 16:55:27
    0
    1
    317
    수직으로 회전된 표 제목, 중앙 + 하단 정렬, 브라우저 간 Chrome에서는 예상대로 보이지만 Firefox에서는 그렇지 않은 회전된 헤더가 있는 테이블이 있습니다. Chromev108(수직 하단, 수평 중간) ✅Fire...
    에서 2024-04-04 16:45:25
    0
    1
    330
    고정 헤더와 회전된 열 헤더가 있는 테이블 고정된 헤더와 고정된 첫 번째 열이 있는 테이블이 있습니다. 또한 열 머리글을 45도 회전하고 싶습니다. 고정 제목에는 배경색을 설정해야 합니다. 그러나 다음 열...
    에서 2024-04-03 08:50:32
    0
    1
    362
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿