html表格分区与分组控制的示例

  介绍

这篇“html表格分区与分组控制的示例“文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“html表格分区与分组控制的示例”,小编整理了以下知识点,请大家跟着小编的步伐一步一步的慢慢理解,接下来就让我们进入主题吧。

html有什么特点

1,简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。   2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证只         3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。         4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

1。表格的分区主要用& lt; thead> & lt; tbody> & lt; tfoot>将表格分为头部,主体、尾部三分部

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

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

& lt; ! DOCTYPE  html>   & lt; html>   & lt; head>   & lt; meta  charset=癠TF-8"祝辞   & lt; title>表格的分区与分组控制& lt;/title>   & lt;/head>   & lt; body>   & lt; table 边界=?“,单元格间距=?”,单元格边距=?“,对齐=癱enter",宽度=啊?0%;比;   & lt; caption> & lt; h4>岛国明星TOP50排行榜& lt;/h4> & lt;/caption>   & lt; !——,对每一列进行分组控制,——比;   & lt; !——, & lt; colgroup>:可以对一列进行整体控制,但能用的属性非常有限,通常要配合css才能发挥作用,——比;   & lt; !——, & lt; col>标签可对分到一组的每一列进行更加精准的控制,——比;   & lt; colgroup 跨度=?“,背景=發ightgreen"祝辞& lt;/colgroup>   & lt; colgroup 跨度=?“,背景=發ightgreen"祝辞& lt;/colgroup>   & lt; colgroup 跨度=?“,背景=發ightyellow"比;   & lt; !——,对第三列单独控制,——比;   & lt; col 背景=發ightgray"祝辞   & lt; col>   & lt;/colgroup>   & lt; colgroup 跨度=?“,背景=癱yan"祝辞& lt;/colgroup>   & lt; thead>   & lt; !——,我们可以设置行或单元格的背景颜色,——比;   & lt; tr 背景=皊kyblue"祝辞   & lt; !——, & lt; th>标签内部文本默认会加粗居中显示,非常适合做表头,——比;   & lt; th> ID   & lt; th>姓名& lt;/th>   & lt; th>腰围& lt;/th>   & lt; th>腰围& lt;/th>   & lt; th>臀围& lt;/th>   & lt;/tr>   & lt; tr>   & lt; td 对齐=癱enter"祝辞01 & lt;/td>   & lt; td 对齐=癱enter"祝辞波多野结衣& lt;/td>   & lt; td 对齐=癱enter"祝辞88 & lt;/td>   & lt; td 对齐=癱enter"祝辞59 & lt;/td>   & lt; td 对齐=癱enter"祝辞85 & lt;/td>   & lt;/tr>   & lt; tr>   & lt; td 对齐=癱enter"祝辞02 & lt;/td>   & lt; td 对齐=癱enter"祝辞小泽玛利亚& lt;/td>   & lt; td 对齐=癱enter"祝辞90 & lt;/td>   & lt; td 对齐=癱enter"祝辞60 & lt;/td>   & lt; td 对齐=癱enter"祝辞85 & lt;/td>   & lt;/tr>   & lt; tr>   & lt; td 对齐=癱enter"祝辞03 & lt;/td>   & lt; td 对齐=癱enter"祝辞浅川梨奈& lt;/td>   & lt; td 对齐=癱enter"祝辞87 & lt;/td>   & lt; td 对齐=癱enter"祝辞61 & lt;/td>   & lt; td 对齐=癱enter"祝辞88 & lt;/td>   & lt;/tr>   & lt; tr>   & lt; td 对齐=癱enter"祝辞04 & lt;/td>   & lt; td 对齐=癱enter"祝辞深田恭子& lt;/td>   & lt; td 对齐=癱enter"祝辞86 & lt;/td>   & lt; td 对齐=癱enter"祝辞62 & lt;/td>   & lt; td 对齐=癱enter"祝辞88 & lt;/td>   & lt;/tr>   & lt; tr>   & lt; td 对齐=癱enter"祝辞05 & lt;/td>   & lt; td 对齐=癱enter"祝辞苍老师& lt;/td>   & lt; td 对齐=癱enter"祝辞88 & lt;/td>   & lt; td 对齐=癱enter"祝辞68 & lt;/td>   & lt; td 对齐=癱enter"祝辞90 & lt;/td>   & lt;/tr>   & lt;/tbody>   & lt; !——, tfoot:表格底部,目前暂时无内容,保持空即可,——比;   & lt; tfoot>   & lt;/tfoot>   & lt;/table>   & lt; p 对齐=癱enter"祝辞   https://www.yisu.com/zixun/& lt; a  href=" ">首页

html表格分区与分组控制的示例