html表格的分区与分组控制


本文摘自PHP中文网,作者无忌哥哥,侵删。

1. 表格的分区主要用<thead><tbody><tfoot>将表格分为头部,主体,尾部三分部

2. 这三个表格分区标签本身没有任何样式,仅仅是一个区块划分标记罢了

除了可以对表格进行分区控制外,还可以对每一列进行分组,这样可以快速的进行设置,提高效率

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

<!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表格的分区与分组控制的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html块级标签行内标签的显示模式

Html的由来

Html中必须掌握的知识点有哪些

Html怎么给文字加粗

Html怎么设置背景透明度

Html怎么设置字体加粗

css如何去掉li前面的点

Html表格如何设置间距

xml与Html是什么?有哪些区别?

Html中怎么让表格居中

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...