Table,学习html标签时会引入的标签,也是web项目中广泛使用的标签。它通常用于分类和汇总数据以供显示。本文将向您介绍表格在web项目中的使用。
表-用途1)表页签主要用于显示列表数据,以行和列的方式显示更直观,也可能以汇总行的方式显示。2)除了显示列表数据,表格还可以用于页面布局,因为表格可以设置页面占用的百分比,所以可以用于页面自适应宽度效果。但是,该表只有在需要填写完整数据时才会显示在页面上。如果使用的是表格布局,里面的内容很多,网络慢的时候,界面可能会出现一段时间的空白。3)本文使用vscode作为编辑器演示表格的使用(在vscode中创建新的html文件后,输入感叹号,然后按tab键快速构建html5的dom结构)
表格-默认样式1)表格的表格标签默认为无样式2)没有边框,宽度不会覆盖一整行。
表格边框(TABLE-Border)1)通过css样式的表格标签设置表格边框是实际项目中常用的方式2)表格分为单元格边框和行边框,所以需要将两种边框合并成一个显示。
表-奇偶行颜色1)奇偶行颜色也是由css表标签实现的2)奇数表示奇数行,偶数表示偶数行3)css选择器如果从表体开始,从第一个数据行开始计算奇偶4)css选择器如果是整个表,那么表头也参与奇偶行的计算。
表格-合并单元格1)无论表格合并有多复杂,最终都是基于行和列单元格合并2)行单元格合并,使用rowspan3)列单元格合并,使用colspan
表格-冻结表头1)web表格标签默认没有冻结表头的功能2)因为冻结表格需要css js的辅助,而且每个浏览器的效果有些不同,所以不建议个人自行实现。为了方便快捷,建议直接使用成熟的列表控件,如jqgrid表格控件、easyui前端框架、bootstrap框架等。3)jqgrid表格控件可以冻结表头、合并表头、按列名排序等等。
表格布局1)使用表格布局可以使页面宽度自适应。当宽度不够时,表格中的文字会自动换行。2)注意:表格作为页面相对顶层的布局,最好不要塞进太多的内容,否则可能会导致页面加载缓慢。