>  기사  >  웹 프론트엔드  >  HTML 테이블 사용 방법에 대한 간략한 분석

HTML 테이블 사용 방법에 대한 간략한 분석

不言
不言원래의
2018-07-28 11:21:431776검색

이 기사의 내용은 HTML 테이블 사용 방법에 대한 간략한 분석입니다. 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

정의 및 사용법

table 태그는 HTML 테이블을 정의합니다. table标签定义 HTML 表格。

创建表格的四要素:tabletrthtd

<table> <p>整个表格以<code><table>标记开始、<code> 标记结束。

<tr> <p>Table row。表格的一行,有几对 tr 表格就有几行。</p> <h3><code><td> <p>Table data。表格的一个单元格,一行中包含几对 td ,一行中就有几列。</p> <h3><code><th> <p>Table head。表格的头部的一个单元格,表格表头。</p> <h2>额外元素</h2> <h3><code><tbody>、<code><thead>、<code><tfoot><p>表格结构,如果不加<code><thead> </thead> <tbody> <tfooter> , 表格将在加载完后才显示。加上这些, <code>tbody包含行的内容优先显示,不必等待表格结束后再显示。
同时,如果表格很长,用tbody分段,可以一部分一部分地显示。
(通俗理解 table 可以按结构一块块的显示,不用等整个表格加载完后显示。)

<caption></caption>

表格标题

属性

border

表格边框的宽度。
建议设置为 0 后自行 CSS 添加边框样式。

cellpadding

表格单元边界与单元内容之间的间距(内边距)。
建议设置为 0 后自行 CSS 添加内边距样式。

cellspacing

单元格之间的间距。

实例

使用CSS3实现表格隔行变色

HTML 테이블 사용 방법에 대한 간략한 분석
使用 CSS3的 :nth-child(n)

테이블을 생성하는 네 가지 요소: table, tr, th, td

<table> <br>전체 테이블은 <code><table> 태그로 시작하고 <code> 로 끝납니다. 태그입니다.

<tr> <p class="post-topheader custom- pt0">테이블 행. 테이블의 한 행에는 여러 쌍의 tr이 있고, 테이블에는 여러 개의 행이 있습니다. </p> <h3><code><td> <p class="mb20">테이블 데이터. 테이블의 셀에는 한 행에 여러 쌍의 td가 있고 한 행에 여러 열이 있습니다. <a href="http://www.php.cn/div-tutorial-407162.html" target="_blank" title="HTML的格式及标签介绍"><h3><code>

테이블 헤드. 테이블 머리글, 테이블 머리글에 있는 셀입니다.

추가 요소

<tbody>, <code><thead>, <code><tfoot> h3><p class="mb20">테이블 구조, <code><thead> </thead> <tbody><tfooter>가 추가되지 않으면 로드 후 테이블이 표시됩니다. 이러한 추가를 사용하면 테이블 끝이 표시될 때까지 기다리지 않고 <code>tbody에 포함된 행의 내용이 먼저 표시됩니다. 동시에 표가 너무 길면 tbody를 사용하여 분할하여 부분별로 표시하세요. (일반인의 관점에서 보면 테이블 전체가 로드될 때까지 기다리지 않고 구조에 따라 테이블을 하나씩 표시할 수 있습니다.)

<caption></caption>

Table title

속성

border

🎜표 테두리의 너비입니다. 🎜0으로 설정한 후 CSS를 사용해 테두리 스타일을 직접 추가하는 것을 권장합니다. 🎜

cellpadding

🎜표 셀 경계와 셀 내용 사이의 간격(패딩)입니다. 🎜0으로 설정한 후 CSS를 사용하여 직접 패딩 스타일을 추가하는 것이 좋습니다. 🎜

셀 간격

🎜셀 사이의 간격입니다. 🎜🎜예🎜

CSS3을 사용하여 대체 행의 테이블 색상 변경

🎜HTML 테이블 사용 방법에 대한 간략한 분석🎜CSS3의 :nth-child(n) 사용 code> 의사 클래스 선택기는 테이블의 대체 행 색상을 변경하는 효과를 얻을 수 있습니다. 🎜n 각각 홀수 행/열, 짝수 행/열 또는 지정된 행/열을 나타내는 홀수, 짝수 또는 임의의 숫자를 채울 수 있습니다.🎜🎜관련 권장 사항: 🎜🎜🎜HTML 형식 및 태그 소개🎜🎜🎜🎜간단한 방법 html 설명 기본 구조(코드 포함) 🎜🎜🎜🎜

위 내용은 HTML 테이블 사용 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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