집 > 기사 > 웹 프론트엔드 > HTML 테이블 속성이란 무엇입니까? HTML 테이블의 10가지 기본 속성 요약

HTML 테이블 속성이란 무엇입니까? HTML 테이블의 10가지 기본 속성 요약

不言원래의: 2018-07-27 14:45:1930753검색

HTML 테이블 속성 설정은 HTML 웹 페이지에서 널리 사용되며 매우 중요합니다. 따라서 다음 기사에서는 HTML 테이블의 10가지 기본 속성을 별도로 살펴보겠습니다. 이러한 10가지 테이블 속성에 대한 소개 및 특정 코드입니다.

1. HTML 테이블 속성

은 HTML 테이블을 정의하는 데 사용됩니다. 테두리 속성의 값은 1이거나 빈 문자열("")이어야 합니다. ). 이 속성은 테두리의 스타일을 제어하지 않지만 CSS에 의해 제어됩니다. table 요소는 tr, th, td, thead, tbody, tfoot, colgroup 요소를 가질 수 있습니다.

border: 예 값은 1과 0이며, 1은 테두리를 나타내고 0은 테두리가 없음을 나타냅니다.
bordercolor: 테두리 색상을 설정할 수 있으며, 값은 색상 값입니다.
bgcolor: 테이블의 배경색을 설정합니다.
배경: 배경 이미지를 설정합니다.

2 html tr 속성

은 테이블의 행을 정의하는 데 사용됩니다. HTML 테이블은 행 중심이므로 각 행은 별도로 표시되어야 합니다
tr 요소는 table, thead, tbody 및 tfoot 요소 내에서 사용할 수 있습니다.
tr 요소는 하나 이상의 td 또는 th 요소를 포함할 수 있습니다
its align, bgcolor 속성을 설정하려면 CSS 설정을 사용하세요

3. HTML td 속성

사용됩니다. 테이블의 본문

7, HTML tfoot 속성

표시된 테이블의 바닥글을 정의하는 데 사용됩니다.

참고:

, 태그에는 태그가 있어야 하며, 태그는

테이블 셀을 정의하는 데 사용되며 colspan, rowspan 및 headers 로컬 속성과 함께 사용할 수 있습니다. (1)colspan: 열 범위, 이 속성은 셀이 확장할 수 있는 열 수를 지정합니다. 이 속성의 값은 정수여야 합니다. 　 (2)rowspan: 행 범위, 이 속성은 셀이 확장할 수 있는 행 수를 지정합니다. 셀은 확장될 수 있으며 이 속성의 값은 정수여야 합니다 　　(3)헤더: 이 속성의 값은 셀을 열 헤더와 연결하고 다음 용도로 사용할 수 있는 하나 이상의 셀의 ID 속성 값입니다. 스크린 리더를 사용하세요 참고: 각 테이블에는 위의 세 가지 요소가 포함되어야 합니다 4. HTML의 th 속성	은 제목 셀을 정의하는 데 사용됩니다. 이를 통해 데이터와 데이터를 효과적으로 구분할 수 있습니다. 설명	요소와 동일합니다. 동일한 로컬 속성을 가지지만 둘 사이의 차이점은 다음과 같습니다.	는 일반적으로 첫 번째 행이나 열에 있는 헤더 태그를 나타냅니다. . 또한	의 텍스트는 기본적으로 굵게 표시되지만	는 셀의 특정 데이터를 나타내는 데이터 표시입니다. valign 속성은 th 및 td, Top 또는 Bottom 값을 사용할 수 있습니다. ㅋㅋㅋ > ; 　 테이블 헤더와 테이블 헤더 래퍼를 정의하는 데 사용됩니다. 하나 이상의 행을 정의할 수 있습니다. 이 행은 thead 요소가 없으면 모든 tr 이 테이블의 본문에 속하는 것으로 간주됩니다. 6. HTML tbody 속성

　 테이블 셀을 정의하는 데 사용되며 colspan, rowspan 및 headers 로컬 속성과 함께 사용할 수 있습니다.

(1)colspan: 열 범위, 이 속성은 셀이 확장할 수 있는 열 수를 지정합니다. 이 속성의 값은 정수여야 합니다.

