HTML 테이블의 파티션 및 그룹화 제어

无忌哥哥
풀어 주다: 2018-06-29 10:05:25
원래의
4333명이 탐색했습니다.

1. 테이블 분할은 주로 를 사용하여 테이블을 head, body, tail의 세 부분으로 나눕니다.

2. 테이블 파티션 레이블 3개 자체에는 아무 것도 없습니다. 스타일, 그들은 단지 블록 분할 표시일 뿐입니다

테이블을 분할하는 것 외에도 각 열을 그룹화할 수도 있으므로 빠르게 설정하고 효율성을 높일 수 있습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的分区与分组控制</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="80%">
<caption><h3>岛国明星TOP50排行榜</h3></caption>
<!-- 对每一列进行分组控制 -->
<!-- <colgroup>:可以对一列进行整体控制,但能用的属性非常有限,通常要配合css才能发挥作用 -->
<!-- <col>标签可对分到一组的每一列进行更加精准的控制 -->
<colgroup span="1" bgcolor="lightgreen"></colgroup>
<colgroup span="1" bgcolor="lightgreen"></colgroup>
<colgroup span="2" bgcolor="lightyellow">
<!-- 对第三列单独控制 -->
<col bgcolor="lightgray">
<col>
</colgroup>
<colgroup span="2" bgcolor="cyan"></colgroup>
<thead>
<!-- bgcolor可以设置行或单元格的背景颜色 -->
<tr bgcolor="skyblue">
<!-- <th>标签内部文本默认会加粗居中显示,非常适合做表头 -->
<th>ID</th>
<th>姓名</th>
<th>腰围</th>
<th>腰围</th>
<th>臀围</th>
</tr>
<tr>
<td align="center">01</td>
<td align="center">波多野结衣</td>
<td align="center">88</td>
<td align="center">59</td>
<td align="center">85</td>
</tr>
<tr>
<td align="center">02</td>
<td align="center">小泽玛利亚</td>
<td align="center">90</td>
<td align="center">60</td>
<td align="center">85</td>
</tr>
<tr>
<td align="center">03</td>
<td align="center">浅川梨奈</td>
<td align="center">87</td>
<td align="center">61</td>
<td align="center">88</td>
</tr>
<tr>
<td align="center">04</td>
<td align="center">深田恭子</td>
<td align="center">86</td>
<td align="center">62</td>
<td align="center">88</td>
</tr>
<tr>
<td align="center">05</td>
<td align="center">苍老师</td>
<td align="center">88</td>
<td align="center">68</td>
<td align="center">90</td>
</tr>
</tbody>
<!-- tfoot:表格底部,目前暂时无内容,保持空即可 -->
<tfoot>
</tfoot>
</table>
<p align="center">
<a href="">首页</a>
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">...</a>
<a href="">下一页</a>
<a href="">尾页</a>
</p>
</body>
</html>
로그인 후 복사

위 내용은 HTML 테이블의 파티션 및 그룹화 제어의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