HTML의 다양한 테이블 속성 요약(코드 포함)
- 不言원래의
- 2018-07-21 11:38:542057검색
이 글은 HTML의 다양한 테이블 속성(코드 포함)을 요약한 것입니다. 내용이 매우 좋습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
여기에서는 향후 편의를 위해 테이블의 일부 속성과 간단한 스타일을 주로 요약하고 기록합니다.
1, 로컬 속성을 사용하여 HTML 테이블을 정의하는 데 사용됩니다. border 표현 테두리 의 경우 테두리 속성 값은 1이거나 빈 문자열("")이어야 합니다. 이 속성은 테두리의 스타일을 제어하지 않지만 CSS에 의해 제어됩니다. 🎜🎜#2, 은 테두리를 정의하는 데 사용됩니다. 테이블의 한 줄. HTML 테이블은 행 중심이므로 각 행은 별도로 표시되어야 합니다. 해당 속성을 설정하려면 CSS 설정 3을 사용하세요. < 🎜🎜# 은 테이블 셀을 정의하는 데 사용되며 colspan, rowspan 및 headers 로컬 속성과 함께 사용할 수 있습니다. colspan: 열 범위, 이 속성은 열 범위의 수를 지정합니다. 이 속성의 값은 정수여야 합니다. (2) rowspan: 행 범위, 이 속성은 셀이 확장할 수 있는 열 수를 지정합니다. 이 속성의 값은 정수여야 합니다. (3)헤더: 이 속성의 값은 하나 이상의 셀의 ID 속성 값으로, 셀을 열 헤더와 연결하고 사용할 수 있습니다. 화면 사용 독자: 예 위 내용은 HTML의 다양한 테이블 속성 요약(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
<!DOCTYPE html><html>
<body>
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</body></html></p>
<p>효과는 다음과 같습니다. </p>
<p></p>
<p> </p> 🎜🎜#4. 🎜#td<p>><span style="color: #ff0000"> <strong> 요소는 동일한 로컬 속성을 가지며 두 요소에는 다음과 같은 차이점이 있습니다. </strong></span># 🎜🎜#</p><th> 일반적으로 첫 번째 행이나 열에 위치하는 헤더 태그를 나타냅니다. <th>의 텍스트는 기본적으로 굵게 표시되지만 <td>는 셀을 나타내는 데이터 표시입니다. 특정 데이터<p></p>
<p class="cnblogs_code"></p>
<p> 5. <thead></p>
<p></p> 테이블의 헤더를 정의하는 데 사용되며, 헤더의 래퍼입니다. 테이블 요소 <p><img src="https://img.php.cn/upload/article/000/000/009/2ac2324be3decdfc293a5dbb2e9c15f4-0.png" alt="" style="max-width:90%" style="max-width:90%">의 열 레이블인 하나 이상의 행을 정의할 수 있습니다. #</p>6 , <tbody><p><strong></strong> 테이블의 본문을 정의하는 데 사용됩니다. </p>
<p></p>7, <tfoot># 🎜🎜#<p># 🎜🎜# 표시된 테이블의 바닥글을 정의하는 데 사용됩니다. <strong></strong>⚠️: <strong></strong></p>
<ol class=" list-paddingleft-2"><thead> , <tfoot> 태그는 <tr> 안에 있어야 합니다. 태그 <li><p></p></li><tfoot> 태그는 위치에 관계없이 대상으로 지정됩니다. 테이블의 헤더와 하단에 위치합니다. <tfoot>는 <tbody> 또는 <tr> 앞이나 뒤에 나타날 수 있습니다. html5 이전에는 <tfoot> 요소가 <tbody> 요소 앞에 표시되어야 합니다. 🎜🎜#<li>
<p></p>8、<colgroup></li>
</ol>
<p> 테이블 열 그룹을 정의하는 데 사용되며, 특정 항목에 스타일을 적용하는 데 사용할 수 있습니다. 물론 열에는 아래에 언급된 col 요소를 사용할 수도 있습니다<strong></strong> <colgroup>는 열 그룹이 확장해야 하는 열 수를 나타냅니다. 기본값은 하나의 열입니다. 즉, 테이블 </p>
<p> <colgroup>의 한 열에 대한 스타일을 설정하면 하나 이상의 <col> 요소가 포함될 수 있습니다. </p>
<p>#🎜 🎜#9, <col></p>
<p><strong>은 테이블의 단일 열을 나타내는 데 사용됩니다. <colgroup> 그룹을 정의하기 위해 범위 속성을 직접 설정합니다</strong># 🎜🎜# <col>에는 로컬 속성인span</p>
<p> <col> <colgroup>, <col>의 인스턴스는 그룹의 열을 나타냅니다. 이 태그를 사용하여 열 그룹과 그룹 내의 개별 열에 스타일을 적용할 수 있습니다. 각 테이블에는 하나의 <caption> 요소만 포함될 수 있습니다. </p>
<p>간단한 예: #🎜🎜 #<strong></strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html><html>
<head>
<style>
thead th,tfoot th {
text-align: left;
background: grey;
color: white }
tbody th {
text-align: right;
background: lightgrey;
color: grey }
/* tbody td {
background: greenyellow;
} */
#colgroup1 {
background-color: blueviolet }
#col3 {
background-color: yellow;
font-size: small }
</style>
</head>
<body>
<table>
<colgroup id="colgroup1">
<col id="collAnd2" span="2"/>
<col id="col3"/>
</colgroup>
<colgroup id="colgroup2" span="2"></colgroup>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th colspan="2">Size & Votes</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank Footer</th>
<th>Name Footer</th>
<th>Color Footer</th>
<th colspan="2">Size And Votes Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>CSS</td>
<td>Java</td>
<td>IOS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Web</td>
<td>HTML5</td>
<td>CS</td>
<td>460</td>
</tr>
</tbody>
</table>
</body></html>#🎜🎜 #코드 보기
효과는 다음과 같습니다