　 (2)rowspan: 행 범위, 이 속성은 셀이 확장할 수 있는 행 수를 지정합니다. 셀은 확장될 수 있으며 이 속성의 값은 정수여야 합니다

　　(3)헤더: 이 속성의 값은 셀을 열 헤더와 연결하고 다음 용도로 사용할 수 있는 하나 이상의 셀의 ID 속성 값입니다. 스크린 리더를 사용하세요

참고:

각 테이블에는 위의 세 가지 요소가 포함되어야 합니다

4. HTML의 th 속성

　은 제목 셀을 정의하는 데 사용됩니다. 이를 통해 데이터와 데이터를 효과적으로 구분할 수 있습니다. 설명

요소와 동일합니다. 동일한 로컬 속성을 가지지만 둘 사이의 차이점은 다음과 같습니다.

는 일반적으로 첫 번째 행이나 열에 있는 헤더 태그를 나타냅니다. . 또한

의 텍스트는 기본적으로 굵게 표시되지만

는 셀의 특정 데이터를 나타내는 데이터 표시입니다.

valign 속성은 th 및 td, Top 또는 Bottom 값을 사용할 수 있습니다. ㅋㅋㅋ > ;

　 테이블 헤더와 테이블 헤더 래퍼를 정의하는 데 사용됩니다. 하나 이상의 행을 정의할 수 있습니다. 이 행은 thead 요소가 없으면 모든 tr 이 테이블의 본문에 속하는 것으로 간주됩니다. 6. HTML tbody 속성

라벨 내의 어느 위치가 각각 테이블의 머리 부분과 아래쪽으로 결정됩니다.

는 또는 앞이나 뒤에 나타날 수 있습니다.
html5 이전에는
요소가 요소 앞에 표시되어야 합니다. 8. html colgroup 속성

을 사용하여 특정 열에 스타일을 적용할 수 있습니다. 물론 아래에 언급된 col 요소도 사용할 수 있습니다.
로컬 속성 범위가 있습니다.
은 열 그룹이 확장되어야 하는 열 수를 나타냅니다. 기본값은 하나의 열입니다. 즉, 테이블의 한 열에 대한 스타일을 설정하면　 에는 하나 이상의 요소가 포함될 수 있습니다
9, HTML col 속성

　은 테이블의 단일 열을 나타내는 데 사용되며, 그룹을 정의하기 위해

대신 을 사용하는 것이 좋습니다. 로컬 속성인span
　　은 의 요소 내에 배치되며, 의 인스턴스는 그룹의 열을 나타냅니다. 이 태그를 사용하여 열 그룹과 그룹의 단일 열에 스타일을 적용합니다

10.html 캡션 속성

테이블 제목을 정의하는 데 사용됩니다. 각 테이블에는 하나의

요소만 포함될 수 있습니다.

11. 예제 코드:

<body>
    <table border="1" bordercolor="red" bgcolor="#ff4646">
        <caption>表格示例</caption>
        <tr align="center">
            <th>标题1</th>
            <th>标题2</th>
            <th>标题3</th>
        </tr>
        <tr>
            <td align="left">左</td>
            <td align="center">中</td>
            <td align="right">右</td>
        </tr>
        <tr>
            <td valign="top">top</td>
            <td>center</td>
            <td valign="bottom">bottom</td>
        </tr>
    </table>
</body>

실행 결과:

HTML 테이블 속성이란 무엇입니까? HTML 테이블의 10가지 기본 속성 요약

셀은 여러 행에 걸쳐 있습니다.

실행 결과:

HTML 테이블 속성이란 무엇입니까? HTML 테이블의 10가지 기본 속성 요약

열 전체의 셀

<table border="1" bordercolor="#1f1fff">
       <caption>单元格的跨行</caption>
       <tr>
           <th>姓名</th>
           <th colspan="2">电话</th>
       </tr>
       <tr>
           <td>php中文网</td>
           <td>123456   654321</td>
       </tr>
   </table>

실행 결과:

HTML 테이블 속성이란 무엇입니까? HTML 테이블의 10가지 기본 속성 요약

HTML 테이블 속성이란 무엇입니까? HTML 테이블의 10가지 기본 속성 요약

관련 기사